January 2024 - New Components

<script lang="ts">
  import * as Card from "$lib/components/ui/card/index.js";
  import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
 
<Carousel.Root class="w-full max-w-[12rem] sm:max-w-xs">
  <Carousel.Content>
    {#each Array(5), i}
      <Carousel.Item>
        <div class="p-1">
          <Card.Root>
            <Card.Content
              class="flex aspect-square items-center justify-center p-6"
            >
              <span class="text-4xl font-semibold">{i + 1}</span>
            </Card.Content>
          </Card.Root>
        </div>
      </Carousel.Item>
    {/each}
  </Carousel.Content>
  <Carousel.Previous />
  <Carousel.Next />
</Carousel.Root>

<script lang="ts">
  import { toast } from "svelte-sonner";
  import * as Drawer from "$lib/components/ui/drawer/index.js";
  import * as Field from "$lib/components/ui/field/index.js";
  import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
  import { IsMobile } from "$lib/components/hooks/is-mobile.svelte.js";
  import { Badge } from "$lib/components/ui/badge/index.js";
  import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
 
  const deliveryTimes = [
    {
      value: "asap",
      id: "delivery-asap",
      label: "Standard delivery",
      description: "25–35 min · Driver assigned now",
      badge: "Fastest"
    },
    {
      value: "5-00",
      id: "delivery-5-00",
      label: "5:00 PM – 5:15 PM",
      description: "Prep starts at 4:45 PM"
    },
    {
      value: "5-30",
      id: "delivery-5-30",
      label: "5:30 PM – 5:45 PM",
      description: "Good if you're heading home"
    },
    {
      value: "6-00",
      id: "delivery-6-00",
      label: "6:00 PM – 6:15 PM",
      description: "Most popular · High demand"
    },
    {
      value: "6-30",
      id: "delivery-6-30",
      label: "6:30 PM – 6:45 PM",
      description: "Last slot before kitchen closes"
    }
  ];
 
  let open = $state(false);
  let deliveryTime = $state("asap");
  const isMobile = new IsMobile();
 
  function handleConfirm() {
    const selected = deliveryTimes.find((time) => time.value === deliveryTime);
 
    if (!selected) {
      return;
    }
 
    open = false;
    toast("Delivery time confirmed", {
      description: selected.label
    });
  }
</script>
 
<Drawer.Root bind:open direction={isMobile.current ? "bottom" : "right"}>
  <Drawer.Trigger class={buttonVariants({ variant: "secondary" })}
    >Open Drawer</Drawer.Trigger
  >
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Pick a delivery time</Drawer.Title>
      <Drawer.Description
        >We&apos;ll prepare your order as soon as possible.</Drawer.Description
      >
    </Drawer.Header>
    <div class="flex-1 overflow-y-auto p-4">
      <RadioGroup.Root bind:value={deliveryTime} class="gap-2">
        {#each deliveryTimes as time (time.value)}
          <Field.Label for={time.id}>
            <Field.Field orientation="horizontal">
              <Field.Content>
                <Field.Title class="flex items-center gap-2">
                  {time.label}
                  {#if time.badge}
                    <Badge variant="secondary">{time.badge}</Badge>
                  {/if}
                </Field.Title>
                <Field.Description>{time.description}</Field.Description>
              </Field.Content>
              <RadioGroup.Item value={time.value} id={time.id} />
            </Field.Field>
          </Field.Label>
        {/each}
      </RadioGroup.Root>
    </div>
    <Drawer.Footer>
      <Button onclick={handleConfirm} class="h-[34px]"
        >Confirm Delivery Time</Button
      >
      <Drawer.Close class={buttonVariants({ variant: "outline" })}
        >Cancel</Drawer.Close
      >
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

<script lang="ts">
  import { toast } from "svelte-sonner";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button
  variant="outline"
  onclick={() =>
    toast("Event has been created", {
      description: "Sunday, December 03, 2023 at 9:00 AM",
      action: {
        label: "Undo",
        onClick: () => console.info("Undo")
      }
    })}
>
  Show Toast
</Button>

<script lang="ts">
  import * as Pagination from "$lib/components/ui/pagination/index.js";
</script>
 
<Pagination.Root count={30} perPage={10} page={2}>
  {#snippet children({ pages, currentPage })}
    <Pagination.Content>
      <Pagination.Item>
        <Pagination.Previous />
      </Pagination.Item>
      {#each pages as page (page.key)}
        {#if page.type === "ellipsis"}
          <Pagination.Item>
            <Pagination.Ellipsis />
          </Pagination.Item>
        {:else}
          <Pagination.Item>
            <Pagination.Link {page} isActive={currentPage === page.value}>
              {page.value}
            </Pagination.Link>
          </Pagination.Item>
        {/if}
      {/each}
      <Pagination.Item>
        <Pagination.Ellipsis />
      </Pagination.Item>
      <Pagination.Item>
        <Pagination.Next />
      </Pagination.Item>
    </Pagination.Content>
  {/snippet}
</Pagination.Root>