Spaces:
Build error
Build error
File size: 1,435 Bytes
78dd858 021b245 78dd858 4002561 78dd858 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | interface Props {
/** Label displayed below the icon */
label: string
/** Emoji or text character used as the icon glyph */
glyph: string
/** Click handler */
onClick?: () => void
/** If true, renders in selected/highlighted state */
selected?: boolean
/** Extra CSS classes */
className?: string
}
export default function RetroIcon({
label,
glyph,
onClick,
selected = false,
className = '',
}: Props) {
return (
<button
type="button"
onClick={onClick}
aria-label={label}
className={`
flex flex-col items-center gap-1
p-2 w-[80px]
cursor-pointer select-none
${className}
`}
>
{/* Icon box */}
<div
className={`
w-[48px] h-[48px]
flex items-center justify-center
border border-retro-black
text-[24px] leading-none
${selected
? 'bg-retro-black text-retro-white'
: 'bg-retro-white text-retro-black hover:bg-retro-light'
}
shadow-retro-outset
`}
>
{glyph}
</div>
{/* Label */}
<span
className={`
text-retro-xs text-center leading-tight
max-w-full break-words
${selected
? 'bg-retro-select text-retro-select-text px-1'
: 'text-retro-black'
}
`}
>
{label}
</span>
</button>
)
}
|