File size: 1,514 Bytes
bf00623 3739893 bf00623 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import { cn } from '@/lib/utils';
type Props = {
step: number;
totalSteps: number;
title: string;
tip: string;
label?: string;
optional?: boolean;
};
export function PromptCard({ step, totalSteps, title, tip, label = 'Clip', optional }: Props) {
const visibleTip = optional ? tip.replace(/^Optional\s*:\s*/i, '') : tip;
return (
<div
className={cn(
'rounded-[22px] border bg-[rgba(20,18,14,0.78)] px-5 py-[18px] backdrop-blur-md',
optional ? 'border-sage/45 shadow-[0_0_0_1px_rgba(188,211,174,0.16)]' : 'border-white/10',
)}
>
<div className="mb-2.5 flex items-center justify-between gap-3">
<div className="text-eyebrow text-sage">
{label} {String(step).padStart(2, '0')} of {String(totalSteps).padStart(2, '0')}
</div>
{optional ? (
<div className="rounded-full bg-sage px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.18em] text-matcha-deep">
Optional
</div>
) : null}
</div>
<div className="font-serif text-[22px] leading-[1.2] text-white">
{title}
</div>
{optional ? (
<div className="mt-3 rounded-2xl border border-sage/20 bg-sage/10 px-3 py-2 text-xs font-semibold leading-[1.35] text-sage">
Record this only if you want. You can skip it.
</div>
) : null}
{visibleTip ? (
<div className="mt-2 text-xs leading-[1.4] text-white/60">{visibleTip}</div>
) : null}
</div>
);
}
|