Card

import { Button } from "@/components/vip-ui/button";import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/components/vip-ui/card";export function CardBasicDemo() {  return (    <Card className="w-full max-w-sm">      <CardHeader>        <CardTitle>Website refresh</CardTitle>        <CardDescription>Due October 18</CardDescription>      </CardHeader>      <CardContent>        <p className="text-sm leading-6">          Three of five tasks are complete. Review the homepage draft next.        </p>      </CardContent>      <CardFooter>        <Button size="sm">Open project</Button>      </CardFooter>    </Card>  );}

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import {  Card,  CardAction,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from "@/components/vip-ui/card";const notifications = [  { id: "review", text: "Amina Shah asked you to review the homepage." },  { id: "comment", text: "Leo Park commented on the pricing draft." },  { id: "upload", text: "Maya Chen added four images." },];export function CardActionDemo() {  const [isRead, setRead] = useState(false);  return (    <Card className="w-full max-w-sm">      <CardHeader>        <CardTitle>Notifications</CardTitle>        <CardDescription>          {isRead ? "No unread messages" : "3 unread messages"}        </CardDescription>        <CardAction>          <Button            variant="secondary"            size="sm"            isDisabled={isRead}            onPress={() => setRead(true)}          >            Mark as read          </Button>        </CardAction>      </CardHeader>      <CardContent>        <ul className="grid gap-3">          {notifications.map((notification) => (            <li key={notification.id} className="flex gap-3 text-sm leading-6">              <span                aria-hidden="true"                className={                  isRead                    ? "mt-2.5 size-1.5 shrink-0 rounded-full bg-border"                    : "mt-2.5 size-1.5 shrink-0 rounded-full bg-primary"                }              />              {notification.text}            </li>          ))}        </ul>      </CardContent>    </Card>  );}

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/components/vip-ui/card";import { Form } from "@/components/vip-ui/form";import { TextField } from "@/components/vip-ui/text-field";export function CardDemo() {  const [name, setName] = useState("Studio North");  const [savedName, setSavedName] = useState("Studio North");  return (    <Card className="w-full max-w-md">      <CardHeader>        <CardTitle>{savedName}</CardTitle>        <CardDescription>Website refresh · Due October 18</CardDescription>      </CardHeader>      <Form        className="gap-0"        onSubmit={(event) => {          event.preventDefault();          const next = name.trim();          if (!next) return;          setSavedName(next);        }}      >        <CardContent>          <TextField            label="Project name"            name="project-name"            value={name}            onChange={setName}            isRequired            validate={(value) =>              value.trim() ? null : "Enter a project name."            }          />        </CardContent>        <CardFooter>          <Button type="submit" size="sm">            Save changes          </Button>        </CardFooter>      </Form>    </Card>  );}

import { Badge } from "@/components/vip-ui/badge";import {  Card,  CardDescription,  CardFooter,  CardHeader,  CardMedia,  CardTitle,} from "@/components/vip-ui/card";const bars = [38, 52, 46, 64, 58, 72, 68, 84, 76, 92];export function CardMediaDemo() {  return (    <Card className="w-full max-w-sm">      <CardMedia className="aspect-[16/9] bg-[radial-gradient(120%_90%_at_100%_0%,var(--accent),transparent_60%),linear-gradient(var(--muted),var(--card))]">        <div          aria-hidden="true"          className="absolute inset-x-6 bottom-0 flex h-3/4 items-end gap-1.5"        >          {bars.map((height) => (            <span              key={height}              className="flex-1 rounded-t-sm bg-primary/80 even:bg-primary/40"              style={{ height: `${height}%` }}            />          ))}        </div>      </CardMedia>      <CardHeader>        <CardTitle>Quarterly growth report</CardTitle>        <CardDescription>          Revenue grew in nine of the last ten weeks.        </CardDescription>      </CardHeader>      <CardFooter className="pt-4">        <Badge variant="success" dot>          Published        </Badge>        <span className="text-xs text-muted-foreground">          Updated 2 days ago        </span>      </CardFooter>    </Card>  );}

"use client";import { BookOpenTextIcon, CodeIcon, PaletteIcon } from "@phosphor-icons/react";import {  Card,  CardDescription,  CardHeader,  CardLink,  CardTitle,} from "@/components/vip-ui/card";const guides = [  {    href: "/components/installation",    title: "Installation",    description: "Add the CLI and your first component.",    icon: BookOpenTextIcon,  },  {    href: "/themes",    title: "Themes",    description: "Change colors, radius, and fonts.",    icon: PaletteIcon,  },  {    href: "/components/react-aria",    title: "React Aria",    description: "Use the hooks and props under each part.",    icon: CodeIcon,  },];export function CardLinkDemo() {  return (    <div className="grid w-full max-w-2xl gap-3 sm:grid-cols-3">      {guides.map(({ href, title, description, icon: Icon }) => (        <Card key={href}>          <CardHeader>            <span              aria-hidden="true"              className="mb-2 grid size-9 place-items-center rounded-lg bg-muted text-foreground"            >              <Icon size={18} />            </span>            <CardTitle>              <CardLink href={href}>{title}</CardLink>            </CardTitle>            <CardDescription>{description}</CardDescription>          </CardHeader>        </Card>      ))}    </div>  );}