@material-ui/core#Avatar TypeScript Examples
The following examples show how to use
@material-ui/core#Avatar.
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: ConnectWallet.tsx From homebase-app with MIT License | 6 votes |
|
ConnectWallet: React.FC = () => {
const { connect } = useTezos();
return (
<PageContainer container justify="flex-start" alignItems="center">
<Grid item>
<SpacingTitle align="left" variant="h3" color="textSecondary">
Connect your wallet
</SpacingTitle>
<SpacingTitle align="left" variant="subtitle1" color="textSecondary">
Create an organization by picking a template below
</SpacingTitle>
<Box>
<List>
<ListItem button={true} onClick={() => connect()}>
<ListItemAvatar>
<Avatar>
<ImageIcon />
</Avatar>
</ListItemAvatar>
<ListItemText>
<Typography variant="subtitle1" color="textSecondary">
{" "}
Connect
</Typography>{" "}
</ListItemText>
</ListItem>
</List>
</Box>
</Grid>
</PageContainer>
);
}
Example #2
| Source File: ControlsSyncProfileGoogle.tsx From Teyvat.moe with GNU General Public License v3.0 | 6 votes |
|
_ControlsSyncProfileGoogle: FunctionComponent<ControlsSyncProfileGoogleProps> = ({
googleAuthProfile,
}) => {
const classes = useStyles();
// Don't display if not logged in.
if (googleAuthProfile == null) return null;
return (
<Box display="flex" flexDirection="column">
<Box display="flex" flexDirection="row">
<Avatar alt={googleAuthProfile.name} src={googleAuthProfile.imageUrl} />
<Box display="flex" className={classes.profileWelcome} flexDirection="column">
<Typography variant="h5">
{f('map-ui:welcome-format', { user: googleAuthProfile.givenName })}
</Typography>
<Typography variant="subtitle2">{googleAuthProfile.email}</Typography>
</Box>
</Box>
<Box display="flex" flexDirection="row">
<Typography className={classes.centerVertical} variant="body2">
{t('map-ui:google-login-success')}
</Typography>
<Tooltip title={t('core:sign-out')}>
<IconButton className={classes.logoutButton} onClick={attemptGoogleSignOut}>
<LogoutIcon />
</IconButton>
</Tooltip>
</Box>
</Box>
);
}
Example #3
| Source File: index.tsx From react-app-architecture with Apache License 2.0 | 6 votes |
|
AuthorView = ({ author, date }: { author: Author; date?: string }) => {
const classes = useStyles();
return (
<div className={classes.author}>
{author.profilePicUrl ? (
<CardHeader
avatar={<Avatar aria-label={author.name} src={author.profilePicUrl} />}
title={author.name}
subheader={date ? convertToReadableDate(date) : ''}
/>
) : (
<CardHeader
avatar={<FirstLetter text={author.name} />}
title={author.name}
subheader={date ? convertToReadableDate(date) : ''}
/>
)}
</div>
);
}
Example #4
| Source File: CITable.tsx From backstage with Apache License 2.0 | 6 votes |
|
SourceInfo = ({ build }: { build: CITableBuildInfo }) => {
const classes = useStyles();
const { user, source } = build;
return (
<Box display="flex" alignItems="center" className={classes.root}>
<Avatar alt={user.name} src={user.avatarUrl} className={classes.small} />
<Box>
<Typography variant="button">{source?.branchName}</Typography>
<Typography variant="body1">
{source?.commit?.url !== undefined ? (
<Link to={source?.commit?.url}>{source?.commit.shortHash}</Link>
) : (
source?.commit.shortHash
)}
</Typography>
</Box>
</Box>
);
}
Example #5
| Source File: with-basic-usage.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withBasicUsage = (): StoryFnReactReturnType => {
const value = text('Avatar.value', 'AB');
const avatar = <Avatar>{value}</Avatar>;
return (
<UserMenu
avatar={avatar}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
},
]}
onOpen={action('open')}
onClose={action('close')}
/>
);
}
Example #6
| Source File: ProfileCard.tsx From backstage with Apache License 2.0 | 6 votes |
|
ProfileCard = (props: Props) => {
const [selection, setSelection] = useState(false);
const handleSelect = () => {
props.onClick(props.index, props.repository);
setSelection(props.selections.has(props.index));
};
const classes = useStyles();
return (
<Card className={classes.root}>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
{props.shortName}
</Avatar>
}
action={<IconButton aria-label="settings" />}
title={props.title}
subheader={props.repository.replace('https://github.com/', '')}
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
{props.description}
</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="select" onClick={handleSelect}>
{selection ? (
<CheckBoxIcon color="primary" />
) : (
<CheckBoxOutlineBlankIcon />
)}
</IconButton>
</CardActions>
</Card>
);
}
Example #7
| Source File: ReviewListItem.tsx From ra-enterprise-demo with MIT License | 6 votes |
|
ReviewListItem: FC<any> = props => {
const { data, onClick } = props;
const classes = useStyles();
const { content } = data;
if (!content) {
return null;
}
return (
<ListItem
button
component={SearchListItemLink}
data={data}
onClick={onClick}
alignItems="flex-start"
>
<ListItemAvatar className={classes.avatar}>
<Avatar alt={content.reference}>
<CommentIcon fontSize="large" />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={<Rating value={content.rating} readOnly />}
secondary={<ReviewComment comment={content.comment} />}
// @ts-ignore Could not make TS happy
secondaryTypographyProps={secondaryTypographyProps}
/>
</ListItem>
);
}
Example #8
| Source File: AvatarOption.tsx From knboard with MIT License | 6 votes |
|
AvatarOption = ({ option }: Props) => {
return (
<>
<Avatar
css={css`
height: 1.5rem;
width: 1.5rem;
`}
alt={option.avatar?.name}
src={option.avatar?.photo}
/>
<Username>{option.username}</Username>
</>
);
}
Example #9
| Source File: UserAvatar.tsx From rusty-chat with MIT License | 6 votes |
|
UserAvatar: React.FC<UserAvatarProps> = ({ user }: UserAvatarProps) => {
// Credit: https://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
let hash = 0, i, chr;
for (i = 0; i < user.name.length; i++) {
chr = user.name.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0;
}
const background = chroma.hsl(Math.abs(hash) % 360, 0.7, 0.6).hex().substr(1);
return (
<Avatar alt={user.name}
src={`https://eu.ui-avatars.com/api/?name=${user.name}&size=128&color=ffffff&background=${background}`}/>
);
}
Example #10
| Source File: Profile.tsx From knests with MIT License | 6 votes |
|
Profile = (props) => {
const { className, ...rest } = props;
const classes = useStyles();
const user = {
name: 'Shen Zhi',
avatar: '/images/avatars/avatar_11.png',
bio: 'Brain Director',
};
return (
<div
{...rest}
className={clsx(classes.root, className)}
>
<Link href="/settings">
<Avatar
alt="Person"
className={classes.avatar}
src={user.avatar}
/>
</Link>
<Typography
className={classes.name}
variant="h4"
>
{user.name}
</Typography>
<Typography variant="body2">{user.bio}</Typography>
</div>
);
}
Example #11
| Source File: Summary.tsx From UsTaxes with GNU Affero General Public License v3.0 | 6 votes |
|
BinaryStateListItem = ({
active,
children
}: BinaryStateListItemProps): ReactElement => {
return (
<Grid container spacing={3}>
<Grid item style={{ margin: 'auto' }}>
<Avatar>
{active ? (
<Check titleAccess="Eligible" />
) : (
<Close titleAccess="Ineligible" />
)}
</Avatar>
</Grid>
<Grid item xs zeroMinWidth>
{children}
</Grid>
</Grid>
)
}
Example #12
| Source File: MessageDialg.tsx From flect-chime-sdk-demo with Apache License 2.0 | 6 votes |
|
MessageDialog = () => {
const { messageState, resolveMessage } = useAppState();
const classes = useStyles();
return (
<>
{messageState.messageActive && (
<>
<Dialog open={messageState.messageActive} onClose={resolveMessage}>
{messageState.messageType === "Info" ? (
<Avatar className={classes.avatarForInformation}>
<Info />
</Avatar>
) : (
<Avatar className={classes.avatarForException}>
<ErrorOutline />
</Avatar>
)}
<DialogTitle>{messageState.messageTitle}</DialogTitle>
<DialogContent>
{messageState.messageDetail.map((d, i) => {
return <DialogContentText key={i}>{d}</DialogContentText>;
})}
</DialogContent>
<DialogActions>
<Button onClick={resolveMessage} color="primary">
OK
</Button>
</DialogActions>
</Dialog>
</>
)}
</>
);
}
Example #13
| Source File: TransactionItem.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 6 votes |
|
SmallAvatar = withStyles((theme: Theme) =>
createStyles({
root: {
width: 22,
height: 22,
border: `2px solid ${theme.palette.background.paper}`,
},
})
)(Avatar)
Example #14
| Source File: TableCell.tsx From firetable with Apache License 2.0 | 6 votes |
|
export default function User({ value }: IHeavyCellProps) {
if (!value || !value.displayName || !value.timestamp) return null;
const dateLabel = format(
value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
DATE_TIME_FORMAT
);
return (
<Tooltip title={dateLabel}>
<Chip
avatar={<Avatar alt="Avatar" src={value.photoURL} />}
label={value.displayName}
/>
</Tooltip>
);
}
Example #15
| Source File: PlayersContainer.tsx From cards-against-formality-pwa with BSD 2-Clause "Simplified" License | 6 votes |
|
Player = ({ player, isHost, isCzar, onPlayerKick, isCurrentUserHost }: any) => {
function renderIcon() {
return <div style={!isCzar ? { opacity: 0 } : {}}>
<ListItemAvatar>
<Avatar>
<StyleIcon />
</Avatar>
</ListItemAvatar>
</div>
}
function renderKick() {
if (isHost || !isCurrentUserHost) {
return null;
}
return <ListItemSecondaryAction style={{ right: '-10px' }}>
<Button color="secondary" onClick={() => { onPlayerKick(player?._id) }}>Kick</Button>
</ListItemSecondaryAction>
}
return <ListItem>
{renderIcon()}
<ListItemText primary={player.username} secondary={`Score: ${!player?.score ? 0 : player.score}`} />
{renderKick()}
</ListItem>;
}
Example #16
| Source File: CommandListItem.tsx From ra-enterprise-demo with MIT License | 5 votes |
|
CommandListItem: FC<any> = props => {
const { data, onClick } = props;
const { content } = data;
const classes = useCommandListItemStyles();
const translate = useTranslate();
if (!content) {
return null;
}
return (
<ListItem
button
component={SearchListItemLink}
data={data}
onClick={onClick}
alignItems="flex-start"
>
<ListItemAvatar className={classes.avatar}>
<Avatar alt={content.reference}>
<ShoppingCartIcon fontSize="large" />
</Avatar>
</ListItemAvatar>
<Grid className={classes.root} container spacing={2}>
<Grid container item xs>
<Grid item xs={8}>
<Typography
variant="body1"
color="textPrimary"
gutterBottom
>
Ref. {content.reference}
</Typography>
</Grid>
<Grid item xs={4}>
<CommandStatus status={content.status} />
</Grid>
<Grid item xs={12}>
<Typography
variant="body2"
color="textPrimary"
gutterBottom
>
{new Date(content.date).toLocaleDateString()}
-
{`${content.customer.first_name} ${content.customer.last_name}`}
-
{`${translate(
'resources.commands.fields.basket.total'
)} ${content.total}`}
€
</Typography>
</Grid>
</Grid>
</Grid>
</ListItem>
);
}
Example #17
| Source File: TransactionItem.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 5 votes |
|
TransactionItem: React.FC<TransactionProps> = ({ transaction }) => {
const classes = useStyles();
const history = useHistory();
const showTransactionDetail = (transactionId: string) => {
history.push(`/transaction/${transactionId}`);
};
return (
<ListItem
data-test={`transaction-item-${transaction.id}`}
alignItems="flex-start"
onClick={() => showTransactionDetail(transaction.id)}
>
<Paper className={classes.paper} elevation={0}>
<Grid container spacing={2}>
<Grid item>
<ListItemAvatar>
<Badge
overlap="circle"
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
badgeContent={<SmallAvatar src={transaction.receiverAvatar} />}
>
<Avatar src={transaction.senderAvatar} />
</Badge>
</ListItemAvatar>
</Grid>
<Grid item xs={12} sm container>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs>
<TransactionTitle transaction={transaction} />
<Typography variant="body2" color="textSecondary" gutterBottom>
{transaction.description}
</Typography>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
spacing={1}
className={classes.socialStats}
>
<Grid item>
<LikeIcon className={classes.countIcons} />
</Grid>
<Grid item>
<Typography data-test="transaction-like-count" className={classes.countText}>
{transaction.likes.length}
</Typography>
</Grid>
<Grid item>
<CommentIcon className={classes.countIcons} />
</Grid>
<Grid item>
<Typography data-test="transaction-comment-count" className={classes.countText}>
{transaction.comments.length}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<TransactionAmount transaction={transaction} />
</Grid>
</Grid>
</Grid>
</Paper>
</ListItem>
);
}
Example #18
| Source File: with-menu-placement-options.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withMenuPlacementOptions = (): StoryFnReactReturnType => {
const anchorOriginHorizontal = select(
'MenuProps.anchorOrigin.horizontal',
['left', 'center', 'right'],
'left',
'Menu'
);
const anchorOriginVertical = select('MenuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');
const transformOriginHorizontal = select(
'MenuProps.transformOrigin.horizontal',
['left', 'center', 'right'],
'left',
'Menu'
);
const transformOriginVertical = select(
'MenuProps.transformOrigin.vertical',
['top', 'center', 'bottom'],
'top',
'Menu'
);
return (
<UserMenu
avatar={<Avatar>CD</Avatar>}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
},
]}
MenuProps={{
anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },
transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },
}}
onOpen={action('open')}
onClose={action('close')}
/>
);
}
Example #19
| Source File: SideDrawerField.tsx From firetable with Apache License 2.0 | 5 votes |
|
export default function User({ control, column }: ISideDrawerFieldProps) {
const classes = useStyles();
const fieldClasses = useFieldStyles();
return (
<Controller
control={control}
name={column.key}
render={({ value }) => {
if (!value || !value.displayName || !value.timestamp)
return <div className={fieldClasses.root} />;
const dateLabel = format(
value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
DATE_TIME_FORMAT
);
return (
<Grid
container
alignItems="center"
className={clsx(fieldClasses.root, classes.labelContainer)}
>
<Grid item>
<Avatar
alt="Avatar"
src={value.photoURL}
className={classes.avatar}
/>
</Grid>
<Grid item>
<Typography variant="body2">
{value.displayName} ({value.email})
</Typography>
<Typography variant="body2" color="textSecondary">
{dateLabel}
</Typography>
</Grid>
</Grid>
);
}}
/>
);
}
Example #20
| Source File: ProfileAvatar.tsx From homebase-app with MIT License | 5 votes |
|
StyledAvatar = styled(Avatar)(({ size }: { size?: number }) => ({
width: size || 40,
height: size || 40,
}))
Example #21
| Source File: UserActions.tsx From dashboard with Apache License 2.0 | 5 votes |
|
function UserActions({ logOut, userActionsVisible, toggleUserActions }: Props) {
const user = useSelector(selectUser)
const dispatch = useDispatch()
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget)
}
const handleMenu = () => {
setAnchorEl(null)
if (user) dispatch(logOut)
else window.location.href = "/#login"
}
return (
<>
<IconButton
data-name={"menuButton"}
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
>
{user ? (
<Avatar src={user._json.avatar_url} alt="User Avatar" />
) : (
<AccountCircle />
)}
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleMenu}
>
<MenuItem data-name={"loginLogout"} onClick={handleMenu}>
{user ? "Logout" : "Login"}
</MenuItem>
</Menu>
</>
)
}
Example #22
| Source File: index.tsx From Demae with MIT License | 5 votes |
|
ProviderInfo = ({ order }: { order: Order }) => {
const theme = useTheme()
const history = useHistory()
const [provider, isLoading] = useDocumentListen<Provider>(Provider, Provider.collectionReference().doc(order.providedBy))
if (isLoading) {
return (
<Paper>
<DataLoading />
</Paper>
)
}
if (!provider) {
return (
<></>
)
}
return (
<Box padding={2} onClick={() => history.push(`/providers/${provider.id}`)}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar variant="rounded" src={provider.coverImageURL()} alt={provider.name} style={{
height: theme.spacing(8),
width: theme.spacing(8)
}}>
<ImageIcon />
</Avatar>
</Grid>
<Grid item xs zeroMinWidth>
<Typography variant="subtitle1" gutterBottom>{provider.name}</Typography>
<Typography variant="body1" color="textSecondary">{provider.caption}</Typography>
<Divider style={{
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
}} />
<Typography variant="body2" color="textSecondary">{provider.description}</Typography>
</Grid>
</Grid>
</Box>
)
}
Example #23
| Source File: NewCustomers.tsx From ra-enterprise-demo with MIT License | 5 votes |
|
NewCustomers = (): ReactElement => {
const translate = useTranslate();
const classes = useStyles();
const aMonthAgo = useMemo(() => {
const date = new Date();
date.setDate(date.getDate() - 30);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date;
}, []);
const { loaded, data: visitors } = useQueryWithStore({
type: 'getList',
resource: 'customers',
payload: {
filter: {
has_ordered: true,
first_seen_gte: aMonthAgo.toISOString(),
},
sort: { field: 'first_seen', order: 'DESC' },
pagination: { page: 1, perPage: 100 },
},
});
if (!loaded) {
return <Loading />;
}
return (
<Card className={classes.root}>
<CardHeader title={translate('pos.dashboard.new_customers')} />
<List>
{visitors
? visitors.map((record: Customer) => (
<ListItem
button
to={`/customers/${record.id}`}
component={Link}
key={record.id}
>
<ListItemAvatar>
<Avatar src={`${record.avatar}?size=32x32`} />
</ListItemAvatar>
<ListItemText
primary={`${record.first_name} ${record.last_name}`}
/>
</ListItem>
))
: null}
</List>
</Card>
);
}
Example #24
| Source File: List.tsx From Demae with MIT License | 5 votes |
|
ListItem = ({ data }: { data: Order }) => {
const classes = useStyles();
const { orderID } = useParams<{ orderID?: string }>()
const salesMethod = useSalesMethod()
const orderedDate = Dayjs(data.createdAt.toDate())
const currency = data.currency
const amount = data.amount || 0
const price = new Intl.NumberFormat("ja-JP", { style: "currency", currency: currency }).format(amount)
const imageURL = data.imageURLs().length > 0 ? data.imageURLs()[0] : undefined
return (
<Link className={classes.list} to={`/admin/orders/${data.id}` + (salesMethod ? `?salesMethod=${salesMethod}` : "")}>
<Box>
<Box padding={1} paddingY={2} style={{
backgroundColor: orderID === data.id ? "rgba(0, 0, 140, 0.03)" : "inherit"
}}>
<Grid container>
<Grid item xs={1}>
</Grid>
<Grid item xs={2}>
<Avatar variant="rounded" src={imageURL} >
<ImageIcon />
</Avatar>
</Grid>
<Grid item xs={9}>
<Box display="flex" justifyContent="space-between">
<Box>
<Typography variant="subtitle1">{data.title}</Typography>
<Typography variant="body2">{data.id}</Typography>
<Typography variant="caption">
{orderedDate.format("YYYY-MM-DD HH:mm:ss")}
</Typography>
</Box>
</Box>
<Box className={classes.tags}>
<Chip size="small" label={DeliveryStatusLabel[data.deliveryStatus]} />
<Chip size="small" label={SalesMethodLabel[data.salesMethod]} />
<Chip size="small" label={PaymentStatusLabel[data.paymentStatus]} />
{
data.tags.map((tag, index) => {
return <Chip key={index} size="small" label={tag} />
})
}
</Box>
</Grid>
</Grid>
</Box>
<Divider />
</Box>
</Link>
)
}
Example #25
| Source File: Aside.tsx From ra-enterprise-demo with MIT License | 5 votes |
|
OrderEvent: FC<{ record?: RaRecord; basePath?: string }> = ({
record,
basePath,
}) => {
const translate = useTranslate();
const classes = useEventStyles();
if (!record) {
return null;
}
return (
<Card className={classes.card}>
<CardHeader
className={classes.cardHeader}
avatar={
<Avatar
aria-label={translate('resources.commands.name', {
smart_count: 1,
})}
>
<order.icon />
</Avatar>
}
action={<EditButton record={record} basePath="/commands" />}
title={`${translate('resources.commands.name', {
smart_count: 1,
})} #${record.reference}`}
subheader={
<>
<Typography variant="body2">{record.date}</Typography>
<Typography variant="body2" color="textSecondary">
{translate('resources.commands.nb_items', {
smart_count: record.basket.length,
_: '1 item |||| %{smart_count} items',
})}
-
<NumberField
source="total"
options={{
style: 'currency',
currency: 'USD',
}}
record={record}
basePath={basePath}
/>
-
<TextField
source="status"
record={record}
basePath={basePath}
/>
</Typography>
</>
}
/>
</Card>
);
}
Example #26
| Source File: index.tsx From firetable with Apache License 2.0 | 5 votes |
|
Notification = () => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
null
);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
const notifications: Notification[] = [
{
title: "a",
subtitle: "a",
variant: "error",
link:
"https://console.cloud.google.com/cloud-build/builds;region=global/f7b8fd9b-eb6e-401f-a889-73c4bf75f232?project=antler-vc",
},
];
const notificationsCount = notifications.length;
return (
<>
<IconButton onClick={handleClick}>
<Badge
color={"primary"}
variant="standard"
badgeContent={notificationsCount}
>
<BellIcon />
</Badge>
</IconButton>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<List>
{notifications.map((notification) => (
<ListItem>
<ListItemAvatar>
<Avatar>
<ErrorIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={notification.title}
secondary={notification.subtitle}
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
</Popover>
</>
);
}
Example #27
| Source File: MemberAvatar.tsx From knboard with MIT License | 5 votes |
|
MemberAvatar = ({ member }: Props) => {
return (
<Avatar css={avatarStyles} src={member?.avatar?.photo} alt="member-avatar">
{member?.username?.charAt(0) || "-"}
</Avatar>
);
}
Example #28
| Source File: index.tsx From Demae with MIT License | 5 votes |
|
CartItemCell = ({ cartGroup, cartItem }: { cartGroup: CartGroup, cartItem: CartItem }) => {
const classes = useStyles()
const [user] = useUser()
const [cart] = useCart()
const addItem = async (event) => {
event.preventDefault()
event.stopPropagation()
if (user) {
if (cart) {
const group = cart.cartGroup(cartGroup.groupID)
group?.addItem(cartItem)
await cart.save()
} else {
const cart = new Cart(user.id)
const group = cart.cartGroup(cartGroup.groupID)
group?.addItem(cartItem)
await cart.save()
}
}
}
const deleteItem = async (event) => {
event.preventDefault()
event.stopPropagation()
if (!cart) return
const group = cart.cartGroup(cartGroup.groupID)
group?.subtractItem(cartItem)
if ((group?.items.length || 0) <= 0) {
cart.groups = cart.groups.filter(group => group.groupID !== cartGroup.groupID)
}
await cart.save()
}
const imageURL = (cartItem.imageURLs().length > 0) ? cartItem.imageURLs()[0] : undefined
const price = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartItem.currency }).format(cartItem.price())
const subtotal = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartItem.currency }).format(cartItem.subtotal())
return (
<Box display="flex" padding={2}>
<Box>
<Avatar className={classes.avater} variant="rounded" src={imageURL}>
<ImageIcon />
</Avatar>
</Box>
<Box flexGrow={1}>
<Box display="flex" justifyContent="space-between" flexGrow={1}>
<Box mx={2}>
<Typography variant="subtitle1">{cartItem.name}</Typography>
<Typography variant="body1" color="textSecondary">{cartItem.caption}</Typography>
<Typography variant="body1" color="textSecondary">{price}</Typography>
</Box>
<Box>
<Box display="flex" justifyContent="flex-end" fontSize={16} fontWeight={500} >
{subtotal}
</Box>
<Box display="flex" justifyContent="flex-end" alignItems="center" mx={0} my={0}>
<Tooltip title="Remove">
<IconButton onClick={deleteItem}>
<RemoveCircleIcon color="inherit" />
</IconButton>
</Tooltip>
<Box fontWeight={600} fontSize={16} mx={1}>
{cartItem.quantity}
</Box>
<Tooltip title="Add">
<IconButton onClick={addItem}>
<AddCircleIcon color="inherit" />
</IconButton>
</Tooltip>
</Box>
</Box>
</Box>
</Box>
</Box>
)
}
Example #29
| Source File: Task.tsx From knboard with MIT License | 5 votes |
|
TaskFooter = ({ task }: { task: ITask }) => {
const membersByIds = useSelector(selectMembersEntities);
const assignees = task.assignees.map(
(assigneeId) => membersByIds[assigneeId]
) as BoardMember[];
return (
<Footer>
<CardIcon data-testid="task-priority">
<FontAwesomeIcon icon={faArrowUp} color={PRIO_COLORS[task.priority]} />
</CardIcon>
{assignees.length > 0 && (
<Assignees>
<AvatarGroup
max={3}
css={css`
& .MuiAvatarGroup-avatar {
height: 1.25rem;
width: 1.25rem;
font-size: 8px;
margin-left: -4px;
border: none;
}
`}
>
{assignees.map((assignee) => (
<Avatar
key={assignee.id}
css={css`
height: 1.25rem;
width: 1.25rem;
font-size: 8px;
margin-left: -12px;
`}
src={assignee.avatar?.photo}
alt={assignee.avatar?.name}
>
{assignee.username.charAt(0)}
</Avatar>
))}
</AvatarGroup>
</Assignees>
)}
</Footer>
);
}
