aspect-ratio.tsx 406 B

12345678910111213141516171819202122
  1. import { cn } from '@/lib/utils';
  2. function AspectRatio({
  3. ratio,
  4. className,
  5. ...props
  6. }: React.ComponentProps<'div'> & { ratio: number }) {
  7. return (
  8. <div
  9. data-slot="aspect-ratio"
  10. style={
  11. {
  12. '--ratio': ratio,
  13. } as React.CSSProperties
  14. }
  15. className={cn('relative aspect-(--ratio)', className)}
  16. {...props}
  17. />
  18. );
  19. }
  20. export { AspectRatio };