"use client";

import { AspectRatio } from "@countryclub/ui-react";

export default function AspectRatioDemo() {
  return (
    <div className="w-full max-w-md">
      <AspectRatio
        className="rounded-xl bg-linear-to-br from-emerald-800 via-emerald-600 to-lime-400"
        ratio={16 / 9}
      >
        <div className="flex size-full items-center justify-center">
          <span className="font-medium text-sm text-white drop-shadow">
            18th Hole · Sunset over the fairway
          </span>
        </div>
      </AspectRatio>
    </div>
  );
}
Aspect Ratio

Import

Default
