77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { alpha } from '@mui/material/styles';
|
||
|
|
import Stack from '@mui/material/Stack';
|
||
|
|
import Card from '@mui/material/Card';
|
||
|
|
import CardMedia from '@mui/material/CardMedia';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
import Chip from '@mui/material/Chip';
|
||
|
|
import { Link } from '@mui/docs/Link';
|
||
|
|
|
||
|
|
interface ComponentShowcaseCardProps {
|
||
|
|
imgLoading?: 'eager';
|
||
|
|
link: string;
|
||
|
|
md1?: React.ReactNode;
|
||
|
|
md2?: React.ReactNode;
|
||
|
|
md3?: React.ReactNode;
|
||
|
|
name: string;
|
||
|
|
noGuidelines?: React.ReactNode;
|
||
|
|
srcDark: string;
|
||
|
|
srcLight: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ComponentShowcaseCard(props: ComponentShowcaseCardProps) {
|
||
|
|
const { link, srcLight, srcDark, name, md1, md2, md3, noGuidelines, imgLoading = 'lazy' } = props;
|
||
|
|
// Fix overloading with prefetch={false}, only prefetch on hover.
|
||
|
|
return (
|
||
|
|
<Card
|
||
|
|
component={Link}
|
||
|
|
noLinkStyle
|
||
|
|
prefetch={false}
|
||
|
|
variant="outlined"
|
||
|
|
href={link}
|
||
|
|
sx={(theme) => ({
|
||
|
|
height: '100%',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
borderRadius: 1,
|
||
|
|
borderColor: 'divider',
|
||
|
|
...theme.applyDarkStyles({
|
||
|
|
backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.1)}`,
|
||
|
|
borderColor: 'primaryDark.700',
|
||
|
|
}),
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
<CardMedia
|
||
|
|
component="img"
|
||
|
|
alt=""
|
||
|
|
loading={imgLoading}
|
||
|
|
image={srcLight}
|
||
|
|
sx={(theme) => ({
|
||
|
|
aspectRatio: '16 / 9',
|
||
|
|
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
|
||
|
|
borderBottom: '1px solid',
|
||
|
|
borderColor: 'divider',
|
||
|
|
...theme.applyDarkStyles({
|
||
|
|
content: `url(${srcDark})`,
|
||
|
|
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
|
||
|
|
borderColor: 'primaryDark.700',
|
||
|
|
}),
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Stack direction="row" sx={{ justifyContent: 'space-between', px: 2, py: 1.5 }}>
|
||
|
|
<Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
|
||
|
|
{name}
|
||
|
|
</Typography>
|
||
|
|
<Stack direction="row" spacing={0.5} useFlexGap>
|
||
|
|
{md1 && <Chip label="MD1" size="small" variant="outlined" color="primary" />}
|
||
|
|
{md2 && <Chip label="MD2" size="small" variant="outlined" color="primary" />}
|
||
|
|
{md3 && <Chip label="MD3" size="small" variant="outlined" color="success" />}
|
||
|
|
{noGuidelines && (
|
||
|
|
<Chip label="No guidelines" size="small" variant="outlined" color="info" />
|
||
|
|
)}
|
||
|
|
</Stack>
|
||
|
|
</Stack>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|