| 1 | // font-step/components/CustomFontCreator.tsx |
| 2 | import { Save } from "lucide-react"; |
| 3 | |
| 4 | import { Button } from "@/components/ui/button"; |
| 5 | import { FontPickerField } from "./FontPickerField"; |
| 6 | import { type FontStepProps, type LocalFont } from "./types"; |
| 7 | |
| 8 | interface CustomFontCreatorProps extends FontStepProps { |
| 9 | isUploadingHeading: boolean; |
| 10 | isUploadingBody: boolean; |
| 11 | isSaving: boolean; |
| 12 | onUploadHeading: () => void; |
| 13 | onUploadBody: () => void; |
| 14 | onSave: () => void; |
| 15 | onCancel: () => void; |
| 16 | getLocalCustomFonts: (target: "heading" | "body") => LocalFont[]; |
| 17 | currentHeadingFont: string; |
| 18 | currentBodyFont: string; |
| 19 | } |
| 20 | |
| 21 | export function CustomFontCreator({ |
| 22 | control, |
| 23 | setValue, |
| 24 | isUploadingHeading, |
| 25 | isUploadingBody, |
| 26 | isSaving, |
| 27 | onUploadHeading, |
| 28 | onUploadBody, |
| 29 | onSave, |
| 30 | onCancel, |
| 31 | getLocalCustomFonts, |
| 32 | currentHeadingFont, |
| 33 | currentBodyFont, |
| 34 | }: CustomFontCreatorProps) { |
| 35 | return ( |
| 36 | <> |
| 37 | <div className="space-y-4 rounded-lg border bg-muted/30 p-4"> |
| 38 | <FontPickerField |
| 39 | label="Heading Font" |
| 40 | target="heading" |
| 41 | control={control} |
| 42 | setValue={setValue} |
| 43 | isUploading={isUploadingHeading} |
| 44 | onUpload={onUploadHeading} |
| 45 | getLocalCustomFonts={() => getLocalCustomFonts("heading")} |
| 46 | /> |
| 47 | |
| 48 | <FontPickerField |
| 49 | label="Body Font" |
| 50 | target="body" |
| 51 | control={control} |
| 52 | setValue={setValue} |
| 53 | isUploading={isUploadingBody} |
| 54 | onUpload={onUploadBody} |
| 55 | getLocalCustomFonts={() => getLocalCustomFonts("body")} |
| 56 | /> |
| 57 | </div> |
| 58 | |
| 59 | <div className="flex justify-between"> |
| 60 | <Button |
| 61 | onClick={onCancel} |
| 62 | className="flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90 disabled:opacity-50" |
| 63 | > |
| 64 | Cancel |
| 65 | </Button> |
| 66 | |
| 67 | <Button |
| 68 | onClick={onSave} |
| 69 | disabled={isSaving || !currentHeadingFont || !currentBodyFont} |
| 70 | className="flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90 disabled:opacity-50" |
| 71 | > |
| 72 | <Save className="size-4" /> |
| 73 | {isSaving ? "Saving..." : "Save Font Pair"} |
| 74 | </Button> |
| 75 | </div> |
| 76 | </> |
| 77 | ); |
| 78 | } |
| 79 |