TemplatePicker

import { useState } from 'react';
import { TemplatePicker, type TemplatePickerTemplate } from '@rookcom/monarch-react/patterns';

type Layout = 'sidebar' | 'hero' | 'grid' | 'list' | 'split' | 'form';

/** A tiny drawn layout in Monarch tokens, standing in for a product's thumbnail. */
function Thumb({ layout }: { layout: Layout }) {
  const line = (w: string, strong = false) => (
    <span
      style={{
        display: 'block',
        height: 4,
        width: w,
        borderRadius: 2,
        background: strong ? 'var(--mn-color-accent-solid)' : 'var(--mn-color-border-strong)',
      }}
    />
  );
  const box = (h: number) => (
    <span
      style={{
        display: 'block',
        height: h,
        borderRadius: 3,
        border: '1px solid var(--mn-color-border-default)',
        background: 'var(--mn-color-bg-surface)',
      }}
    />
  );
  const frame = {
    display: 'flex',
    gap: 6,
    width: '82%',
    height: '78%',
    padding: 6,
    boxSizing: 'border-box',
    borderRadius: 4,
    background: 'var(--mn-color-bg-surface)',
    border: '1px solid var(--mn-color-border-subtle)',
  } as const;
  const col = { display: 'flex', flexDirection: 'column', gap: 4, flex: 1 } as const;
  if (layout === 'sidebar')
    return (
      <span style={frame}>
        <span style={{ ...col, flex: '0 0 28%' }}>
          {line('70%', true)}
          {line('90%')}
          {line('60%')}
          {line('80%')}
        </span>
        <span style={col}>
          {box(14)}
          {line('80%')}
          {line('60%')}
        </span>
      </span>
    );
  if (layout === 'hero')
    return (
      <span style={{ ...frame, flexDirection: 'column' }}>
        <span
          style={{
            display: 'block',
            height: 18,
            borderRadius: 3,
            background: 'var(--mn-color-accent-subtle)',
          }}
        />
        {line('60%', true)}
        {line('85%')}
        {line('70%')}
      </span>
    );
  if (layout === 'grid')
    return (
      <span style={{ ...frame, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <span key={i}>{box(16)}</span>
        ))}
      </span>
    );
  if (layout === 'split')
    return (
      <span style={frame}>
        <span style={{ flex: 1, borderRadius: 3, background: 'var(--mn-color-accent-subtle)' }} />
        <span style={col}>
          {line('70%', true)}
          {line('90%')}
          {line('50%')}
        </span>
      </span>
    );
  if (layout === 'form')
    return (
      <span style={{ ...frame, flexDirection: 'column' }}>
        {line('40%', true)}
        {box(8)}
        {box(8)}
        {box(16)}
      </span>
    );
  return (
    <span style={{ ...frame, flexDirection: 'column' }}>
      {line('50%', true)}
      {[0, 1, 2, 3].map((i) => (
        <span key={i}>{line(`${90 - i * 10}%`)}</span>
      ))}
    </span>
  );
}

/** Built lazily: docs files cannot create JSX at module scope. */
const pages = (): TemplatePickerTemplate[] => [
  {
    id: 'classic',
    name: 'Classic',
    description: 'Navigation on the side, content on the right.',
    category: 'pages',
    preview: <Thumb layout="sidebar" />,
    badge: 'Built-in',
  },
  {
    id: 'banner',
    name: 'Banner',
    description: 'A large header, then a list.',
    category: 'pages',
    preview: <Thumb layout="hero" />,
  },
  {
    id: 'gallery',
    name: 'Gallery',
    description: 'Cards in a grid.',
    category: 'pages',
    preview: <Thumb layout="grid" />,
  },
  {
    id: 'split',
    name: 'Split',
    description: 'Image beside text.',
    category: 'pages',
    preview: <Thumb layout="split" />,
  },
  {
    id: 'article',
    name: 'Article',
    description: 'One readable column.',
    category: 'docs',
    preview: <Thumb layout="list" />,
    keywords: ['blog', 'post'],
  },
  {
    id: 'intake',
    name: 'Intake form',
    description: 'Collect details before a call.',
    category: 'forms',
    preview: <Thumb layout="form" />,
  },
];

const CATEGORIES = [
  { id: 'pages', label: 'Pages' },
  { id: 'docs', label: 'Articles' },
  { id: 'forms', label: 'Forms' },
];

function GalleryDemo() {
  const [value, setValue] = useState<string | null>('classic');
  return (
    <TemplatePicker
      aria-label="Page template"
      templates={pages()}
      categories={CATEGORIES}
      blank={{ description: 'Start from an empty page.' }}
      value={value}
      onValueChange={(id) => setValue(id)}
      renderPreview={(t) => (
        <div style={{ display: 'grid', gap: 8 }}>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              aspectRatio: '4 / 3',
              borderRadius: 8,
              background: 'var(--mn-color-bg-muted)',
            }}
          >
            {t?.preview ?? <span style={{ color: 'var(--mn-color-text-muted)' }}>Empty page</span>}
          </div>
          <strong>{t ? t.name : 'Blank'}</strong>
          <span style={{ color: 'var(--mn-color-text-muted)', fontSize: 13 }}>
            {t ? t.description : 'Start from an empty page.'}
          </span>
        </div>
      )}
    />
  );
}

<GalleryDemo />