Card

---
import { Button } from "@/components/starwind/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/starwind/card";
import { Input } from "@/components/starwind/input";
import { Label } from "@/components/starwind/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/starwind/select";
---

<Card class="w-[360px]">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <form id="create-project-form">
    <CardContent class="flex flex-col gap-4">
      <div class="flex w-full flex-col gap-2">
        <Label for="create-project-name">Name</Label>
        <Input
          type="text"
          id="create-project-name"
          name="name"
          placeholder="Name of your project"
          required
        />
      </div>
      <div class="flex w-full flex-col gap-2">
        <Label for="create-project-framework">Framework</Label>
        <Select name="framework" required>
          <SelectTrigger id="create-project-framework" class="w-full">
            <SelectValue placeholder="Select" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Frameworks</SelectLabel>
              <SelectItem value="astro">Astro</SelectItem>
              <SelectItem value="next">Next.js</SelectItem>
              <SelectItem value="svelte">SvelteKit</SelectItem>
              <SelectItem value="solid">SolidStart</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </CardContent>
    <CardFooter class="mt-6 flex justify-between">
      <Button type="button" variant="outline">Cancel</Button>
      <Button type="submit">Deploy</Button>
    </CardFooter>
  </form>
</Card>

<script>
  const setupForm = () => {
    const form = document.getElementById("create-project-form") as HTMLFormElement;
    if (!form) return;

    form.addEventListener("submit", (e) => {
      e.preventDefault();

      console.log(
        "Form submission data:",
        Object.fromEntries(new FormData(form).entries()),
      );
    });
  };

  setupForm();

  document.addEventListener("astro:after-swap", setupForm);
</script>

---
import { Button } from "@/components/starwind/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/starwind/card";
---

<Card size="sm" class="mx-auto w-full max-w-sm">
  <CardHeader>
    <CardTitle>Small Card</CardTitle>
    <CardDescription>This card uses the small size variant.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>
      The card component supports a size prop that can be set to "sm" for a more compact
      appearance.
    </p>
  </CardContent>
  <CardFooter>
    <Button variant="outline" size="sm" class="w-full">Action</Button>
  </CardFooter>
</Card>

---
import { Button } from "@/components/starwind/button";
import { Badge } from "@/components/starwind/badge";
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/starwind/card";
---

<Card class="relative mx-auto w-full max-w-sm">
  <img
    src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&h=400&fit=crop"
    alt="Event cover"
    class="aspect-video w-full object-cover"
  />
  <CardHeader>
    <CardAction>
      <Badge size="sm" variant="primary">Featured</Badge>
    </CardAction>
    <CardTitle>Design systems meetup</CardTitle>
    <CardDescription>
      A practical talk on component APIs, accessibility, and shipping faster.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <Button class="w-full">View Event</Button>
  </CardFooter>
</Card>