Aspect Ratio

1'use client';
2 
3import type { ComponentRef } from 'react';
4import { forwardRef } from 'react';
5import type { Root } from '@radix-ui/react-aspect-ratio';
6import { useComponentConfig } from '../config-provider/context';
7import AspectRatioUI from './AspectRatioUI';
8import type { AspectRatioProps } from './types';
9 
10const AspectRatio = forwardRef<ComponentRef<typeof Root>, AspectRatioProps>((props, ref) => {
11  const config = useComponentConfig('aspectRatio');
12 
13  const mergedProps = {
14    ...config,
15    ...props
16  };
17 
18  return (
19    <AspectRatioUI
20      {...mergedProps}
21      ref={ref}
22    />
23  );
24});
25 
26AspectRatio.displayName = 'AspectRatio';
27 
28export default AspectRatio;