Card

import { Droplets } from "lucide-react";
import { Badge } from "@/components/ui/badge/badge";
import { Button } from "@/components/ui/button/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardIcon,
  CardTitle,
} from "@/components/ui/card/card";
import styles from "./card-demo.module.css";

export default function CardDemo() {
  return (
    <Card className={styles.card}>
      <CardHeader>
        <div>
          <CardIcon>
            <Droplets />
          </CardIcon>
          <CardTitle>Brook</CardTitle>
        </div>

        <CardAction>
          <Badge size="sm" variant="secondary">
            New
          </Badge>
        </CardAction>

        <CardDescription>Defining a brook</CardDescription>
      </CardHeader>
      <CardContent>
        <p>A small, natural stream of fresh water flowing along a course towards a river, lake, or sea.</p>
      </CardContent>
      <CardFooter>
        <Button size="sm">Click me</Button>
      </CardFooter>
    </Card>
  );
}

"use client";

import { Button } from "@/components/ui/button/button";
import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card/card";
import styles from "./card-transaction.module.css";

const transactions = [
  {
    id: "ACME001",
    from: "Acme Corp.",
    date: "14:30, July 31, 2025",
    amount: "-$7894",
  },
  {
    id: "BROOK02",
    from: "Brook Inc.",
    date: "11:11, July 31, 2025",
    amount: "$4574",
  },
  {
    id: "GLOBEX3",
    from: "Globex Industries",
    date: "10:22, July 31, 2025",
    amount: "$27,440",
  },
  {
    id: "AWS0004",
    from: "AWS",
    date: "3:00, July 31, 2025",
    amount: "-$740",
  },
  {
    id: "ZENITH5",
    from: "Zenith Labs",
    date: "16:50, July 31, 2025",
    amount: "$14,019",
  },
];

export function CardTransaction() {
  return (
    <Card className={styles.card}>
      <CardHeader>
        <CardTitle className={styles.title}>Transactions</CardTitle>
        <CardAction>
          <Button size="sm" variant="ghost">
            View All
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        {transactions.map(({ id, from, date, amount }) => (
          <div className={styles.item} key={id}>
            <div className={styles.itemInfo}>
              <div className={styles.itemFrom}>{from}</div>
              <div className={styles.itemDate}>{date}</div>
            </div>
            <div className={styles.itemAmount}>{amount}</div>
          </div>
        ))}
      </CardContent>
    </Card>
  );
}

import { ArrowPointer, Button } from "@/components/ui/button/button";
import { Card, CardContent, CardDescription, CardFooter, CardImage, CardTitle } from "@/components/ui/card/card";
import styles from "./card-image-demo.module.css";

export function CardImageDemo() {
  return (
    <Card className={styles.card} variant="lift">
      <CardImage
        alt="Veiled woman gazing at architecture under the night sky"
        className={styles.cardImage}
        src="/scene_01.svg"
      />

      <CardContent>
        <CardTitle className={styles.title}>Threshold</CardTitle>

        <CardDescription>
          Between what we build and what eternally exists standing in quiet contemplation.
        </CardDescription>
      </CardContent>

      <CardFooter>
        <Button size="sm" variant="outline">
          Learn More
          <ArrowPointer />
        </Button>
      </CardFooter>
    </Card>
  );
}