RefChildThumbs

The four /ref/ hub child thumbnails side by side — MmRefThumb, ManualsThumb, MetadocThumb, WebSynthThumb — for checking glyph legibility and frame parity at row and hero sizes.

Media & Icons

Icon row (96px)

Icon row, md and up (120px)

Hero (400px)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Gallery story for the four /ref/ hub child thumbs (epic #2252) — the three // new glyphs plus the reused ManualsThumb, shown together at the two sizes the // hub actually renders them: the icon row (96px, 120px from md) and the hero. // Sibling of static-page-thumbs.stories.tsx, which does the same for the older // glyph-cutout family. import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ManualsThumb from './manuals-thumb'; import MetadocThumb from './metadoc-thumb'; import MmRefThumb from './mm-ref-thumb'; import WebSynthThumb from './web-synth-thumb'; const meta: StoryMeta = { title: 'RefChildThumbs', category: 'Media & Icons', description: 'The four /ref/ hub child thumbnails side by side — MmRefThumb, ManualsThumb, MetadocThumb, WebSynthThumb — for checking glyph legibility and frame parity at row and hero sizes.', usage: `import MmRefThumb from '@/components/shared/mm-ref-thumb';\nimport MetadocThumb from '@/components/shared/metadoc-thumb';\nimport WebSynthThumb from '@/components/shared/web-synth-thumb';\n\n<div className="w-[96px]"><MmRefThumb /></div>`, }; export default meta; const Cell = ({ label, widthClass, children, }: { label: string; widthClass: string; children: ComponentChildren; }) => ( <div className={widthClass}> <p className="text-muted text-xs pb-vgap-2xs text-center">{label}</p> {children} </div> ); const Row = ({ widthClass }: { widthClass: string }) => ( <div className="flex flex-wrap items-end gap-hgap-md"> <Cell label="MmRefThumb" widthClass={widthClass}> <MmRefThumb /> </Cell> <Cell label="ManualsThumb" widthClass={widthClass}> <ManualsThumb /> </Cell> <Cell label="MetadocThumb" widthClass={widthClass}> <MetadocThumb /> </Cell> <Cell label="WebSynthThumb" widthClass={widthClass}> <WebSynthThumb /> </Cell> </div> ); export const IconRowSize = defineStory({ name: 'Icon row (96px)', render: () => <Row widthClass="w-[96px]" />, }); export const IconRowSizeMd = defineStory({ name: 'Icon row, md and up (120px)', render: () => <Row widthClass="w-[120px]" />, }); export const HeroSize = defineStory({ name: 'Hero (400px)', render: () => <Row widthClass="w-[400px]" />, });