Progress Card
Carte affichant les metriques de progression et le statut. Installez Progress Card depuis le registre VLLNT UI avec la CLI shadcn.
Carte affichant les metriques de progression et le statut. Fait partie de la famille data dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Progress Card a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/progress-card.jsonSource
"use client";
import { memo, useEffect, useState } from "react";
import type { ReactNode } from "react";
import { useMounted } from "../../lib/use-mounted";
import { Badge } from "../badge/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "../card/card";
export type ContentCardProgress = {
completedCount: number;
totalSections: number;
};
export type ContentCardProps = {
/** Badge label for difficulty/category */
badgeLabel: string;
/** Badge variant */
badgeVariant?: "default" | "destructive" | "outline" | "secondary";
/** Card description */
description: string;
/** Function to get progress from storage */
getProgress?: () => ContentCardProgress | null;
/** Href for the card link */
href: string;
/** Link component to use (e.g., Next.js Link) */
linkComponent?: React.ComponentType<{
children: ReactNode;
className?: string;
href: string;
}>;
/** Metadata items (e.g., "30 min", "10 sections") */
metadata?: string[];
/** Progress completed label (e.g., "completed") */
progressLabel?: string;
/** Tags to display */
tags?: string[];
/** Card title */
title: string;
};
function DefaultLink({
children,
className,
href,
}: {
children: ReactNode;
className?: string;
href: string;
}): React.ReactNode {
return (
<a className={className} href={href}>
{children}
</a>
);
}
const EMPTY_PROGRESS_CARD_LIST: string[] = [];
function ContentCardImpl({
badgeLabel,
badgeVariant = "default",
description,
getProgress,
href,
linkComponent: LinkComponent = DefaultLink,
metadata = EMPTY_PROGRESS_CARD_LIST,
progressLabel = "completed",
tags = EMPTY_PROGRESS_CARD_LIST,
title,
}: ContentCardProps): React.ReactNode {
const [progress, setProgress] = useState<ContentCardProgress | null>(null);
const isHydrated = useMounted();
// Load progress after hydration
useEffect(() => {
if (getProgress) {
const result = getProgress();
requestAnimationFrame(() => {
setProgress(result);
});
}
}, [getProgress]);
const showProgress = isHydrated && progress && progress.completedCount > 0;
return (
<LinkComponent className="block h-full" href={href}>
<Card className="h-full flex flex-col hover:shadow-lg transition-shadow cursor-pointer">
<CardHeader>
{/* Badge and progress */}
<div className="flex items-center gap-2 mb-2">
<Badge className="text-xs capitalize" variant={badgeVariant}>
{badgeLabel}
</Badge>
{showProgress ? (
<span className="text-xs text-muted-foreground">
{progress.completedCount}/{progress.totalSections}{" "}
{progressLabel}
</span>
) : null}
</div>
<CardTitle className="line-clamp-2 text-lg">{title}</CardTitle>
<CardDescription className="line-clamp-3">
{description}
</CardDescription>
</CardHeader>
<CardContent className="mt-auto space-y-2">
{/* Metadata */}
{metadata.length > 0 ? (
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
{metadata.map((item, index) => (
<span key={item}>
{index > 0 ? <span className="mr-2">•</span> : null}
{item}
</span>
))}
</div>
) : null}
{/* Tags */}
{tags.length > 0 ? (
<div className="flex flex-wrap gap-1">
{tags.map((tag) => (
<Badge className="text-xs" key={tag} variant="outline">
{tag}
</Badge>
))}
</div>
) : null}
</CardContent>
</Card>
</LinkComponent>
);
}
export const ContentCard = memo(ContentCardImpl);
ContentCard.displayName = "ContentCard";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.