Card

pnpm dlx shadcn@latest add @aura/card

export const WithFooter = () => (
  <Card>
    <CardHeader>
      <CardTitle>Project Setup</CardTitle>
      <CardDescription>Configure your project settings</CardDescription>
    </CardHeader>
    <CardContent>
      <p className="text-gray-12">
        Your project has been created successfully.
      </p>
    </CardContent>
    <CardFooter>
      <Button>Continue</Button>
    </CardFooter>
  </Card>
);

export const WithActions = () => (
  <Card>
    <CardHeader>
      <div className="flex items-start justify-between">
        <div className="flex flex-col gap-0.5">
          <CardTitle>Notifications</CardTitle>
          <CardDescription>You have 3 unread messages</CardDescription>
        </div>
        <CardAction>
          <Button variant="menu">Mark all read</Button>
        </CardAction>
      </div>
    </CardHeader>
    <CardContent>
      <div className="space-y-1">
        <p className="text-gray-12">New comment on your post</p>
        <p className="text-gray-11">2 minutes ago</p>
      </div>
    </CardContent>
  </Card>
);

export const SimpleCard = () => (
  <Card>
    <CardContent>
      <p className="text-gray-12">A simple card with just content.</p>
    </CardContent>
  </Card>
);

export const MultipleCards = () => (
  <div className="flex flex-col gap-1">
    <Card>
      <CardHeader>
        <CardTitle>First Card</CardTitle>
        <CardDescription>This is the first card</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-gray-12">Content for the first card.</p>
      </CardContent>
    </Card>
    <Card>
      <CardHeader>
        <CardTitle>Second Card</CardTitle>
        <CardDescription>This is the second card</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-gray-12">Content for the second card.</p>
      </CardContent>
    </Card>
    <Card>
      <CardHeader>
        <CardTitle>Third Card</CardTitle>
        <CardDescription>This is the third card</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-gray-12">Content for the third card.</p>
      </CardContent>
    </Card>
  </div>
);

export const NestedCards = () => (
  <Card>
    <CardHeader>
      <CardTitle>Parent Card</CardTitle>
      <CardDescription>This card contains nested cards</CardDescription>
    </CardHeader>
    <CardContent>
      <div className="flex flex-col gap-1">
        <Card className="bg-gray-3">
          <CardContent>
            <p className="text-gray-12">Nested card 1</p>
          </CardContent>
        </Card>
        <Card className="bg-gray-3">
          <CardContent>
            <p className="text-gray-12">Nested card 2</p>
          </CardContent>
        </Card>
      </div>
    </CardContent>
  </Card>
);

export const InteractiveCard = () => (
  <Card className="cursor-pointer hover:border-gray-8 transition-colors">
    <CardHeader>
      <CardTitle>Clickable Card</CardTitle>
      <CardDescription>Hover to see the effect</CardDescription>
    </CardHeader>
    <CardContent>
      <p className="text-gray-12">
        This card has hover states for interactive experiences.
      </p>
    </CardContent>
  </Card>
);

export const CardGrid = () => (
  <div className="grid grid-cols-3 gap-1">
    {Array.from({ length: 6 }).map((_, i) => (
      <Card key={i}>
        <CardHeader>
          <CardTitle>Card {i + 1}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-12">Grid item content</p>
        </CardContent>
      </Card>
    ))}
  </div>
);

export const WithImage = () => (
  <Card className="max-w-sm">
    <AspectRatio ratio={16 / 9}>
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        className="size-full object-cover"
      />
    </AspectRatio>
    <CardHeader>
      <CardTitle>Beautiful Landscape</CardTitle>
      <CardDescription>Captured in the mountains</CardDescription>
    </CardHeader>
    <CardContent>
      <p className="text-gray-12">
        A stunning view of nature's beauty captured at golden hour.
      </p>
    </CardContent>
    <CardFooter>
      <Button>View Details</Button>
    </CardFooter>
  </Card>
);

export const ImageGrid = () => (
  <div className="grid grid-cols-3 gap-1">
    {[
      {
        src: "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80",
        title: "Mountain View",
        description: "Scenic landscape",
      },
      {
        src: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&dpr=2&q=80",
        title: "Workspace",
        description: "Modern office setup",
      },
      {
        src: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&dpr=2&q=80",
        title: "Technology",
        description: "Digital innovation",
      },
    ].map((item, i) => (
      <Card key={i}>
        <AspectRatio ratio={4 / 3}>
          <img
            src={item.src}
            alt={item.title}
            className="size-full object-cover"
          />
        </AspectRatio>
        <CardHeader>
          <CardTitle>{item.title}</CardTitle>
          <CardDescription>{item.description}</CardDescription>
        </CardHeader>
      </Card>
    ))}
  </div>
);