MmRefThumb

MetaModule Module Reference thumbnail: a Eurorack module panel with a magnifier floating over its right edge, in the shared static-page thumb frame.

Media & Icons

Default

List row (96px)

Hero (400px)

Size comparison

Frame parity with ManualsThumb

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for MmRefThumb — one of the three /ref/ child thumbs (epic #2252). // The two sizes that matter are the hub's list row (96px, 120px from md) and // the hero rendering (~400px); both get their own variant so the glyph's // small-size legibility is checkable at a glance. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ManualsThumb from './manuals-thumb'; import MmRefThumb from './mm-ref-thumb'; const meta: StoryMeta = { title: 'MmRefThumb', category: 'Media & Icons', description: 'MetaModule Module Reference thumbnail: a Eurorack module panel with a magnifier floating over its right edge, in the shared static-page thumb frame.', usage: `import MmRefThumb from '@/components/shared/mm-ref-thumb';\n\n<div className="w-[96px]"><MmRefThumb /></div>`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => ( <div className="w-[200px]"> <MmRefThumb /> </div> ), }); export const ListRow = defineStory({ name: 'List row (96px)', render: () => ( <div className="w-[96px]"> <MmRefThumb /> </div> ), }); export const Hero = defineStory({ name: 'Hero (400px)', render: () => ( <div className="w-[400px]"> <MmRefThumb /> </div> ), }); export const SizeComparison = defineStory({ name: 'Size comparison', render: () => ( <div className="flex flex-wrap items-end gap-hgap-md"> <div className="w-[96px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">96px</p> <MmRefThumb /> </div> <div className="w-[120px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">120px</p> <MmRefThumb /> </div> <div className="w-[200px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">200px</p> <MmRefThumb /> </div> <div className="w-[400px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">400px</p> <MmRefThumb /> </div> </div> ), }); export const FrameParity = defineStory({ name: 'Frame parity with ManualsThumb', render: () => ( <div className="flex flex-wrap items-end gap-hgap-md"> <div className="w-[200px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">ManualsThumb</p> <ManualsThumb /> </div> <div className="w-[200px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">MmRefThumb</p> <MmRefThumb /> </div> </div> ), });