Card de inicio

import { Button } from "@moodinary/ui/components/button";
import {
	Card,
	CardAction,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@moodinary/ui/components/card";
import { TrendingUpIcon } from "@moodinary/ui/components/icons";

export default function DashboardCardPattern() {
	return (
		<Card className="w-full max-w-sm">
			<CardHeader>
				<CardTitle>Clima de 4.º A</CardTitle>
				<CardDescription>Últimos 30 días</CardDescription>
				<CardAction>
					<Button size="sm" variant="ghost">
						Ver detalle
					</Button>
				</CardAction>
			</CardHeader>
			<CardContent>
				<div className="flex items-baseline gap-2">
					<span className="font-medium text-4xl text-ink tabular-nums">
						3,8
					</span>
					<span className="flex items-center gap-1 text-ok text-xs">
						<TrendingUpIcon className="size-3.5" />
						0,3 más que el mes pasado
					</span>
				</div>
				<div aria-hidden className="mt-4 flex h-2 overflow-hidden rounded-full">
					{[6, 10, 22, 38, 24].map((w, i) => (
						<span
							key={w}
							style={{ background: `var(--m${i + 1})`, width: `${w}%` }}
						/>
					))}
				</div>
			</CardContent>
			<CardFooter className="text-ink-3 text-xs">42 pulsos anónimos</CardFooter>
		</Card>
	);
}