Fixed layout of docs (#886)

Author: GoldGroove06

docs/app/docs/layout.tsx

@@ -1,35 +1,39 @@
+import Link from '@radui/ui/Link';
 import Navigation from '@/components/navigation/Navigation';
 import Callout from '@radui/ui/Callout';
-import Link from '@radui/ui/Link';
 
 const InfoIcon = () => {
     return (<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>);
 };
 
-const Layout = ({ children }: any) => {
+const layout = ({ children }: any) => {
+
+    
+
     return (
-        <div data-accent-color="blue" className="flex space-x-2 w-full max-h-screen overflow-y-auto">
-            <div className='flex-none h-full flex flex-col'>
+        <div className= " md:flex max-h-screen overflow-y-auto">
+            <div className='md:flex'>
                 <Navigation />
             </div>
             <div className='lg:px-4 text-gray-1000 flex-1 flex flex-col gap-4 overflow-y-scroll pt-2' id="docs-content">
-               
-                <div className='md:mt-2 md:max-w-[1440px] lg:mx-auto'>
-                <Callout color="green">
-                    <div className='flex-none'>
-                        <InfoIcon />
-                    </div>
-                    <div>
+                <div className=' p-4 md:mx-auto md:max-w-[1440px]'>
+                    <Callout color="green">
+                        <div className='flex-none'>
+                            <InfoIcon />
+                        </div>
+                        
                         <div >
-                            Rad UI is under active development and looking for contributors to shape the future of the library. If you'd like to contribute to Rad UI, please check out <Link href="/docs/contributing/before-you-start">Getting Started</Link>
+                          Rad UI is under active development and looking for contributors to shape the future of the library. If you'd like to contribute to Rad UI, please check out <Link href="/docs/contributing/before-you-start">Getting Started</Link>
                         </div>
+                                     
+                    </Callout>
+                    <div >
+                        {children}
                     </div>
-                </Callout>
-                    {children}
                 </div>
             </div>
         </div>
-    );
-};
+    )
+}
 
-export default Layout;
+export default layout;

docs/components/layout/Documentation/Documentation.js

@@ -23,7 +23,7 @@ const Documentation = ({ title = '', description = '', currentPage = undefined,
     const next = DOCS_SEO.getNext(currentPage);
     const NEXT_PAGE_TITLE = next?.basic_title || '';
 
-    return <div>
+    return <div className='w-full max-w-screen-lg mx-auto'>
         <div>
             <div className='flex items-center space-x-4'>
                 <BookMarkLink id={title}> <Heading>{title}</Heading> </BookMarkLink>
@@ -44,7 +44,7 @@ const Documentation = ({ title = '', description = '', currentPage = undefined,
 };
 
 const DocsTable = ({ children, columns = [], data = [] }) => {
-    return <div className='mb-20 max-w-screen-md'>
+    return <div className='mb-20'>
         <BookMarkLink id="api-documentation"> <Heading as="h6" className="mb-4">API Documentation</Heading> </BookMarkLink>
         <Table columns={columns} data={data} color="gray" >
             {children}
@@ -72,7 +72,7 @@ const Section = ({ title = '', children }) => {
 };
 
 const UnderConstruction = ({ children }) => {
-    return <div className='bg-gray-200 text-gray-1000 p-4 rounded-md'>
+    return <div className='bg-gray-200 text-gray-1000  rounded-md'>
         <Text className="mb-2 text-gray-1000 font-bold">
             Docs Under Construction
         </Text>

docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js

@@ -38,7 +38,7 @@ const ComponentHero = ({ children, title='', codeUsage = {} }) => {
 
     return <div>
         {title &&  <BookMarkLink id={title}> <Heading>{title}</Heading> </BookMarkLink>}
-        <div className='bg-gradient-to-r from-green-50 to-gray-200  border border-gray-500 shadow-md p-10 rounded-tl-md rounded-tr-md text-black flex items-center justify-center justify-evenly overflow-x-auto'>
+        <div className='bg-gradient-to-r from-green-50 to-gray-200  border border-gray-500 shadow-md p-10 rounded-tl-md rounded-tr-md text-black flex items-center justify-center justify-evenly overflow-x-auto '>
             {children}
         </div>
         <div>