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 AsButtonEn = () => {
  return (
    <Card asChild data-color='neutral'>
      <button type='button'>
        <Card.Block>
          <Heading>Settings and privacy</Heading>
        </Card.Block>
        <Card.Block>
          <Paragraph>
            This opens a dialogue where you can update your privacy choices,
            adjust settings, and customise how the service handles your
            information. You can review your changes before saving.
          </Paragraph>
        </Card.Block>
      </button>
    </Card>
  );
};

render(<AsButtonEn />)

const AsGrid = () => {
  return (
    <Card
      data-color='neutral'
      style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}
    >
      <Card.Block>
        <Heading>Vandrefeber</Heading>
      </Card.Block>
      <Card.Block>
        <Paragraph>
          Symptomer kan være uro i kroppen, skjerpet årvåkenhet og en tendens
          til å stadig se seg over skulderen. Tilstanden går vanligvis over
          etter et godt måltid og et trygt sted å hvile.
        </Paragraph>
      </Card.Block>
    </Card>
  );
};

render(<AsGrid />)