Photo and Icon components (#37)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-03 18:29:16 -04:00
parent 732aa92a8c
commit a453a84231
9 changed files with 243 additions and 2 deletions
@@ -0,0 +1,21 @@
+import type { LucideIcon } from 'lucide-react'
+import styles from './Icon.module.css'
+
+export type IconSize = 'nav' | 'inline'
+
+export type IconProps = {
+  // A lucide-react icon component, e.g. `import { House } from 'lucide-react'`.
+  icon: LucideIcon
+  // nav = 22 px (bottom bar, sidebar); inline = 16 px (beside text).
+  size?: IconSize
+  // Accessible name. Without one the icon is decorative and hidden.
+  label?: string
+  className?: string
+}
+
+// Lucide icon at the handoff's stroke width 2.75, sized by the stylesheet.
+export function Icon({ icon: LucideGlyph, size = 'inline', label, className }: IconProps) {
+  const classes = [styles.icon, styles[size], className].filter(Boolean).join(' ')
+  const a11y = label === undefined ? { 'aria-hidden': true } : { role: 'img', 'aria-label': label }
+  return <LucideGlyph strokeWidth={2.75} className={classes} {...a11y} />
+}