| 1 | // font-step/components/CurrentFontDisplay.tsx |
| 2 | import { Plus } from "lucide-react"; |
| 3 | |
| 4 | interface CurrentFontDisplayProps { |
| 5 | headingFont: string; |
| 6 | bodyFont: string; |
| 7 | showCustom: boolean; |
| 8 | onToggleCustom: () => void; |
| 9 | } |
| 10 | |
| 11 | export function CurrentFontDisplay({ |
| 12 | headingFont, |
| 13 | bodyFont, |
| 14 | onToggleCustom, |
| 15 | }: CurrentFontDisplayProps) { |
| 16 | return ( |
| 17 | <div className="space-y-3"> |
| 18 | <span className="text-xs font-semibold text-muted-foreground uppercase"> |
| 19 | Current Font |
| 20 | </span> |
| 21 | <div className="flex items-center justify-between rounded-lg border p-3"> |
| 22 | <div className="space-y-1"> |
| 23 | <div className="text-sm font-semibold text-foreground"> |
| 24 | {headingFont || "—"} |
| 25 | </div> |
| 26 | <div className="text-xs text-muted-foreground">{bodyFont || "—"}</div> |
| 27 | </div> |
| 28 | <button |
| 29 | type="button" |
| 30 | onClick={onToggleCustom} |
| 31 | className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90" |
| 32 | > |
| 33 | <Plus className="size-3.5" /> |
| 34 | Create New Pair |
| 35 | </button> |
| 36 | </div> |
| 37 | </div> |
| 38 | ); |
| 39 | } |
| 40 |