Card

const PreviewEn = () => {
  return (
    <Card style={{ maxWidth: '320px' }} data-color='neutral'>
      <Heading>Lykkeland Primary School</Heading>
      <Paragraph>
        Lykkeland Primary School is a safe and inclusive local school where
        play, learning and curiosity go hand in hand.
      </Paragraph>
      <Paragraph data-size='sm'>Solslett Municipality</Paragraph>
    </Card>
  );
};

render(<PreviewEn />)

const Variants = () => {
  const colorVariants = ['accent', 'brand1', 'brand2', 'brand3', 'neutral'];
  const variants = ['default', 'tinted'];

  return (
    <>
      {variants.map((variant) =>
        colorVariants.map((color) => (
          <Card
            key={`${variant}-${color}`}
            data-variant={variant as 'default' | 'tinted'}
            data-color={color as CardProps['data-color']}
          >
            <Card.Block>
              <Paragraph>
                {variant}: {color}
              </Paragraph>
            </Card.Block>
          </Card>
        )),
      )}
    </>
  );
};

render(<Variants />)

const MediaEn = () => {
  return (
    <Card data-color='neutral' style={{ maxWidth: '380px' }}>
      <Card.Block>
        <video controls preload='metadata' width='100%'>
          <source
            src='/videos/designsystemet/designsystemet-info.mp4'
            type='video/mp4'
          />
          <track
            label='Norwegian'
            kind='subtitles'
            srcLang='nb'
            src='/videos/designsystemet/designsystemet-info-no.vtt'
            default
          />
          <track
            label='English'
            kind='subtitles'
            srcLang='en'
            src='/videos/designsystemet/designsystemet-info-en.vtt'
          />
          Your browser does not support the video tag.
        </video>
      </Card.Block>
      <Card.Block>
        <Heading>About Designsystemet</Heading>
        <Paragraph>
          The video above provides a brief introduction to what Designsystemet
          is and how it can be used in the development of digital services.
        </Paragraph>
      </Card.Block>
    </Card>
  );
};

render(<MediaEn />)

const WithLinkEn = () => {
  return (
    <Card data-color='neutral'>
      <Card.Block>
        <Heading>
          <Link
            href='https://designsystemet.no'
            target='_blank'
            rel='noopener noreferrer'
          >
            Myrkheim Museum
          </Link>
        </Heading>
        <Paragraph>
          The Myrkheim Museum lies in the valley between the old mountain peaks
          and displays exhibitions from the time when the first travelling
          companies crossed the land. Here you can explore ancient maps, tools
          from the great wanderings, and tales preserved by the wardens of the
          forests.
        </Paragraph>
        <Paragraph data-size='sm'>
          Myrkheim Council for Cultural Heritage
        </Paragraph>
      </Card.Block>
    </Card>
  );
};

render(<WithLinkEn />)

const AsLink = () => {
  return (
    <Card data-color='neutral' asChild>
      <a href='https://designsystemet.no' rel='noopener noreferrer'>
        <Heading>Link Card with asChild</Heading>
        <Paragraph>
          Most provide as with carried business are much better more the
          perfected designer.
        </Paragraph>
      </a>
    </Card>
  );
};

render(<AsLink />)

const AsGridEn = () => {
  return (
    <Card
      data-color='neutral'
      style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}
    >
      <Card.Block>
        <Heading>Wanderer’s Fever</Heading>
      </Card.Block>
      <Card.Block>
        <Paragraph>
          Symptoms can include restlessness, heightened alertness, and a
          tendency to look over one’s shoulder. The condition usually eases
          after a good meal and a safe place to rest.
        </Paragraph>
      </Card.Block>
    </Card>
  );
};

render(<AsGridEn />)