[docs] Link Material UI from the landing page

oliviertassinari · Jul 17, 2023 · 8362869 · 8362869
1 parent 0591739
commit 8362869
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 31 deletions.
diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx
@@ -5,27 +5,25 @@ import Button from '@mui/material/Button';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
 import CheckRounded from '@mui/icons-material/CheckRounded';
-import ROUTES from 'docs/src/route';
 import Link from 'docs/src/modules/components/Link';
 
 interface GetStartedButtonsProps extends BoxProps {
+  callToAction?: string;
   installation?: string;
-  to?: string;
+  to: string;
 }
 
 export default function GetStartedButtons(props: GetStartedButtonsProps) {
   const [copied, setCopied] = React.useState(false);
-  const {
-    installation = 'npm install @mui/material @emotion/react @emotion/styled',
-    to = ROUTES.documentation,
-    ...other
-  } = props;
+  const { installation, callToAction = 'Get started', to, ...other } = props;
+
   const handleCopy = () => {
     setCopied(true);
-    copy(installation).then(() => {
+    copy(installation as any).then(() => {
       setTimeout(() => setCopied(false), 2000);
     });
   };
+
   return (
     <Box
       {...other}
@@ -51,27 +49,29 @@ export default function GetStartedButtons(props: GetStartedButtonsProps) {
           mb: { xs: 2, md: 0 },
         }}
       >
-        Get started
-      </Button>
-      <Button
-        size="large"
-        // @ts-expect-error
-        variant="code"
-        endIcon={copied ? <CheckRounded color="primary" /> : <ContentCopyRounded />}
-        onClick={handleCopy}
-        sx={{
-          maxWidth: '324px',
-          display: 'inline-block',
-          justifyContent: 'start',
-          overflowX: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          position: 'relative',
-          pr: 5,
-        }}
-      >
-        {installation}
+        {callToAction}
       </Button>
+      {installation ? (
+        <Button
+          size="large"
+          // @ts-expect-error
+          variant="code"
+          endIcon={copied ? <CheckRounded color="primary" /> : <ContentCopyRounded />}
+          onClick={handleCopy}
+          sx={{
+            maxWidth: '324px',
+            display: 'inline-block',
+            justifyContent: 'start',
+            overflowX: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            position: 'relative',
+            pr: 5,
+          }}
+        >
+          {installation}
+        </Button>
+      ) : null}
     </Box>
   );
 }
diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
@@ -100,7 +100,7 @@ export default function Hero() {
             with Material UI, our fully-loaded component library, or bring your own design system to
             our production-ready components.
           </Typography>
-          <GetStartedButtons />
+          <GetStartedButtons callToAction="Discover Material UI" to="/material-ui/" />
         </Box>
       }
       rightSx={{

diff --git a/docs/src/components/home/StartToday.tsx b/docs/src/components/home/StartToday.tsx
@@ -22,7 +22,7 @@ export default function StartToday() {
           }
           description="Find out why MUI's tools are trusted by thousands of open-source developers and teams around the world."
         />
-        <GetStartedButtons />
+        <GetStartedButtons callToAction="Discover Material UI" to="/material-ui/" />
       </Grid>
       <Grid item xs={12} sm={6} md={6} container spacing={2}>
         <Grid item xs={12} md={6}>

diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -244,7 +244,10 @@ export default function MaterialHero() {
             Material UI is beautiful by design and features a suite of customization options that
             make it easy to implement your own custom design system.
           </Typography>
-          <GetStartedButtons />
+          <GetStartedButtons
+            to="/material-ui/getting-started/"
+            installation="npm install @mui/material @emotion/react @emotion/styled"
+          />
         </Box>
       }
       rightSx={{