[docs] Link docs from component demos on Toolpad Core landing page (#…

…4013) Signed-off-by: Prakhar Gupta <[email protected]> Co-authored-by: Jan Potoms <[email protected]> Co-authored-by: Bharat Kashyap <[email protected]>
mui · Sep 5, 2024 · e0c065c · e0c065c
1 parent 9c5d47f
commit e0c065c
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/docs/src/components/landing/ToolpadFeaturesSwitcher.tsx b/docs/src/components/landing/ToolpadFeaturesSwitcher.tsx
@@ -3,7 +3,9 @@ import dynamic from 'next/dynamic';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { Link } from '@mui/docs/Link';
 import AutoAwesomeMosaic from '@mui/icons-material/AutoAwesomeMosaic';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import AutoAwesomeMotion from '@mui/icons-material/AutoAwesomeMotion';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -16,11 +18,13 @@ function ComponentItem({
   icon,
   name,
   description,
+  link,
 }: {
   // label: string;
   icon: React.ReactNode;
   name: React.ReactNode;
   description?: React.ReactNode;
+  link?: React.ReactNode;
 }) {
   return (
     <Box
@@ -57,6 +61,12 @@ function ComponentItem({
             {description}
           </Typography>
         )}
+        {link && (
+          <Link href={link.toString()} underline="hover" variant="body2">
+            View the docs
+            <KeyboardArrowRightRounded fontSize="small" />
+          </Link>
+        )}
       </div>
     </Box>
   );
@@ -70,6 +80,7 @@ const componentElement = new Map([
       description:
         'The Layout component provides a standard structure for functional apps, including customizable nav bar, header bar and more.',
       icon: <AutoAwesomeMosaic />,
+      link: '/toolpad/core/react-dashboard-layout/',
     },
   ],
   [
@@ -79,6 +90,7 @@ const componentElement = new Map([
       description:
         'Our authentication components help you set up complex authentication flows quickly, without subscription costs.',
       icon: <LockOpenIcon />,
+      link: '/toolpad/core/react-sign-in-page/',
     },
   ],
   [
@@ -87,6 +99,7 @@ const componentElement = new Map([
       name: 'Page container',
       description: 'Sets up breadcrumbs, title, toolbar and a responsive container for your pages.',
       icon: <AutoAwesomeMotion />,
+      link: '/toolpad/core/react-page-container/',
     },
   ],
   [
@@ -96,6 +109,7 @@ const componentElement = new Map([
       description:
         'Toolpad Core exports an imperative API to manage dialogs in your application. System dialogs that adapt to your application theme are also included.',
       icon: <NotificationsIcon />,
+      link: '/toolpad/core/react-use-dialogs/',
     },
   ],
   [
@@ -105,6 +119,7 @@ const componentElement = new Map([
       description:
         'We offer imperative APIs to deal with snackbars an notifications around your application.',
       icon: <NotificationsIcon />,
+      link: '/toolpad/core/react-use-notifications/',
     },
   ],
 ]);