Card

import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

export default function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>iCloud+</CardTitle>
        <CardDescription>200 GB plan, shared with your family</CardDescription>
        <CardAction>
          <Button variant="secondary" size="sm">Manage…</Button>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-2">
        <Progress value={64} />
        <div className="flex justify-between text-mac-subheadline text-mac-label-secondary">
          <span>128,4 GB used</span>
          <span>71,6 GB free</span>
        </div>
      </CardContent>
      <CardFooter className="justify-end">
        <Button size="sm">Upgrade</Button>
      </CardFooter>
    </Card>
  )
}