Clipboard

	<script>
  import { Clipboard, Input } from "flowbite-svelte";
  import { CheckOutline } from "flowbite-svelte-icons";

  let value = $state("npm install flowbite");
  let success = $state(false);
</script>

<Input bind:value class="w-64" />
<Clipboard bind:value bind:success class="w-24">
  {#if success}<CheckOutline />{:else}Copy{/if}
</Clipboard>

	<script>
  import { Clipboard, Input, Tooltip } from "flowbite-svelte";
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let value = $state("npm install flowbite");
</script>

<div class="w-64">
  <Input bind:value>
    {#snippet right()}
      <Clipboard bind:value embedded>
        {#snippet children(success)}
          <Tooltip isOpen={success}>{success ? "Copied" : "Copy to clipboard"}</Tooltip>
          {#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
        {/snippet}
      </Clipboard>
    {/snippet}
  </Input>
</div>

	<script>
  import { Clipboard, Input, Tooltip, ButtonGroup } from "flowbite-svelte";
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let value = $state("npm install flowbite");
</script>

<div class="w-64">
  <Input bind:value class="text-sm">
    {#snippet right()}
      <Clipboard size="xs" color="alternative" bind:value class="-mr-1 w-20 focus:ring-0">
        {#snippet children(success)}
          {#if success}
            <CheckOutline class="h-3 w-3" /> Copied
          {:else}
            <ClipboardCleanSolid class="h-3 w-3" /> Copy
          {/if}
        {/snippet}
      </Clipboard>
    {/snippet}
  </Input>
</div>

	<script>
  import { Clipboard, Input, InputAddon, Tooltip, ButtonGroup } from "flowbite-svelte";
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let value = $state("https://flowbite.com");
</script>

<ButtonGroup>
  <InputAddon>URL</InputAddon>
  <Input bind:value readonly disabled class="w-64" />
  <Clipboard color="primary" bind:value>
    {#snippet children(success)}
      <Tooltip class="whitespace-nowrap">{success ? "Copied" : "Copy to clipboard"}</Tooltip>
      {#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
    {/snippet}
  </Clipboard>
</ButtonGroup>

	<script>
  import { Clipboard, Input, Label, Helper, Button, Tooltip, ButtonGroup } from "flowbite-svelte";
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let value = $state("https://bit.ly/3U2SXcF");
</script>

<div class="space-y-2">
  <Label for="url-shortener">Shorten URL:</Label>
  <ButtonGroup>
    <Button color="primary">Generate</Button>
    <Input id="url-shortener" bind:value readonly disabled class="w-64" />
    <Clipboard bind:value>
      {#snippet children(success)}
        <Tooltip class="whitespace-nowrap">{success ? "Copied" : "Copy link"}</Tooltip>
        {#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
      {/snippet}
    </Clipboard>
  </ButtonGroup>
  <Helper>Make sure that your URL is valid</Helper>
</div>

	<script lang="ts">
  import { Clipboard, Label, Helper } from "flowbite-svelte";
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let value = $state("");
  let success = $state(false);

  function onclick(ev: MouseEvent): void {
    const target = ev.target as HTMLElement;
    const codeBlock = target.ownerDocument.querySelector("#code-block");
    if (codeBlock) {
      value = codeBlock.textContent || "";
    }
  }
</script>

<div class="w-full max-w-lg space-y-1">
  <Label>Copy source code block:</Label>
  <div class="relative h-64 rounded-lg bg-gray-50 p-4 dark:bg-gray-700">
    <div class="max-h-full overflow-scroll">
      <pre><code id="code-block" class="text-sm whitespace-pre text-gray-500 dark:text-gray-400">  
    &#x3C;div class="space-y-2"&#x3E;
        &#x3C;Label for="url-shortener"&#x3E;Shorten URL:&#x3C;/Label&#x3E;
        &#x3C;ButtonGroup&#x3E;
        &#x3C;Button color="primary"&#x3E;Generate&#x3C;/Button&#x3E;
        &#x3C;Input id="url-shortener" bind:value readonly disabled class="w-64" /&#x3E;
            &#x3C;Clipboard bind:value&#x3E;
                {#snippet children(success: boolean)}
            &#x3C;Tooltip class="whitespace-nowrap"&#x3E;{success ? "Copied" : "Copy link"}&#x3C;/Tooltip&#x3E;
                {#if success}&#x3C;CheckOutline /&#x3E;{:else}&#x3C;ClipboardCleanSolid /&#x3E;{/if}
          {/snippet}
            &#x3C;/Clipboard&#x3E;
        &#x3C;/ButtonGroup&#x3E;
        &#x3C;Helper&#x3E;Make sure that your URL is valid&#x3C;/Helper&#x3E;
    &#x3C;/div&#x3E;
            </code></pre>
    </div>

    <Clipboard color={success ? "alternative" : "light"} bind:value bind:success size="sm" class="absolute end-2 top-2 h-8 px-2.5 font-medium focus:ring-0" {onclick}>
      {#if success}
        <CheckOutline class="h-3 w-3" /> Copied
      {:else}
        <ClipboardCleanSolid class="h-3 w-3" /> Copy code
      {/if}
    </Clipboard>
  </div>
  <Helper>Configure Tailwind CSS and Flowbite before copying the code</Helper>
</div>

	<script lang="ts">
  import { Card, Clipboard, Input, Label, Tooltip, Button } from "flowbite-svelte";
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let acc_id = $state("756593826");
  let api_key = $state("f4h6sd3t-jsy63ind-hsgdt7rs-jdhf76st");
  let role_arn = $state("123456789012:user/Flowbite");
  let value = $state("");
</script>

{#snippet children(success: boolean)}
  <Tooltip isOpen={success}>{success ? "Copied" : "Copy to clipboard"}</Tooltip>
  {#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
{/snippet}

<Card size="md" class="p-4 sm:p-6 md:p-8">
  <form class="flex flex-col space-y-6" action="/">
    <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Create a role with read only in-line policies</h2>
    <p class="mb-6 text-gray-500 dark:text-gray-400">
      To give Flowbite read access, please create an IAM Role following <a href="#top" class="font-medium text-blue-700 underline hover:no-underline dark:text-blue-500">trust relationship</a>
      and
      <a href="#top" class="font-medium text-blue-700 underline hover:no-underline dark:text-blue-500">inline policy</a>
      .
    </p>

    <Label class="space-y-2 font-medium">
      <div>Flowbite account ID:</div>
      <Input bind:value={acc_id} readonly disabled>
        {#snippet right()}
          <Clipboard bind:value={acc_id} embedded {children} />
        {/snippet}
      </Input>
    </Label>
    <Label class="space-y-2 font-medium">
      <div>API key:</div>
      <Input bind:value={api_key} readonly disabled>
        {#snippet right()}
          <Clipboard bind:value={api_key} embedded {children} />
        {/snippet}
      </Input>
    </Label>
    <Label class="space-y-2 font-medium">
      <div>Role ARN:</div>
      <Input bind:value={role_arn} readonly disabled>
        {#snippet right()}
          <Clipboard bind:value={role_arn} embedded {children} />
        {/snippet}
      </Input>
    </Label>

    <div class="flex gap-4">
      <Button color="alternative">Cancel</Button>
      <Button type="submit">Next step</Button>
    </div>
  </form>
</Card>

	<script lang="ts">
  import { Clipboard, Textarea } from "flowbite-svelte";
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let value = $state("");
  let success = $state(false);
</script>

<Textarea id="textarea-id" placeholder="Your message" rows={4} name="message" bind:value class="w-full">
  {#snippet addon()}
    {#if value.length > 0}
      <Clipboard color={success ? "alternative" : "light"} bind:value bind:success size="sm" class="absolute end-2 top-2 h-8 w-32 px-2.5 font-medium focus:ring-0">
        {#if success}
          <CheckOutline class="h-3 w-3" /> Copied
        {:else}
          <ClipboardCleanSolid class="h-3 w-3" /> Copy text
        {/if}
      </Clipboard>
    {/if}
  {/snippet}
</Textarea>

	<script lang="ts">
  import { Card, Clipboard, Tooltip } from 'svelte-5-ui-lib';
  import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";

  let value = $state("");

  function onclick(ev: MouseEvent): void {
    const target = ev.target as HTMLElement;
    const codeBlock = target.ownerDocument.querySelector("#contact-details");
    if (codeBlock) {
      value = codeBlock.textContent || "";
    }
  }
</script>

<Card class="relative p-5">
  <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Contact details</h2>
  <address class="relative grid grid-cols-2 rounded-lg border border-gray-200 bg-gray-50 p-4 not-italic dark:border-gray-600 dark:bg-gray-700">
    <div class="hidden space-y-2 leading-loose text-gray-500 sm:block dark:text-gray-400">
      Name <br />
      Email
      <br />
      Phone Number
    </div>
    <div id="contact-details" class="space-y-2 leading-loose font-medium text-gray-900 dark:text-white">
      Bonnie Green <br />
      name@flowbite.com
      <br />
      + 12 345 67890
    </div>
  </address>
  <Clipboard {onclick} bind:value embedded class="absolute end-2 top-2 h-8 px-2.5 font-medium focus:ring-0">
    {#snippet children(success)}
      <Tooltip isOpen={success}>{success ? "Copied" : "Copy to clipboard"}</Tooltip>
      {#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
    {/snippet}
  </Clipboard>
</Card>

	<script>
  import { Clipboard, Input, Tooltip, Modal, Button, Label } from 'svelte-5-ui-lib';
  import { CheckOutline, ClipboardCleanSolid, ShareNodesOutline } from "flowbite-svelte-icons";

  let value = $state("npm install flowbite-svelte");
  let copyModal = $state(false);
</script>

<Button color="alternative" onclick={() => (copyModal = true)}><ShareNodesOutline class="me-2" /> Share course</Button>

<Modal title="Share course" bind:open={copyModal} autoclose class="divide-y-0" classes={{ header: "text-lg text-gray-500 dark:text-gray-400", footer: "px-5 pb-5" }}>
  <Label for="course-url" class="mb-2 block text-sm font-medium">Share the course link below with your friends:</Label>

  <Input bind:value id="course-url">
    {#snippet right()}
      <Clipboard bind:value embedded>
        {#snippet children(success)}
          <Tooltip isOpen={success}>{success ? "Copied" : "Copy to clipboard"}</Tooltip>
          {#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
        {/snippet}
      </Clipboard>
    {/snippet}
  </Input>
  {#snippet footer()}
    <Button onclick={() => (copyModal = false)}>Close</Button>
  {/snippet}
</Modal>