docs-migration testing batch (#889)

Author: GoldGroove06

docs/app/docsv2/components/aspect-ratio/docs/codeUsage.js

@@ -0,0 +1,34 @@
+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 const AspectRatioTable = {
+     columns : [
+        {name: 'Prop', id: 'prop'},
+        {name: 'Type', id: 'type'},
+        {name: 'Default', id: 'default'},
+        {name: 'Description', id: 'description'},
+    ],
+
+     data :[
+        {prop: 'ratio', type: 'string', default: '1', description: 'Used to set desired ratio', id: 'ratio'},
+        
+    ]
+}
+
+
+export default code;

docs/app/docsv2/components/aspect-ratio/page.mdx

@@ -1 +1,24 @@
-# Aspect Ratio
+import Documentation from "@/components/layout/Documentation/Documentation"
+import AspectRatio from "@radui/ui/AspectRatio"
+import codeUsage, { AspectRatioTable } from "./docs/codeUsage"
+
+
+<Documentation title={`AspectRatio`}  description={`
+                    Aspect Ratio is used to set the desired ratio.
+                `}>
+                    <Documentation.ComponentHero codeUsage={codeUsage}>
+              
+                     <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>
+              
+            </Documentation.ComponentHero>
+        
+                            <Documentation.Table columns={AspectRatioTable.columns} data={AspectRatioTable.data} />
+            
+                </Documentation>

docs/app/docsv2/components/badge/docs/codeUsage.js

@@ -0,0 +1,38 @@
+const code = {
+    javascript: {
+        code: `import Badge from "@radui/ui/Badge"
+
+const BadgeExample = () => (
+    <div>
+        <Badge>Badge</Badge>
+    </div>
+)`
+    },
+    scss: {
+        code: `/** Badge */
+.rad-ui-badge {
+    background-color: var(--rad-ui-color-accent-300);
+    color: var(--rad-ui-color-accent-950);
+    padding:4px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    border-radius: 4px;
+}`
+    },
+}
+
+export const BadgeTable ={
+     columns: [
+        {name: 'Prop', id: 'prop'},
+        {name: 'Type', id: 'type'},
+        {name: 'Default', id: 'default'},
+        {name: 'Description', id: 'description'},
+    ],
+
+     data : [
+        {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the component', id: 'color'},
+    ]
+}
+export default code;

docs/app/docsv2/components/badge/page.mdx

@@ -1,3 +1,19 @@
-# Badge
+import Documentation from "@/components/layout/Documentation/Documentation"
+import Badge from "@radui/ui/Badge"
+import codeUsage, {BadgeTable} from "./docs/codeUsage"
 
-## Under Construction
+<Documentation  title={`Badge`} description={`
+            Badges are used to display a small amount of information. They are used in the sidebar, and in the chat.
+        `}>
+            <Documentation.ComponentHero codeUsage={codeUsage}>
+                
+                    <Badge>Badge</Badge>
+              
+            </Documentation.ComponentHero>
+
+            
+           
+                 <Documentation.Table columns={BadgeTable.columns} data={BadgeTable.data} />
+      
+         
+        </Documentation>