Card

	<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import * as Select from "$lib/components/ui/select/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit"
    },
    {
      value: "next",
      label: "Next.js"
    },
    {
      value: "astro",
      label: "Astro"
    },
    {
      value: "nuxt",
      label: "Nuxt.js"
    }
  ];
 
  let framework = $state("");
 
  const selectedFramework = $derived(
    frameworks.find((f) => f.value === framework)?.label ?? "Select a framework"
  );
</script>
 
<Card.Root class="w-[350px]">
  <Card.Header>
    <Card.Title>Create project</Card.Title>
    <Card.Description>Deploy your new project in one-click.</Card.Description>
  </Card.Header>
  <Card.Content>
    <form>
      <div class="grid w-full items-center gap-4">
        <div class="flex flex-col space-y-1.5">
          <Label for="name">Name</Label>
          <Input id="name" placeholder="Name of your project" />
        </div>
        <div class="flex flex-col space-y-1.5">
          <Label for="framework">Framework</Label>
          <Select.Root type="single" bind:value={framework}>
            <Select.Trigger id="framework">
              {selectedFramework}
            </Select.Trigger>
            <Select.Content>
              {#each frameworks as { value, label } (value)}
                <Select.Item {value} {label} />
              {/each}
            </Select.Content>
          </Select.Root>
        </div>
      </div>
    </form>
  </Card.Content>
  <Card.Footer class="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </Card.Footer>
</Card.Root>

	<script lang="ts">
  import BellRingIcon from "@lucide/svelte/icons/bell-ring";
  import CheckIcon from "@lucide/svelte/icons/check";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
 
  const notifications = [
    {
      title: "Your call has been confirmed.",
      description: "1 hour ago"
    },
    {
      title: "You have a new message!",
      description: "1 hour ago"
    },
    {
      title: "Your subscription is expiring soon!",
      description: "2 hours ago"
    }
  ];
</script>
 
<Card.Root class="w-[380px]">
  <Card.Header>
    <Card.Title>Notifications</Card.Title>
    <Card.Description>You have 3 unread messages.</Card.Description>
  </Card.Header>
  <Card.Content class="grid gap-4">
    <div class=" flex items-center space-x-4 rounded-md border p-4">
      <BellRingIcon />
      <div class="flex-1 space-y-1">
        <p class="text-sm font-medium leading-none">Push Notifications</p>
        <p class="text-muted-foreground text-sm">
          Send notifications to device.
        </p>
      </div>
      <Switch />
    </div>
    <div>
      {#each notifications as notification, idx (idx)}
        <div
          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
        >
          <span class="flex size-2 translate-y-1 rounded-full bg-sky-500"
          ></span>
          <div class="space-y-1">
            <p class="text-sm font-medium leading-none">
              {notification.title}
            </p>
            <p class="text-muted-foreground text-sm">
              {notification.description}
            </p>
          </div>
        </div>
      {/each}
    </div>
  </Card.Content>
  <Card.Footer>
    <Button class="w-full">
      <CheckIcon class="mr-2 size-4" /> Mark all as read
    </Button>
  </Card.Footer>
</Card.Root>