import { TypographyRender } from '../components'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Typography',
  section: 'typography',
  subtitle: 'A versatile typography system optimized for small spaces.',
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Title',
    type: 'typography',
    description:
      'For section or screen titles. Try to reduce their usage to a minimum on a screen.',
    render: () => <TypographyRender id="title" />,
  },
  {
    name: 'Heading',
    type: 'typography',
    description:
      'For emphasized text or titles. Try to reduce their usage to a minimum on a screen.',
    render: () => <TypographyRender id="heading" />,
  },
  {
    name: 'Display',
    type: 'typography',
    description:
      'For emphasized text or titles. Try to reduce their usage to a minimum on a screen.',
    render: () => <TypographyRender id="display" />,
  },
  {
    name: 'Subheading',
    type: 'typography',
    description:
      'For emphasized text or titles. Try to reduce their usage to a minimum on a screen.',
    render: () => <TypographyRender id="subheading" />,
  },
  {
    name: 'Subtext',
    type: 'typography',
    description:
      'For emphasized text or titles. Try to reduce their usage to a minimum on a screen.',
    render: () => <TypographyRender id="subtext" />,
  },
]
