| 1 | import { cn } from "@/lib/utils"; |
| 2 | import { Check } from "lucide-react"; |
| 3 | import { useImageLoaded } from "../utils/useImageLoaded"; |
| 4 | |
| 5 | import { Button } from "@/components/ui/button"; |
| 6 | import { type Font } from "../types"; |
| 7 | import { getSpriteNumber } from "../utils/utils"; |
| 8 | |
| 9 | export const FontListItem = ({ |
| 10 | font, |
| 11 | isCurrent, |
| 12 | onSelect, |
| 13 | fontIndex, |
| 14 | }: { |
| 15 | font: Font; |
| 16 | isCurrent: boolean; |
| 17 | onSelect: () => void; |
| 18 | fontIndex: number; |
| 19 | }) => { |
| 20 | const spriteNumber = getSpriteNumber(fontIndex); |
| 21 | const isSpriteLoaded = useImageLoaded( |
| 22 | `/font-preview/sprite.${spriteNumber}.svg`, |
| 23 | ); |
| 24 | |
| 25 | return ( |
| 26 | <Button |
| 27 | key={font.sane} |
| 28 | variant={isCurrent ? "secondary" : "ghost"} |
| 29 | className="h-auto w-full justify-start p-2" |
| 30 | onClick={onSelect} |
| 31 | > |
| 32 | <div |
| 33 | className={cn( |
| 34 | "flex w-full items-center rounded-sm px-1 py-2 transition-colors", |
| 35 | isCurrent && "bg-accent", |
| 36 | )} |
| 37 | > |
| 38 | {isSpriteLoaded ? ( |
| 39 | <div |
| 40 | className={`font-preview-${font.sane} w-full`} |
| 41 | title={font.name} |
| 42 | /> |
| 43 | ) : ( |
| 44 | <span>{font.name}</span> |
| 45 | )} |
| 46 | {isCurrent && <Check className="ml-auto h-4 w-4" />} |
| 47 | </div> |
| 48 | </Button> |
| 49 | ); |
| 50 | }; |
| 51 |