@mui/material#CardActions TypeScript Examples
The following examples show how to use
@mui/material#CardActions.
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: Home.tsx From mui-toolpad with MIT License | 6 votes |
|
function AppCard({ app, onDelete }: AppCardProps) {
return (
<Card sx={{ gridColumn: 'span 1' }}>
<CardActionArea component="a" href={app ? `/deploy/${app.id}` : ''} disabled={!app}>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{app ? app.name : <Skeleton />}
</Typography>
<Typography variant="body2" color="text.secondary">
{app ? `Created: ${app.createdAt.toLocaleDateString('short')}` : <Skeleton />}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button component="a" href={app ? `/_toolpad/app/${app.id}/editor` : ''} disabled={!app}>
Edit
</Button>
<Button disabled={!app} onClick={onDelete}>
delete
</Button>
</CardActions>
</Card>
);
}
Example #2
| Source File: MemberCard.tsx From frontend with MIT License | 6 votes |
|
export default function MemberCard({ info }: MemberCardProps) {
const { t } = useTranslation()
return (
<Card sx={{ backgroundColor: theme.palette.secondary.light }}>
<Box
m="auto"
width={200}
height={200}
display="flex"
alignItems="center"
justifyContent="center">
<Avatar src={info.img} sx={{ width: 150, height: 150 }} />
</Box>
<CardContent sx={{ paddingX: theme.spacing(1) }}>
<Typography gutterBottom variant="h6" component="div" align="center">
{info.title}
</Typography>
<Typography variant="subtitle1" align="center">
{info.content}
</Typography>
</CardContent>
<CardActions style={{ justifyContent: 'center' }}>
<Button
size="small"
variant="text"
style={{ color: 'black' }}
href={staticUrls.blog + info.blogLink}>
{t('common:cta.read-more')}
</Button>
<DoubleArrowIcon fontSize="inherit" />
</CardActions>
</Card>
)
}
Example #3
| Source File: item-card.tsx From sdk with MIT License | 6 votes |
|
export function ItemCard({ item }: IItemCardProps) {
return (
<Card sx={{ width: 200 }}>
<CardHeader
sx={{
display: "flex",
overflow: "hidden",
"& .MuiCardHeader-content": {
overflow: "hidden"
}
}}
title={<Typography noWrap gutterBottom variant="h6" component="h4">
{item.meta ? item.meta.name : "No metadata"}
</Typography>}
/>
<ItemMedia url={getMetaImageUrl(item.meta?.content)}/>
<CardContent>
<Typography variant="body2" color="text.secondary" sx={{ textAlign: "right" }}>
<strong>Supply: {item.supply}</strong>
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
component={Link}
to={`/sell/${item.id}`}
>
Sell
</Button>
{/*<Button size="small" color={"warning"}>Burn</Button>*/}
</CardActions>
</Card>
)
}
Example #4
| 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 #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: FireCMSHomePage.tsx From firecms with MIT License | 4 votes |
|
/**
* Default entry view for the CMS under the path "/"
* This components takes navigation as an input and renders cards
* for each entry, including title and description.
* @constructor
* @category Components
*/
export function FireCMSHomePage() {
const classes = useStyles();
const navigationContext = useNavigation();
if (!navigationContext.navigation)
return <></>;
const {
navigationEntries,
groups
} = computeTopNavigation(navigationContext, false);
const allGroups: Array<string | null> = [...groups];
if (navigationEntries.filter(e => !e.group).length > 0) {
allGroups.push(null);
}
function buildNavigationCard(entry: TopNavigationEntry) {
return (
<Grid item xs={12}
sm={6}
md={4}
key={`nav_${entry.group}_${entry.name}`}>
<Paper variant={"outlined"}>
<CardActionArea
className={classes.card}
component={ReactLink}
to={entry.url}>
<CardContent
className={classes.flexGrow}>
<PlaylistPlayIcon color={"disabled"}/>
<Typography gutterBottom variant="h5"
component="h2">
{entry.name}
</Typography>
{entry.description && <Typography variant="body2"
color="textSecondary"
component="div">
<Markdown source={entry.description}/>
</Typography>}
</CardContent>
<CardActions style={{ alignSelf: "flex-end" }}>
<Box p={1}>
<ArrowForwardIcon color="primary"/>
</Box>
</CardActions>
</CardActionArea>
</Paper>
</Grid>
);
}
return (
<Container>
{allGroups.map((group, index) => (
<Box mt={6} mb={6} key={`group_${index}`}>
{allGroups.length > 0 && <>
<Typography color={"textSecondary"}
className={"weight-500"}>
{group?.toUpperCase() ?? "Collections".toUpperCase()}
</Typography>
<Divider/>
</>}
<Box mt={2}>
<Grid container spacing={2}>
{group && navigationEntries
.filter((entry) => entry.group === group)
.map((entry) => buildNavigationCard(entry))
}
{!group && navigationEntries
.filter((entry) => !entry.group)
.map((entry) => buildNavigationCard(entry))
}
</Grid>
</Box>
</Box>
))}
</Container>
);
}
Example #7
| Source File: MenuItem.tsx From Cromwell with MIT License | 4 votes |
|
Item = (props: {
data: TMainMenuItem;
itemProps?: {
items: TMainMenuItem[];
canReorder: boolean;
refreshList: () => void;
}
}) => {
const { refreshList, items, canReorder } = props.itemProps ?? {};
const item = props.data;
const forceUpdate = useForceUpdate();
const classes = useStyles();
const [_expanded, setExpanded] = React.useState(false);
const expanded = _expanded && !canReorder;
if (!item) return null;
const handleExpandClick = () => {
if (canReorder) return;
setExpanded(!_expanded);
};
const handleChange = (prop: keyof TMainMenuItem, val: string) => {
(item as any)[prop] = val;
forceUpdate();
}
const handleRemove = (event) => {
event.stopPropagation();
if (items) {
items.splice(items.indexOf(item), 1);
refreshList?.();
}
}
return (
<div className={`${classes.card} PluginMainMenu-paper`}>
<CardActionArea
className={classes.cardHeader}
onClick={handleExpandClick}
>
<p className={classes.cardTitle}>{item.title}</p>
<CardActions disableSpacing className={classes.cardActions}>
{!canReorder && (
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded,
})}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
)}
<IconButton onClick={handleRemove}>
<HighlightOffIcon />
</IconButton>
</CardActions>
</CardActionArea>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<div className={classes.cardContent}>
<TextField label="Title" variant="outlined"
value={item.title}
className={classes.field}
onChange={(e) => { handleChange('title', e.target.value) }}
/>
<TextField label="Link" variant="outlined"
value={item.href}
className={classes.field}
onChange={(e) => { handleChange('href', e.target.value) }}
/>
<TextField label="Columns" variant="outlined"
value={item.sublinkCols}
className={classes.field}
onChange={(e) => { handleChange('sublinkCols', e.target.value) }}
/>
<TextField label="Width in px" variant="outlined"
value={item.width}
className={classes.field}
onChange={(e) => { handleChange('width', e.target.value) }}
/>
<TextField
value={item.html}
label="Custom HTML"
multiline
rows={4}
variant="outlined"
className={classes.field}
onChange={(e) => { handleChange('html', e.target.value) }}
/>
<div className={classes.sublinksList}>
<h3 className={classes.sublinksTitle}>Sublinks</h3>
{item.sublinks && item.sublinks.map((sl, slIndex) => {
return (
<div className={`${classes.sublinkItem} PluginMainMenu-paper`} >
<TextField label="Sublink title" variant="outlined"
value={sl.title}
className={classes.subField}
onChange={(e) => { if (item.sublinks) item.sublinks[slIndex].title = e.target.value; forceUpdate(); }}
/>
<TextField label="Sublink href" variant="outlined"
value={sl.href}
className={classes.subField}
onChange={(e) => { if (item.sublinks) item.sublinks[slIndex].href = e.target.value; forceUpdate(); }}
/>
<IconButton onClick={(e) => {
e.stopPropagation();
if (item.sublinks) item.sublinks.splice(slIndex, 1);
refreshList?.();
}}>
<HighlightOffIcon />
</IconButton>
</div>
)
})}
<div className={`PluginMainMenu-paper ${classes.card}`}>
<MenuItem
className={classes.addBtn}
onClick={() => {
if (!item.sublinks) item.sublinks = [];
item.sublinks.push({});
forceUpdate();
}}>
<AddIcon />
</MenuItem>
</div>
</div>
</div>
</Collapse>
</div>
)
}
Example #8
| Source File: ThemeList.tsx From Cromwell with MIT License | 4 votes |
|
render() {
const { isLoading, packages, installedThemes, cmsConfig, isChangingTheme } = this.state;
return (
<div className={styles.ThemeList} ref={this.pageRef}>
<Button
className={styles.addBtn}
onClick={this.handleOpenMarket}
variant="contained"
color="primary"
startIcon={<AddCircleOutlineIcon />}
>Add themes</Button>
{isLoading && (
<div className={styles.list}>
{Array(2).fill(1).map((it, index) => (
<Skeleton key={index} variant="rectangular" height="388px" width="300px" style={{ margin: '0 10px 20px 10px' }} > </Skeleton>
))}
</div>
)}
{!isLoading &&
<div className={styles.list}>
{packages.map(info => {
const isActive = Boolean(cmsConfig && cmsConfig.themeName === info.name);
const entity = installedThemes?.find(ent => ent.name === info.name);
const isInstalled = entity?.isInstalled ?? false;
const availableUpdate = this.themeUpdates[info.name];
const isUnderUpdate = this.themeUnderUpdate[info.name];
return (
<div className={`${styles.themeCard} ${commonStyles.paper}`} key={info.name}>
<CardActionArea
className={styles.cardActionArea}
style={{ opacity: isUnderUpdate ? 0.5 : 1 }}
>
<div
style={{ backgroundImage: `url("data:image/png;base64,${info.image}")` }}
className={styles.themeImage}
></div>
<CardContent className={styles.mainInfo}>
<Badge color="secondary" badgeContent={isActive ? 'Active' : null}>
<Typography gutterBottom variant="h5" component="h2" className={styles.themeTitle}>
{info.title}
</Typography>
</Badge>
<p className={styles.version}
onClick={this.handleShowUpdate(entity, info, availableUpdate)}
style={{ cursor: availableUpdate ? 'pointer' : 'initial' }}
>{(info?.version ?? '') +
(availableUpdate ? ' > ' + availableUpdate.version + ' Open info' : '')}</p>
<Typography variant="body2" color="textSecondary" component="p">
{info.excerpt}
</Typography>
</CardContent>
</CardActionArea>
<CardActions
style={{ opacity: isUnderUpdate ? 0.5 : 1 }}
className={styles.themeActions}
disableSpacing
>
{!isInstalled && (
<Button
disabled={isUnderUpdate || isChangingTheme}
size="small" color="primary" variant="contained"
onClick={this.handleActivateTheme(info.name)}
>Install theme</Button>
)}
{isInstalled && isActive && (
<Button
disabled={isUnderUpdate || isChangingTheme}
size="small" color="primary" variant="contained"
onClick={() => {
const route = `${themeEditPageInfo.baseRoute}`;
this.props.history.push(route);
}}
>
Edit theme
</Button>
)}
{availableUpdate && (
<Button
disabled={isUnderUpdate || isChangingTheme}
size="small" color="primary" variant="contained"
onClick={() => this.startUpdate(info)}
>Update</Button>
)}
{isInstalled && !isActive && (
<Button size="small" color="primary" variant="contained"
onClick={() => this.handleSetActiveTheme(info)}
disabled={isUnderUpdate || isChangingTheme}
>Set active</Button>
)}
<Button size="small" color="primary" variant="outlined"
disabled={isUnderUpdate || isChangingTheme}
onClick={() => this.handleDelete(info)}
>Delete</Button>
<Button size="small" color="primary" variant="outlined"
onClick={() => this.openTheme(info)}
>Info</Button>
{isUnderUpdate && (
<LinearProgress className={styles.updateProgress} />
)}
</CardActions>
</div>
)
})}
</div>}
<LoadingStatus isActive={isChangingTheme} />
{/* <ManagerLogger isActive={isChangingTheme} /> */}
<Modal
open={!!this.state.updateModalInfo}
onClose={() => this.setState({ updateModalInfo: null })}
className={commonStyles.center}
blurSelector="#root"
>
<UpdateModalContent
underUpdate={this.themeUnderUpdate}
{...(this.state?.updateModalInfo ?? {})}
onStartUpdate={this.startUpdate}
onClose={() => this.setState({ updateModalInfo: null })}
/>
</Modal>
<Modal
open={!!this.state.openedTheme}
blurSelector="#root"
className={commonStyles.center}
onClose={() => this.setState({ openedTheme: undefined })}
>
{this.state?.openedTheme && (
<MarketModal
installedModules={this.state?.installedThemes ?? []}
data={this.state.openedTheme}
noInstall
/>
)}
</Modal>
</div>
)
}
Example #9
| Source File: PlayerList.tsx From NekoMaid with MIT License | 4 votes |
|
PlayerInfo: React.FC<{ name?: string }> = React.memo(({ name }) => {
const plugin = usePlugin()
const globalData = useGlobalData()
const [open, setOpen] = useState(false)
const [info, setInfo] = useState<IPlayerInfo | undefined>()
const refresh = () => plugin.emit('playerList:query', setInfo, name)
useEffect(() => {
setInfo(undefined)
if (name) refresh()
}, [name])
return name && info
? <>
<Divider />
<List
sx={{ width: '100%' }}
component='nav'
subheader={<ListSubheader component='div' sx={{ backgroundColor: 'inherit' }}>{lang.playerList.details}</ListSubheader>}
>
<ListItem>
<ListItemIcon><AssignmentInd /></ListItemIcon>
<ListItemText primary={globalData.onlineMode
? <Link underline='hover' rel='noopener' target='_blank' href={'https://namemc.com/profile/' + info.id}>{info.id}</Link>
: info.id
} />
</ListItem>
{!info.hasPlayedBefore && <ListItem>
<ListItemIcon><ErrorOutline color='error' /></ListItemIcon>
<ListItemText primary={lang.playerList.hasNotPlayed} />
</ListItem>}
{info.ban != null && <ListItem>
<ListItemIcon><Block color='error' /></ListItemIcon>
<ListItemText primary={lang.playerList.banned + (info.ban ? ': ' + info.ban : '')} />
</ListItem>}
{info.whitelisted && <ListItem>
<ListItemIcon><Star color='warning' /></ListItemIcon>
<ListItemText primary={lang.playerList.whitelisted} />
</ListItem>}
{info.isOP && <ListItem>
<ListItemIcon><Security color='primary' /></ListItemIcon>
<ListItemText primary={lang.playerList.op} />
</ListItem>}
{info.hasPlayedBefore && <>
<ListItemButton onClick={() => setOpen(!open)}>
<ListItemIcon><Equalizer /></ListItemIcon>
<ListItemText primary={minecraft['gui.stats']} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component='div' dense disablePadding>
{[
minecraft['stat.minecraft.play_time'] + ': ' + dayjs.duration(info.playTime / 20, 'seconds').humanize(),
lang.playerList.firstPlay + ': ' + dayjs(info.firstPlay).fromNow(),
lang.playerList.lastPlay + ': ' + dayjs(info.lastOnline).fromNow(),
minecraft['stat.minecraft.leave_game'] + ': ' + info.quit,
minecraft['stat.minecraft.deaths'] + ': ' + info.death,
minecraft['stat.minecraft.player_kills'] + ': ' + info.playerKill,
minecraft['stat.minecraft.mob_kills'] + ': ' + info.entityKill,
lang.playerList.tnt + ': ' + info.tnt
].map((it, i) => <ListItem key={i} sx={{ pl: 4 }}>
<ListItemIcon>{icons[i]}</ListItemIcon>
<ListItemText primary={it} />
</ListItem>)}
</List>
</Collapse>
</>}
</List>
<CardActions disableSpacing sx={{ justifyContent: 'flex-end' }}>
<Tooltip title={lang.playerList[info.whitelisted ? 'clickToRemoveWhitelist' : 'clickToAddWhitelist']}>
<IconButton onClick={() => whitelist(name, plugin, refresh, !info.whitelisted)}>
{info.whitelisted ? <Star color='warning' /> : <StarBorder />}
</IconButton>
</Tooltip>
<Tooltip title={lang.playerList[info.ban == null ? 'clickToBan' : 'clickToPardon']}>
<IconButton onClick={() => banPlayer(name, plugin, refresh, info.ban == null)}>
<Block color={info.ban == null ? undefined : 'error'} />
</IconButton>
</Tooltip>
</CardActions>
</>
: <></>
})
Example #10
| 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>
)
}
