From 704fb42340875e8b8435ddbe44b4df15e427b8c5 Mon Sep 17 00:00:00 2001
From: Arshpreet Singh <73437174+GoldGroove06@users.noreply.github.com.>
Date: Sat, 28 Dec 2024 13:27:44 +0530
Subject: [PATCH 1/2] Aspect Ratio docs

---
 .../components/aspect-ratio/docs/codeUsage.js | 20 ++++++++
 docs/app/docs/components/aspect-ratio/page.js | 47 +++++++++++++++++++
 docs/components/navigation/Navigation.js      |  4 ++
 3 files changed, 71 insertions(+)
 create mode 100644 docs/app/docs/components/aspect-ratio/docs/codeUsage.js
 create mode 100644 docs/app/docs/components/aspect-ratio/page.js

diff --git a/docs/app/docs/components/aspect-ratio/docs/codeUsage.js b/docs/app/docs/components/aspect-ratio/docs/codeUsage.js
new file mode 100644
index 00000000..608a2861
--- /dev/null
+++ b/docs/app/docs/components/aspect-ratio/docs/codeUsage.js
@@ -0,0 +1,20 @@
+const code = {
+    javascript: {
+        code: `import AspectRatio from "@radui/ui/AspectRatio""
+
+const AspectRatioExample = () => (
+    <AspectRatio ratio='16/9'>
+        <img
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        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"
+            />
+    </AspectRatio>
+)`
+    
+}
+}
+
+
+export default code;
\ No newline at end of file
diff --git a/docs/app/docs/components/aspect-ratio/page.js b/docs/app/docs/components/aspect-ratio/page.js
new file mode 100644
index 00000000..eb92de2b
--- /dev/null
+++ b/docs/app/docs/components/aspect-ratio/page.js
@@ -0,0 +1,47 @@
+const PAGE_NAME = 'ASPECT_RATIO_DOCS'
+import Documentation from "@/components/layout/Documentation/Documentation"
+
+
+import AspectRatio from "@radui/ui/AspectRatio"
+import SEO from "../../docsIndex"
+export const metadata = SEO.getMetadata(PAGE_NAME)
+
+import codeUsage from "./docs/codeUsage"
+
+const AspectRatioDocs = () => {
+    const columns = [
+        {name: 'Prop', key: 'prop'},
+        {name: 'Type', key: 'type'},
+        {name: 'Default', key: 'default'},
+        {name: 'Description', key: 'description'},
+    ];
+
+    const data = [
+        {prop: 'ratio', type: 'string', default: '1', description: 'Used to set desired ratio'},
+        
+    ];
+    return <div>
+        <Documentation currentPage={PAGE_NAME} title='Aspect Ratio' description={`
+                    Aspect Ratio is used to set the desired ratio.
+                `}>
+                    <Documentation.ComponentHero codeUsage={codeUsage}>
+                <div>
+                     <AspectRatio ratio='16/9'>
+                                <img
+                                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                    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"
+                                />
+                    </AspectRatio>
+                </div>
+            </Documentation.ComponentHero>
+            <div className="max-w-screen-md">
+                            <Documentation.Table columns={columns} data={data} />
+                        </div>
+                </Documentation>
+      
+    </div>
+}
+
+export default AspectRatioDocs;
\ No newline at end of file
diff --git a/docs/components/navigation/Navigation.js b/docs/components/navigation/Navigation.js
index 34cdb9e4..a3bc1947 100644
--- a/docs/components/navigation/Navigation.js
+++ b/docs/components/navigation/Navigation.js
@@ -43,6 +43,10 @@ const sections = [
                 title: "Avatar",
                 path: "/docs/components/avatar"
             },
+            {
+                title: "AspectRatio",
+                path: "/docs/components/aspect-ratio"
+            },
             {
                 title: "Badge",
                 path: "/docs/components/badge"

From 77e3e5bf5ecf7a7c9f3524fd75f5df32266f37f3 Mon Sep 17 00:00:00 2001
From: Arshpreet Singh <73437174+GoldGroove06@users.noreply.github.com>
Date: Sat, 28 Dec 2024 13:47:18 +0530
Subject: [PATCH 2/2] Update
 docs/app/docs/components/aspect-ratio/docs/codeUsage.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 docs/app/docs/components/aspect-ratio/docs/codeUsage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/docs/components/aspect-ratio/docs/codeUsage.js b/docs/app/docs/components/aspect-ratio/docs/codeUsage.js
index 608a2861..632c3830 100644
--- a/docs/app/docs/components/aspect-ratio/docs/codeUsage.js
+++ b/docs/app/docs/components/aspect-ratio/docs/codeUsage.js
@@ -1,6 +1,6 @@
 const code = {
     javascript: {
-        code: `import AspectRatio from "@radui/ui/AspectRatio""
+        code: `import AspectRatio from "@radui/ui/AspectRatio"`
 
 const AspectRatioExample = () => (
     <AspectRatio ratio='16/9'>