AspectRatio

const aspectRatioFixture = {
  id: "aspect-ratio",
  ratio: 16 / 9,
  label: "16:9 media",
} satisfies { id: string; ratio: number; label: string };
 
import { AspectRatio } from "@grassroot/ui-react";
 
export default function AspectRatioDemo() {
  return (
    <div>
      <div className="w-full max-w-[420px]">
        <AspectRatio ratio={aspectRatioFixture.ratio}>
          <div className="flex items-center justify-center rounded-xs border border-line-strong bg-card font-mono text-[13px] text-muted">
            {aspectRatioFixture.label}
          </div>
        </AspectRatio>
      </div>
    </div>
  );
}

<script setup lang="ts">
const aspectRatioFixture = {
  id: "aspect-ratio",
  ratio: 16 / 9,
  label: "16:9 media",
} satisfies { id: string; ratio: number; label: string };
 
import { AspectRatio } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <div class="w-full max-w-[420px]">
      <AspectRatio :ratio="aspectRatioFixture.ratio">
        <div
          class="flex items-center justify-center rounded-xs border border-line-strong bg-card font-mono text-[13px] text-muted"
        >
          {{ aspectRatioFixture.label }}
        </div>
      </AspectRatio>
    </div>
  </div>
</template>

import { Component } from "@angular/core";
const aspectRatioFixture = {
  id: "aspect-ratio",
  ratio: 16 / 9,
  label: "16:9 media",
} satisfies { id: string; ratio: number; label: string };
 
import { GrassrootAspectRatio } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-aspect-ratio-demo",
  standalone: true,
  imports: [GrassrootAspectRatio],
  template: `
    <div>
      <div class="w-full max-w-[420px]">
        <grassroot-aspect-ratio [ratio]="fixture.ratio">
          <div
            class="flex items-center justify-center rounded-xs border border-line-strong bg-card font-mono text-[13px] text-muted"
          >
            {{ fixture.label }}
          </div>
        </grassroot-aspect-ratio>
      </div>
    </div>
  `,
})
export class AspectRatioDemoComponent {
  protected readonly fixture = aspectRatioFixture;
}
 
export default AspectRatioDemoComponent;

<script lang="ts">
  const aspectRatioFixture = {
    id: "aspect-ratio",
    ratio: 16 / 9,
    label: "16:9 media",
  } satisfies { id: string; ratio: number; label: string };
 
  import { AspectRatio } from "@grassroot/ui-svelte";
</script>
 
<div>
  <div class="w-full max-w-[420px]">
    <AspectRatio ratio={aspectRatioFixture.ratio}>
      <div
        class="flex items-center justify-center rounded-xs border border-line-strong bg-card font-mono text-[13px] text-muted"
      >
        {aspectRatioFixture.label}
      </div>
    </AspectRatio>
  </div>
</div>

/** @jsxImportSource solid-js */
import { AspectRatio } from "@grassroot/ui-solid";
const aspectRatioFixture = {
  id: "aspect-ratio",
  ratio: 16 / 9,
  label: "16:9 media",
} satisfies { id: string; ratio: number; label: string };
 
import type { JSX } from "solid-js";
 
export default function AspectRatioDemo(): JSX.Element {
  return (
    <div>
      <div class="w-full max-w-[420px]">
        <AspectRatio ratio={aspectRatioFixture.ratio}>
          <div class="flex items-center justify-center rounded-xs border border-line-strong bg-card font-mono text-[13px] text-muted">
            {aspectRatioFixture.label}
          </div>
        </AspectRatio>
      </div>
    </div>
  );
}