Skip to content

Commit

Permalink
[website] Update MUI X landing page (#37966)
Browse files Browse the repository at this point in the history
  • Loading branch information
cherniavskii authored Jul 18, 2023
1 parent 1e92db4 commit 64d354b
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 33 deletions.
56 changes: 28 additions & 28 deletions docs/src/components/home/GetStartedButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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!).then(() => {
setTimeout(() => setCopied(false), 2000);
});
};

return (
<Box
{...other}
Expand All @@ -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>
);
}
6 changes: 5 additions & 1 deletion docs/src/components/home/Hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import GradientText from 'docs/src/components/typography/GradientText';
import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
import HeroContainer from 'docs/src/layouts/HeroContainer';
import ROUTES from 'docs/src/route';

function createLoading(sx: BoxProps['sx']) {
return function Loading() {
Expand Down Expand Up @@ -100,7 +101,10 @@ 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
to={ROUTES.documentation}
installation="npm install @mui/material @emotion/react @emotion/styled"
/>
</Box>
}
rightSx={{
Expand Down
5 changes: 4 additions & 1 deletion docs/src/components/home/StartToday.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ 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
to={ROUTES.documentation}
installation="npm install @mui/material @emotion/react @emotion/styled"
/>
</Grid>
<Grid item xs={12} sm={6} md={6} container spacing={2}>
<Grid item xs={12} md={6}>
Expand Down
5 changes: 4 additions & 1 deletion docs/src/components/productMaterial/MaterialHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={ROUTES.documentation}
installation="npm install @mui/material @emotion/react @emotion/styled"
/>
</Box>
}
rightSx={{
Expand Down
3 changes: 1 addition & 2 deletions docs/src/components/productX/XHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,7 @@ export default function XHero() {
components. We&apos;re kicking it off with the most powerful Data Grid on the market.
</Typography>
<GetStartedButtons
installation="npm install @mui/x-data-grid"
to={ROUTES.dataGridDocs}
to={ROUTES.advancedComponents}
sx={{ justifyContent: { xs: 'center', md: 'flex-start' } }}
/>
</Box>
Expand Down

0 comments on commit 64d354b

Please sign in to comment.