Astryx Aspect Ratio

'use client';

import AspectRatio from '@/components/ui/astryx-aspect-ratio';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Center} from '@astryxdesign/core/Center';

export default function AspectRatioWidescreen() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Center width={600}>
          <AspectRatio ratio={16 / 9}>
            <img
              src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
              alt="16:9 widescreen"
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
            />
          </AspectRatio>
        </Center>
      </div>
    </Theme>
  );
}