forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[website] Adjust site to add Toolpad on the homepage (mui#38604)
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
- Loading branch information
1 parent
60ea972
commit a7f9202
Showing
19 changed files
with
411 additions
and
387 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import * as React from 'react'; | ||
| import { alpha } from '@mui/material/styles'; | ||
| import Box from '@mui/material/Box'; | ||
| import Button, { buttonClasses } from '@mui/material/Button'; | ||
|
|
||
| interface MaterialVsCustomToggleProps { | ||
| customized: boolean; | ||
| setCustomized: React.Dispatch<boolean>; | ||
| } | ||
|
|
||
| export default function MaterialVsCustomToggle({ | ||
| customized, | ||
| setCustomized, | ||
| }: MaterialVsCustomToggleProps) { | ||
| return ( | ||
| <Box | ||
| sx={(theme) => ({ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| right: 0, | ||
| p: 1.5, | ||
| display: 'flex', | ||
| gap: 1, | ||
| zIndex: 3, | ||
| background: `linear-gradient(to bottom, ${ | ||
| (theme.vars || theme).palette.common.black | ||
| } 70%, transparent)`, | ||
| [`& .${buttonClasses.root}`]: { | ||
| borderRadius: 99, | ||
| padding: '1px 8px', | ||
| fontSize: theme.typography.pxToRem(12), | ||
| }, | ||
| '& .MuiButton-outlinedPrimary': { | ||
| backgroundColor: alpha(theme.palette.primary[900], 0.5), | ||
| }, | ||
| })} | ||
| > | ||
| <Button | ||
| size="small" | ||
| variant="outlined" | ||
| color={customized ? 'secondary' : 'primary'} | ||
| onClick={() => { | ||
| setCustomized(false); | ||
| }} | ||
| > | ||
| Material Design | ||
| </Button> | ||
| <Button | ||
| size="small" | ||
| variant="outlined" | ||
| color={customized ? 'primary' : 'secondary'} | ||
| onClick={() => { | ||
| setCustomized(true); | ||
| }} | ||
| > | ||
| Custom theme | ||
| </Button> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import * as React from 'react'; | ||
| import { alpha } from '@mui/material/styles'; | ||
| import Box, { BoxProps } from '@mui/material/Box'; | ||
| import Button from '@mui/material/Button'; | ||
| import { Link } from '@mui/docs/Link'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded'; | ||
| import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded'; | ||
|
|
||
| export function AppearingInfoBox({ | ||
| appeared, | ||
| children, | ||
| ...props | ||
| }: { appeared: boolean; children: React.ReactNode } & BoxProps) { | ||
| const [hidden, setHidden] = React.useState(false); | ||
| return ( | ||
| <Box | ||
| {...props} | ||
| sx={{ | ||
| position: 'absolute', | ||
| bottom: 8, | ||
| left: 8, | ||
| right: 8, | ||
| zIndex: 3, | ||
| mx: -1, | ||
| background: ({ palette }) => alpha(palette.common.black, 0.9), | ||
| borderTop: '1px solid', | ||
| borderColor: hidden || !appeared ? 'transparent' : 'primaryDark.700', | ||
| transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)', | ||
| transition: '0.2s', | ||
| ...props.sx, | ||
| }} | ||
| > | ||
| <IconButton | ||
| size="small" | ||
| aria-label={hidden ? 'show' : 'hide'} | ||
| onClick={() => setHidden((bool) => !bool)} | ||
| sx={{ | ||
| position: 'absolute', | ||
| zIndex: 2, | ||
| transition: '0.3s', | ||
| right: 16, | ||
| bottom: '100%', | ||
| transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)', | ||
| opacity: appeared ? 1 : 0, | ||
| color: '#FFF', | ||
| backgroundColor: 'primary.500', | ||
| '&:hover': { | ||
| backgroundColor: 'primary.800', | ||
| }, | ||
| }} | ||
| > | ||
| {hidden ? ( | ||
| <KeyboardArrowUpRounded fontSize="small" /> | ||
| ) : ( | ||
| <KeyboardArrowDownRounded fontSize="small" /> | ||
| )} | ||
| </IconButton> | ||
| <Box sx={{ px: 2, py: 1.5 }}>{children}</Box> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| export default function MoreInfoBox({ | ||
| primaryBtnLabel, | ||
| primaryBtnHref, | ||
| secondaryBtnLabel, | ||
| secondaryBtnHref, | ||
| ...props | ||
| }: { | ||
| primaryBtnLabel: string; | ||
| primaryBtnHref: string; | ||
| secondaryBtnLabel: string; | ||
| secondaryBtnHref: string; | ||
| } & BoxProps) { | ||
| return ( | ||
| <Box | ||
| data-mui-color-scheme="dark" | ||
| {...props} | ||
| sx={{ | ||
| p: 1.5, | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| background: ({ palette }) => alpha(palette.primaryDark[800], 0.2), | ||
| display: 'flex', | ||
| flexDirection: { xs: 'column', sm: 'row' }, | ||
| gap: { xs: 1.5, sm: 1 }, | ||
| borderTop: '1px solid', | ||
| borderColor: 'divider', | ||
| zIndex: 3, | ||
| ...props.sx, | ||
| }} | ||
| > | ||
| <Button component={Link} noLinkStyle size="small" variant="contained" href={primaryBtnHref}> | ||
| {primaryBtnLabel} | ||
| </Button> | ||
| <Button | ||
| component={Link} | ||
| noLinkStyle | ||
| size="small" | ||
| variant="outlined" | ||
| color="secondary" | ||
| href={secondaryBtnHref} | ||
| > | ||
| {secondaryBtnLabel} | ||
| </Button> | ||
| </Box> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.