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', '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 Media = () => {
  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>Om Designsystemet</Heading>
        <Paragraph>
          Videoen over gir en kort introduksjon til hva Designsystemet er, og
          hvordan det kan brukes i utviklingen av digitale tjenester.
        </Paragraph>
      </Card.Block>
    </Card>
  );
};

render(<Media />)

const WithLink = () => {
  return (
    <Card data-color='neutral'>
      <Card.Block>
        <Heading>
          <Link
            href='https://designsystemet.no'
            target='_blank'
            rel='noopener noreferrer'
          >
            Myrkheim Museum
          </Link>
        </Heading>
        <Paragraph>
          Myrkheim Museum ligg i dalen mellom dei gamle fjelltoppane og viser
          utstillingar frå tida då dei fyrste reisefølgja kryssa landet. Her kan
          du utforske eldgamle kart, reiskapar frå dei store vandringane og
          forteljingar bevart av skogvaktarane.
        </Paragraph>
        <Paragraph data-size='sm'>Myrkheim Kulturvernråd</Paragraph>
      </Card.Block>
    </Card>
  );
};

render(<WithLink />)

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 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 />)