@mui/material#CardMedia TypeScript Examples
The following examples show how to use
@mui/material#CardMedia.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: UrlComponentPreview.tsx From firecms with MIT License | 9 votes |
|
/**
* @category Preview components
*/
export function UrlComponentPreview({
value,
property,
size
}: PreviewComponentProps<string>): React.ReactElement {
const classes = useStyles();
if (!value) return <div/>;
const url = value;
if (typeof property.config?.url === "boolean" && property.config.url) {
return (
<Link className={classes.link}
href={url}
onMouseDown={(e: React.MouseEvent) => {
e.preventDefault();
}}
target="_blank">
<OpenInNewIcon style={{ marginRight: 8 }} fontSize={"small"}/>
{url}
</Link>
);
}
const mediaType: MediaType = property.config?.url as MediaType ||
property.config?.storageMeta?.mediaType;
if (mediaType === "image") {
return <ImagePreview key={`image_preview_${url}_${size}`}
url={url}
size={size}/>;
} else if (mediaType === "audio") {
return <audio controls
src={url}
key={`audio_preview_${url}_${size}`}>
Your browser does not support the
<code>audio</code> element.
</audio>;
} else if (mediaType === "video") {
return <CardMedia
key={`video_preview_${url}_${size}`}
style={{ maxWidth: size === "small" ? 300 : 500 }}
component="video"
controls
image={url}
/>;
} else {
return <a
key={`link_preview_${url}_${size}`}
href={url}
rel="noopener noreferrer"
target="_blank"
onClick={(e) => e.stopPropagation()}>
<div className={classes.flexCenter}
style={{
width: getThumbnailMeasure(size),
height: getThumbnailMeasure(size)
}}>
<DescriptionOutlinedIcon/>
</div>
</a>;
}
}
Example #2
| Source File: item-card.tsx From sdk with MIT License | 6 votes |
|
function ItemMedia({ url }: { url: string | null }) {
if (!url) {
return <Box
display="flex"
justifyContent="center"
alignItems="center"
sx={{ height: 194 }}
>
<Typography variant="body2" color="text.secondary" sx={{ textAlign: "center" }}>
<strong>No media provided</strong>
</Typography>
</Box>
}
return <CardMedia
component="img"
image={url}
sx={{
height: 194,
objectFit: "contain",
}}
/>
}
Example #3
| Source File: VehCard.tsx From mojito_pdm with Creative Commons Attribution Share Alike 4.0 International | 5 votes |
|
VehCard: React.FC<Car> = ({
name,
brand,
description,
brandLogo,
image,
price,
category,
spawncode,
trunkspace,
performance
}) => {
const theme = useTheme();
const [open, setOpen] = useState(false)
const testDrive = async () => {
await fetchNui("test_drive", {vehicle: spawncode})
}
// Functions
const handleOpen = () => setOpen(true)
const handleClose = () => setOpen(false)
return (
<Card sx={{
boxShadow: theme.shadows[3],
margin: theme.spacing(2)
}} variant="outlined">
<CardHeader
avatar={<img height={40} style={{maxWidth: 100, maxHeight: 40}} src={brandLogo} alt={brand}/>}
title={name}
subheader={category}
/>
<CardMedia style={{height: "150px"}} image={image}/>
<CardActions>
<Tooltip TransitionComponent={Zoom} sx={{maxWidth: 120}} arrow title="Test drive this vehicle">
<Button
size="small"
variant={theme.palette.mode === "dark" ? "contained" : "outlined"}
color="primary"
startIcon={<DirectionsCarIcon/>}
onClick={testDrive}
disableElevation
>
TEST DRIVE
</Button>
</Tooltip>
<Tooltip TransitionComponent={Zoom} arrow sx={{maxWidth: 120}}
title="View more information about this vehicle">
<Button
size="small"
variant={theme.palette.mode === "dark" ? "contained" : "outlined"}
color="primary"
startIcon={<AssignmentIcon/>}
onClick={handleOpen}
disableElevation
>
MORE INFO
</Button>
</Tooltip>
<Modal
open={open}
onClose={handleClose}
>
{<ModalBody
name={name}
brand={brand}
description={description}
price={price}
trunkspace={trunkspace}
setOpen={setOpen}
performance={performance}
spawncode={spawncode}
/>}
</Modal>
</CardActions>
</Card>
)
}
Example #4
| Source File: TemplateCard.tsx From fluttertemplates.dev with MIT License | 5 votes |
|
export default function TemplateCard(props: TemplateCardProps) {
return (
<Grid item md={3} xs={12} sm={6}>
<Link href={`/templates/${props.id}`} passHref>
<a>
<Card elevation={0}>
<CardMedia
image={props.frontmatter.image}
title={props.frontmatter.title.toString()}
style={{
height: "9rem",
}}
/>
<Typography
gutterBottom
variant="h6"
style={{
fontSize: "1rem",
margin: "10px",
}}
>
{props.frontmatter.title}
</Typography>
{/* <div
className="categories-list"
style={{
marginLeft: "8px",
}}
>
{props.frontmatter.categories.map((category) => (
<Chip
label={category}
style={{
marginRight: "4px",
}}
/>
))}
</div> */}
</Card>
</a>
</Link>
</Grid>
);
}
Example #5
| Source File: CampaignCard.tsx From frontend with MIT License | 5 votes |
|
export default function CampaignCard({ campaign }: Props) {
const { t } = useTranslation()
const target = campaign.targetAmount
const summary = campaign.summary.find(() => true)
const pictureUrl = campaignListPictureUrl(campaign)
const reached = summary ? summary.reachedAmount : 0
return (
<StyledCard variant="outlined" className={classes.cardWrapper}>
<CardActionArea>
<Link href={routes.campaigns.viewCampaignBySlug(campaign.slug)}>
<CardMedia
className={classes.media}
image={pictureUrl}
title="campaign image placeholder"
/>
</Link>
<CardContent className={classes.cardContent}>
<Typography textAlign={'left'} gutterBottom variant="h5" component="h2">
{campaign.title}
</Typography>
<Typography textAlign={'left'} variant="body2" color="textSecondary" component="p">
{campaign.essence}
</Typography>
</CardContent>
</CardActionArea>
<CardActions className={classes.cardActions}>
<Grid container justifyContent="space-around">
<Box p={2} width={1}>
<CampaignProgress raised={reached} target={target} />
</Box>
<Typography variant="subtitle1" component="p" className={classes.progressBar}>
{t('campaigns:campaign.reached')} <b>{money(reached)}</b> /{' '}
{t('campaigns:campaign.target')} <b>{money(target)}</b>
</Typography>
<Grid item xs={12}>
<Box mx={2} mb={2}>
<LinkButton
fullWidth
href={routes.campaigns.oneTimeDonation(campaign.slug)}
variant="contained"
color="secondary"
endIcon={<Favorite color="error" />}>
{t('campaigns:cta.support-now')}
</LinkButton>
</Box>
<Box mx={2} mb={2}>
<LinkButton
fullWidth
href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
variant="outlined"
endIcon={<ArrowForwardIosIcon />}>
{t('campaigns:cta.see-more')}
</LinkButton>
</Box>
</Grid>
</Grid>
</CardActions>
</StyledCard>
)
}
Example #6
| Source File: DonationTab.tsx From frontend with MIT License | 4 votes |
|
export default function DonationTab() {
const router = useRouter()
const { t } = useTranslation()
const matches = useMediaQuery(theme.breakpoints.down('md'))
const { data: user } = getCurrentPerson(!!router.query?.register)
if (router.query?.register) {
delete router.query.register
router.replace({ pathname: router.pathname, query: router.query }, undefined, { shallow: true })
}
const { data: userDonations, isLoading: isUserDonationLoading } = useUserDonations()
const { data: campaigns, isLoading: isCampaignLoading } = useCampaignList()
return (
<StyledProfileTab name={ProfileTabs.donations}>
<Typography className={classes.h1}>{user?.user ? user.user.firstName + ',' : ''}</Typography>
<Typography variant="h5" fontWeight={'medium'}>
{t('profile:donations.helpThanks')} ❤️
</Typography>
<Grid
container
spacing={theme.spacing(2)}
marginTop={theme.spacing(1)}
alignItems={'flex-end'}>
<Grid order={matches ? 3 : 1} item xs={12} md={4}>
<Card>
{!isCampaignLoading && campaigns ? (
<CardActionArea>
<CardMedia
component="img"
height="193"
image={campaignListPictureUrl(campaigns[0])}
alt={campaigns[0].title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{campaigns[0].title}
</Typography>
<Typography variant="body2" color="text.secondary">
{truncate(campaigns[0].description, { length: 120 })}
</Typography>
</CardContent>
</CardActionArea>
) : (
<CircularProgress />
)}
<CardActions>
<Button variant="contained" size="medium" color="secondary">
{t('profile:donations.donateNow')} ❤️
</Button>
</CardActions>
</Card>
</Grid>
<Grid order={matches ? 1 : 2} item xs={12} md={8}>
{!isUserDonationLoading && userDonations ? (
<Card className={classes.donationsBox}>
<Box className={classes.donationsBoxRow}>
<Typography fontWeight="medium" variant="h5">
{t('profile:donations.totalDonations')}
</Typography>
<Typography fontWeight="medium" variant="h5">
{money(userDonations.total)}
</Typography>
</Box>
<Box className={classes.donationsBoxRow}>
<Box>
<Typography variant="h5">{t('profile:donations.recurringDonations')}</Typography>
{/* TODO: Use date-fns to format and localize the months,
that the user has recurring donations when that is possible */}
{/* <Typography>Я, Ф, М, А 2022</Typography> */}
</Box>
<Typography fontWeight="medium" variant="h5">
{money(sumBy(userDonations.donations, 'amount'))}
</Typography>
</Box>
<Box className={classes.donationsBoxRow}>
<Typography variant="h5">{t('profile:donations.cardDonations')}</Typography>
<Typography fontWeight="medium" variant="h5">
{money(userDonations.total)}
</Typography>
</Box>
<Box className={classes.donationsBoxRow}>
<Typography variant="h5">{t('profile:donations.bankDonations')}</Typography>
<Typography fontWeight="medium" variant="h5">
{money(userDonations.total)}
</Typography>
</Box>
</Card>
) : (
<CircularProgress />
)}
</Grid>
<Grid order={matches ? 2 : 3} item xs={12}>
<DonationTable donations={userDonations?.donations} />
</Grid>
</Grid>
</StyledProfileTab>
)
}
