aspect ratio component

src/components/ui/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,22 @@
+'use client';
+import React from 'react';
+import { customClassSwitcher } from '~/core';
+import { clsx } from 'clsx';
+const COMPONENT_NAME = 'AspectRatio';
+
+export type AspectRatioProps = {
+    children: React.ReactNode;
+    customRootClass?: string;
+    className?: string;
+    ratio?: string;
+    props: Record<string, any>[];
+}
+
+const AspectRatio = ({ children, customRootClass, className, ratio="1", ...props }: AspectRatioProps) => {
+
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    return <div style={{aspectRatio:ratio}} className={clsx(rootClass, className)} {...props}>{children} </div>
+}
+AspectRatio.displayName = COMPONENT_NAME;
+
+export default AspectRatio;

src/components/ui/AspectRatio/stories/AspectRatio.stories.js

@@ -0,0 +1,25 @@
+import AspectRatio from '../AspectRatio';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Components/AspectRatio',
+    component: AspectRatio,
+    render: (args) => <SandboxEditor>
+        <AspectRatio {...args} >
+            <img
+
+				className="Image"
+				src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
+				alt="Landscape photograph by Tobias Tullius"
+			/>
+            </AspectRatio>
+    </SandboxEditor>
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+    args: {
+        ratio: "16/9"
+    }
+};

src/components/ui/AspectRatio/tests/AspectRatio.test.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AspectRatio from '../AspectRatio';
+

styles/themes/components/aspectratio.scss

@@ -0,0 +1,6 @@
+.rad-ui-aspect-ratio{
+    img{
+        width: 100%;
+        height: 100%;
+    }
+}

styles/themes/default.scss

@@ -1,5 +1,6 @@
 @import "./components/accordion.scss";
 @import "./components/alert-dialog.scss";
+@import "./components/aspectratio.scss";
 @import "./components/avatar.scss";
 @import "./components/avatar-group.scss";
 @import "./components/badge.scss";