P4m2026Thumb

Stylized P4M 2026 form thumbnail: a centered p4m glyph with diagonal line decorations matching ContactThumb/NewsThumb.

Media & Icons

Default

Small

Large

Size comparison

Compare with ContactThumb

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for P4m2026Thumb — follows the ContactThumb story contract // (`lib/styleguide/story-contract`). See contact-thumb.stories.tsx for the recipe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ContactThumb from './contact-thumb'; import P4m2026Thumb from './p4m2026-thumb'; const meta: StoryMeta = { title: 'P4m2026Thumb', category: 'Media & Icons', description: 'Stylized P4M 2026 form thumbnail: a centered p4m glyph with diagonal line decorations matching ContactThumb/NewsThumb.', usage: `import P4m2026Thumb from '@/components/shared/p4m2026-thumb';\n\n<div className="w-[200px]"><P4m2026Thumb /></div>`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => ( <div className="w-[200px]"> <P4m2026Thumb /> </div> ), }); export const Small = defineStory({ name: 'Small', render: () => ( <div className="w-[100px]"> <P4m2026Thumb /> </div> ), }); export const Large = defineStory({ name: 'Large', render: () => ( <div className="w-[300px]"> <P4m2026Thumb /> </div> ), }); export const SizeComparison = defineStory({ name: 'Size comparison', render: () => ( <div className="flex items-end gap-hgap-md"> <div className="w-[100px]"> <p className="text-muted text-xs mb-vgap-xs text-center">Small</p> <P4m2026Thumb /> </div> <div className="w-[200px]"> <p className="text-muted text-xs mb-vgap-xs text-center">Medium</p> <P4m2026Thumb /> </div> <div className="w-[300px]"> <p className="text-muted text-xs mb-vgap-xs text-center">Large</p> <P4m2026Thumb /> </div> </div> ), }); export const CompareWithContactThumb = defineStory({ name: 'Compare with ContactThumb', render: () => ( <div className="flex items-end gap-hgap-md"> <div className="w-[200px]"> <p className="text-muted text-xs mb-vgap-xs text-center">ContactThumb</p> <ContactThumb /> </div> <div className="w-[200px]"> <p className="text-muted text-xs mb-vgap-xs text-center">P4m2026Thumb</p> <P4m2026Thumb /> </div> </div> ), });