41e686c560
Full-stack Next.js 15 application with: - Landing page with marketing components (Hero, Testimonials, Pricing, FAQ) - Multi-step candidature form with API route - Stripe Checkout integration (subscription + webhooks) - Supabase Auth (login/register) with middleware protection - Dashboard with progress tracking and module system - Formations pages with completion tracking - Profile management with password change - Database schema with RLS policies - Resend email integration for transactional emails Stack: Next.js 15, TypeScript, Tailwind CSS v4, Supabase, Stripe, Resend https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
37 lines
969 B
TypeScript
37 lines
969 B
TypeScript
interface ProgressBarProps {
|
|
value: number; // 0-100
|
|
label?: string;
|
|
showPercentage?: boolean;
|
|
}
|
|
|
|
export default function ProgressBar({
|
|
value,
|
|
label,
|
|
showPercentage = true,
|
|
}: ProgressBarProps) {
|
|
const clampedValue = Math.min(100, Math.max(0, value));
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{(label || showPercentage) && (
|
|
<div className="flex items-center justify-between">
|
|
{label && (
|
|
<span className="text-white/60 text-sm">{label}</span>
|
|
)}
|
|
{showPercentage && (
|
|
<span className="text-white font-medium text-sm">
|
|
{Math.round(clampedValue)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="h-2 bg-dark-lighter rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full gradient-bg rounded-full transition-all duration-500 ease-out"
|
|
style={{ width: `${clampedValue}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|