| | | 1 | | import { useTheme } from "~/lib/theme"; |
| | | 2 | | import { nameHue } from "~/lib/colors"; |
| | | 3 | | |
| | 2 | 4 | | export function ItemThumb({ name }: { name: string }) { |
| | 2 | 5 | | const theme = useTheme(); |
| | 2 | 6 | | const hue = nameHue(name); |
| | 2 | 7 | | if (theme === "tui") { |
| | 0 | 8 | | return ( |
| | | 9 | | <div style={{ |
| | | 10 | | width: 28, height: 28, flexShrink: 0, |
| | | 11 | | border: "1px dashed var(--c-fg-3)", |
| | | 12 | | display: "grid", placeItems: "center", |
| | | 13 | | color: "var(--c-fg-3)", fontSize: 10, |
| | | 14 | | }}>##</div> |
| | | 15 | | ); |
| | | 16 | | } |
| | 2 | 17 | | if (theme === "win98") { |
| | 0 | 18 | | return ( |
| | | 19 | | <div style={{ |
| | | 20 | | width: 28, height: 28, flexShrink: 0, |
| | | 21 | | display: "grid", placeItems: "center", |
| | | 22 | | fontSize: 16, lineHeight: 1, |
| | | 23 | | }}>📄</div> |
| | | 24 | | ); |
| | | 25 | | } |
| | 2 | 26 | | if (theme === "cde") { |
| | 0 | 27 | | return ( |
| | | 28 | | <div style={{ |
| | | 29 | | width: 24, height: 24, flexShrink: 0, |
| | | 30 | | background: "#dcdad5", |
| | | 31 | | boxShadow: "inset -1px -1px 0 #cbd1dc, inset 1px 1px 0 #5b6878", |
| | | 32 | | display: "grid", placeItems: "center", |
| | | 33 | | fontSize: 13, lineHeight: 1, |
| | | 34 | | }}>▣</div> |
| | | 35 | | ); |
| | | 36 | | } |
| | 2 | 37 | | return ( |
| | | 38 | | <div style={{ |
| | | 39 | | width: 28, height: 28, borderRadius: 6, flexShrink: 0, |
| | | 40 | | background: `linear-gradient(135deg, oklch(0.85 0.05 ${hue}), oklch(0.70 0.07 ${(hue + 40) % 360}))`, |
| | | 41 | | border: "1px solid var(--c-border)", |
| | | 42 | | }} /> |
| | | 43 | | ); |
| | | 44 | | } |