Quote

import {
  Paragraph,
  Quote,
  QuoteAvatar,
  QuoteCite,
  QuoteIcon,
  QuoteLabels,
  QuotePrimaryLabel,
  QuoteSecondaryLabel,
} from '@systhemaui/next'

export default function Demo() {
  return (
    <Quote className="max-w-xl">
      <QuoteIcon />
      <Paragraph type="lead">
        We replaced three style guides with one token file. Designers change a color in Figma and
        the site follows after the next sync.
      </Paragraph>
      <QuoteCite>
        <QuoteAvatar src="/demo-assets/avatar-1.webp" alt="" />
        <QuoteLabels>
          <QuotePrimaryLabel>Maya Lindqvist</QuotePrimaryLabel>
          <QuoteSecondaryLabel>Head of Design, Northwind</QuoteSecondaryLabel>
        </QuoteLabels>
      </QuoteCite>
    </Quote>
  )
}

import { Paragraph, Quote } from '@systhemaui/next'

export default function Demo() {
  return (
    <Quote className="max-w-xl">
      <Paragraph>
        Good design is as little design as possible. Less, but better, because it concentrates on
        the essential aspects.
      </Paragraph>
    </Quote>
  )
}

import { Paragraph, Quote, QuoteIcon } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="grid w-full gap-6 sm:grid-cols-2">
      <Quote>
        <QuoteIcon />
        <Paragraph>The default mark, drawn from the configured icon.</Paragraph>
      </Quote>
      <Quote>
        <QuoteIcon.svg viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true">
          <path d="m233-120 65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Z" />
        </QuoteIcon.svg>
        <Paragraph>A custom SVG, sized and colored the same way.</Paragraph>
      </Quote>
    </div>
  )
}

import {
  Paragraph,
  Quote,
  QuoteCite,
  QuoteLabels,
  QuotePrimaryLabel,
  QuoteSecondaryLabel,
} from '@systhemaui/next'

export default function Demo() {
  return (
    <Quote className="max-w-xl">
      <Paragraph>The migration took an afternoon, and nobody noticed the switch.</Paragraph>
      <QuoteCite.footer>
        <QuoteLabels>
          <QuotePrimaryLabel>Jonas Berg</QuotePrimaryLabel>
          <QuoteSecondaryLabel>Lead developer</QuoteSecondaryLabel>
        </QuoteLabels>
      </QuoteCite.footer>
    </Quote>
  )
}

import {
  Paragraph,
  Quote,
  QuoteAvatar,
  QuoteCite,
  QuoteLabels,
  QuotePrimaryLabel,
  QuoteSecondaryLabel,
} from '@systhemaui/next'

const testimonials = [
  {
    text: 'Our editors build landing pages from blocks without asking for help.',
    name: 'Maya Lindqvist',
    role: 'Head of Design',
    avatar: '/demo-assets/avatar-1.webp',
  },
  {
    text: 'Dark mode was one token file away. We shipped it in a day.',
    name: 'Daniel Okafor',
    role: 'Frontend lead',
    avatar: '/demo-assets/avatar-2.webp',
  },
]

export default function Demo() {
  return (
    <div className="grid w-full gap-6 sm:grid-cols-2">
      {testimonials.map((item) => (
        <Quote.div key={item.name}>
          <Paragraph>{item.text}</Paragraph>
          <QuoteCite.div>
            <QuoteAvatar src={item.avatar} alt="" />
            <QuoteLabels>
              <QuotePrimaryLabel>{item.name}</QuotePrimaryLabel>
              <QuoteSecondaryLabel>{item.role}</QuoteSecondaryLabel>
            </QuoteLabels>
          </QuoteCite.div>
        </Quote.div>
      ))}
    </div>
  )
}