-
-
Notifications
You must be signed in to change notification settings - Fork 31.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Improve "Example projects" page design #37007
Merged
Merged
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
b727f7c
improve page design
danilo-leal e357452
fux styles
siriwatknp c73f7c4
move ExampleCollection to modules
siriwatknp 9079881
adjust layout
siriwatknp 45e7604
Merge branch 'master' of https://github.com/mui/material-ui into impr…
siriwatknp b73c219
fix border radius
danilo-leal File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
185 changes: 185 additions & 0 deletions
185
docs/data/material/getting-started/example-projects/ExampleCollection.js
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,185 @@ | ||
import * as React from 'react'; | ||
import Grid from '@mui/material/Grid'; | ||
import Card from '@mui/material/Card'; | ||
import Stack from '@mui/material/Stack'; | ||
import Avatar from '@mui/material/Avatar'; | ||
import Typography from '@mui/material/Typography'; | ||
import Link from '@mui/material/Link'; | ||
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; | ||
|
||
const examples = [ | ||
{ | ||
name: 'Next.js', | ||
label: 'View JS example', | ||
tsLabel: 'View TS example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-next', | ||
tsLink: | ||
'https://github.com/mui/material-ui/tree/master/examples/material-next-ts', | ||
src: '/static/images/examples/next.svg', | ||
}, | ||
{ | ||
name: 'Create React App', | ||
label: 'View JS example', | ||
tsLabel: 'View TS example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra', | ||
tsLink: | ||
'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts', | ||
src: '/static/images/examples/cra.svg', | ||
}, | ||
{ | ||
name: 'Remix', | ||
label: 'View example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-remix-ts', | ||
src: '/static/images/examples/remix.svg', | ||
}, | ||
{ | ||
name: 'Tailwind CSS', | ||
label: 'View example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts', | ||
src: '/static/images/examples/tailwindcss.svg', | ||
}, | ||
{ | ||
name: 'Vite.js', | ||
label: 'View JS example', | ||
tsLabel: 'View TS example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-vite', | ||
src: '/static/images/examples/vite.svg', | ||
}, | ||
{ | ||
name: 'styled-components', | ||
label: 'View JS example', | ||
tsLabel: 'View TS example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components', | ||
tsLink: | ||
'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts', | ||
src: '/static/images/examples/styled.png', | ||
}, | ||
{ | ||
name: 'Gatsby', | ||
label: 'View example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-gatsby', | ||
src: '/static/images/examples/gatsby.svg', | ||
}, | ||
{ | ||
name: 'Preact', | ||
label: 'View example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-preact', | ||
src: '/static/images/examples/preact.svg', | ||
}, | ||
{ | ||
name: 'CDN', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-via-cdn', | ||
label: 'View example', | ||
}, | ||
{ | ||
name: 'Express.js (server-rendered)', | ||
label: 'View example', | ||
link: 'https://github.com/mui/material-ui/tree/master/examples/material-express-ssr', | ||
src: '/static/images/examples/express.png', | ||
}, | ||
]; | ||
|
||
export default function ExampleCollection() { | ||
return ( | ||
<Grid container spacing={2}> | ||
{examples.map((example) => ( | ||
<Grid key={example.name} item xs={12} sm={6}> | ||
<Card | ||
sx={[ | ||
(theme) => ({ | ||
p: 2, | ||
display: 'flex', | ||
alignItems: 'center', | ||
gap: 2, | ||
bgcolor: theme.palette.mode === 'dark' ? 'transparent' : '#fff', | ||
backgroundImage: 'none', | ||
borderRadius: 2, | ||
border: '1px solid', | ||
borderColor: theme.palette.mode === 'dark' ? '#132F4C' : 'grey.200', | ||
boxShadow: 'none', | ||
|
||
'&:hover': { | ||
borderColor: | ||
theme.palette.mode === 'dark' ? '#173A5E' : 'grey.300', | ||
boxShadow: | ||
theme.palette.mode === 'dark' | ||
? '0px 2px 8px rgba(0, 13, 26, 1)' | ||
: '0px 2px 8px rgba(170, 180, 190, 0.2)', | ||
}, | ||
}), | ||
]} | ||
> | ||
<Avatar | ||
imgProps={{ | ||
width: '40', | ||
height: '40', | ||
loading: 'lazy', | ||
}} | ||
src={example.src} | ||
alt={example.name} | ||
/> | ||
<span> | ||
<Typography | ||
variant="body" | ||
fontWeight={600} | ||
sx={{ fontFamily: 'IBM Plex Sans' }} | ||
> | ||
{example.name} | ||
</Typography> | ||
<Stack | ||
direction={{ xs: 'column', sm: 'row' }} | ||
alignItems={{ xs: 'start', sm: 'center' }} | ||
> | ||
<Link | ||
href={example.link} | ||
variant="body2" | ||
sx={{ | ||
fontFamily: 'IBM Plex Sans', | ||
fontWeight: 500, | ||
display: 'flex', | ||
alignItems: 'center', | ||
mt: 0.5, | ||
}} | ||
> | ||
{example.label} | ||
<ChevronRightRoundedIcon fontSize="small" /> | ||
</Link> | ||
{example.tsLink ? ( | ||
<Stack | ||
direction="row" | ||
spacing={{ xs: 0, sm: 1 }} | ||
alignItems="center" | ||
> | ||
<Typography | ||
variant="caption" | ||
sx={{ | ||
fontFamily: 'IBM Plex Sans', | ||
display: { xs: 'none', sm: 'block' }, | ||
opacity: 0.2, | ||
}} | ||
> | ||
/ | ||
</Typography> | ||
<Link | ||
href={example.tsLink} | ||
variant="body2" | ||
sx={{ | ||
fontFamily: 'IBM Plex Sans', | ||
fontWeight: 500, | ||
display: 'flex', | ||
alignItems: 'center', | ||
}} | ||
> | ||
{example.tsLabel} | ||
<ChevronRightRoundedIcon fontSize="small" /> | ||
</Link> | ||
</Stack> | ||
) : null} | ||
</Stack> | ||
</span> | ||
</Card> | ||
</Grid> | ||
))} | ||
</Grid> | ||
); | ||
} |
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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For some reason, using
primaryDark
, or even justprimary
was not working. Had to fall back to using plain hex codes 😭There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's because the
ExampleCollection.js
is considered a demo so it could not access the branding theme.To be able to use branding theme, I switch from
demo
tocomponent
in the markdown file:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, that makes a ton of sense, thank you! Is that documented somewhere? 😅