Card

const Preview = () => {
  return (
    <Card style={{ maxWidth: '320px' }} data-color='neutral'>
      <Heading>Lykkeland Barneskole</Heading>
      <Paragraph>
        Lykkeland Barneskole er ein trygg og inkluderande nærskule der leik,
        læring og nysgjerrigheit går hand i hand.
      </Paragraph>
      <Paragraph data-size='sm'>Solslett kommune</Paragraph>
    </Card>
  );
};

render(<Preview />)

const Variants = () => {
  const colorVariants = ['accent'];
  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}</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 />)