| 1 | import { cn } from "@/lib/utils"; |
| 2 | import { Check } from "lucide-react"; |
| 3 | import { type Font } from "../types"; |
| 4 | import { useImageLoaded } from "../utils/useImageLoaded"; |
| 5 | import { getSpriteNumber } from "../utils/utils"; |
| 6 | |
| 7 | export const FontItem = ({ |
| 8 | font, |
| 9 | isCurrent, |
| 10 | fontIndex, |
| 11 | }: { |
| 12 | font: Font; |
| 13 | isCurrent: boolean; |
| 14 | fontIndex: number; |
| 15 | }) => { |
| 16 | const spriteNumber = getSpriteNumber(fontIndex); |
| 17 | |
| 18 | const isSpriteLoaded = useImageLoaded( |
| 19 | `/font-preview/sprite.${spriteNumber}.svg`, |
| 20 | ); |
| 21 | |
| 22 | return ( |
| 23 | <div |
| 24 | className={cn( |
| 25 | "flex w-full items-center rounded-sm px-1 py-2 transition-colors", |
| 26 | isCurrent && "bg-accent", |
| 27 | )} |
| 28 | > |
| 29 | {isSpriteLoaded ? ( |
| 30 | <div |
| 31 | className={cn(`font-preview-${font.sane} w-full`, "dark:invert")} |
| 32 | title={font.name} |
| 33 | /> |
| 34 | ) : ( |
| 35 | <span>{font.name}</span> |
| 36 | )} |
| 37 | {isCurrent && <Check className="ml-auto h-4 w-4" />} |
| 38 | </div> |
| 39 | ); |
| 40 | }; |
| 41 |