@material-ui/core#Divider TypeScript Examples
The following examples show how to use
@material-ui/core#Divider.
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: Footer.tsx From planning-poker with MIT License | 7 votes |
Footer = () => {
return (
<footer>
<Slide in={true} direction='up' timeout={3000}>
<div className='FooterSection'>
<Divider variant='middle'></Divider>
<div className='FooterContainer'>
<div className='FooterItemContainer'>
<CopyrightIcon color='secondary' fontSize='small' />
<Typography color='textSecondary' variant='body2'>
hellomuthu23
</Typography>
</div>
<Divider orientation='vertical' flexItem></Divider>
<div className='FooterItemContainer'>
<Typography color='textSecondary' variant='body2'>
Feedback: [email protected]
</Typography>
</div>
<Divider orientation='vertical' flexItem></Divider>
<Link href='https://github.com/hellomuthu23/planning-poker/issues'>
Submit an Issue
</Link>
</div>
</div>
</Slide>
</footer>
);
}
Example #2
Source File: index.tsx From Demae with MIT License | 6 votes |
Content = () => {
const { orderID } = useParams<{ orderID?: string }>()
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down("sm"));
if (matches) {
if (orderID) {
return (
<NavigationView>
<ContentView>
<Detail orderID={orderID} />
</ContentView>
</NavigationView>
)
}
return (
<NavigationView>
<ListView height="100%">
<List />
</ListView>
</NavigationView>
)
}
return (
<NavigationView>
<ListView height="100%">
<List />
</ListView>
<Divider orientation="vertical" flexItem />
<ContentView>
<Detail orderID={orderID} />
</ContentView>
</NavigationView>
)
}
Example #3
Source File: LatestBlock.tsx From metamask-snap-polkadot with Apache License 2.0 | 6 votes |
LatestBlock = (props: {block: BlockInfo}) => {
return (
<Card>
<CardHeader title="Latest block"/>
<CardContent>
<Grid container alignItems="center">
<Grid item md={6} xs={12}>
<Typography variant="h6">Block number:</Typography>
<Typography variant="subtitle2">{props.block.number}</Typography>
<Divider light/>
<Box m={"0.5rem"}/>
<Typography variant="h6">Hash:</Typography>
<Typography variant="subtitle2">{props.block.hash}</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
);
}
Example #4
Source File: file_conflicts.tsx From jupyter-extensions with Apache License 2.0 | 6 votes |
private _renderEntries() {
return this.state.entries.map((entry, index) => {
return (
<React.Fragment key={`${entry.path}-fragment`}>
{index ? <Divider /> : undefined}
<ConflictItem service={this.props.service} file={entry} />
</React.Fragment>
);
});
}
Example #5
Source File: PlayersContainer.tsx From cards-against-formality-pwa with BSD 2-Clause "Simplified" License | 6 votes |
Players = React.memo(({ players, host, czar, roomId, isCurrentUserHost }: PlayersProps) => {
const [, , , kickPlayer] = useFetchData(`/api/rooms/kick`, FetchType.PUT);
const onPlayerKick = useCallback((playerToKick: string) => {
return kickPlayer({ roomId, clientId: playerToKick }).catch(() => { });
}, [kickPlayer, roomId]);
if (window.screen.width < 600) {
return <>
{players.sort((a, b) => b.score - a.score).map((player) => {
const isHost = player._id === host;
const isCzar = player?._id === czar;
return <MobilePlayer key={player._id} player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} />
})}
</>
}
return <List className="players-list">
{players.map((player, index) => {
const isHost = player._id === host;
const isCzar = player?._id === czar;
return <React.Fragment key={player._id}>
<Player player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} />
{index !== players?.length - 1 ? <Divider variant="inset" component="li" /> : null}
</React.Fragment>
})}
</List>;
})
Example #6
Source File: SettingsPage.tsx From twitch-live-extension with BSD 3-Clause "New" or "Revised" License | 6 votes |
SettingsPage = () => {
const dispatch: AppDispatch = useDispatch();
const [user, setUser] = useState<ValidateTokenResponse>();
const { loading } = useSelector((state: RootState) => state.common);
useEffect(() => {
const getUserData = async () => {
const userData: ValidateTokenResponse = await dispatch(getUser());
setUser(userData);
};
getUserData();
}, [dispatch]);
return (
<div>
{user && (
<List subheader={<ListSubheader>Settings</ListSubheader>}>
<SettingsSwitchAccount user={user} />
<SettingsNotifications />
</List>
)}
{loading && !user && <CenteredCircularProgress />}
<Divider />
<SettingsFooter />
</div>
);
}
Example #7
Source File: 404.tsx From storefront with MIT License | 6 votes |
Custom404: NextPage = () => (
<Layout>
<Typography variant="h1">404</Typography>
<Divider />
<div>
<Typography gutterBottom>We can’t seem to find a page you are looking for!</Typography>
<Typography gutterBottom>
You may have mistyped the address or the page may have moved.
</Typography>
<Typography gutterBottom>
We’re sorry for the error and hope you’ll have a good day.
</Typography>
</div>
</Layout>
)
Example #8
Source File: TurnContextPanel.tsx From fishbowl with MIT License | 6 votes |
function TurnContextPanel(props: { secondsLeft: number }) {
const classes = useStyles()
return (
<Box mt={2}>
<Grid
container
alignItems="center"
direction="row"
justify="center"
spacing={2}
className={classes.root}
>
<Grid item>
<CardsLeftItem></CardsLeftItem>
</Grid>
<Divider orientation="vertical" flexItem />
<Grid item>
<CountdownTimerItem
secondsLeft={props.secondsLeft}
></CountdownTimerItem>
</Grid>
<Divider orientation="vertical" flexItem />
<Grid item>
<ScoreCardItem></ScoreCardItem>
</Grid>
</Grid>
</Box>
)
}
Example #9
Source File: AlertStatusSummary.tsx From backstage with Apache License 2.0 | 6 votes |
AlertGroup = ({ alerts, status, title, icon }: AlertGroupProps) => {
const classes = useStyles();
return (
<Box p={1}>
{alerts.map((alert, index) => (
<Fragment key={`alert-${status}-${index}`}>
<ActionItemCard
disableScroll
alert={alert}
avatar={
<Tooltip title={title}>
<Avatar className={classes.avatar}>{icon}</Avatar>
</Tooltip>
}
/>
{index < alerts.length - 1 && <Divider />}
</Fragment>
))}
</Box>
);
}
Example #10
Source File: DividerVertical.tsx From clearflask with Apache License 2.0 | 6 votes |
render() {
const { classes, theme, ...dividerProps } = this.props;
return (
<Divider
{...dividerProps}
classes={{
root: this.props.classes.divider,
}}
/>
);
}
Example #11
Source File: CardWithIcon.tsx From ra-enterprise-demo with MIT License | 6 votes |
CardWithIcon: FC<Props> = props => {
const { icon, title, subtitle, to, children } = props;
const classes = useStyles(props);
return (
<Card className={classes.card}>
<Link to={to}>
<div className={classes.main}>
<Box width="3em" className="icon">
{createElement(icon, { fontSize: 'large' })}
</Box>
<Box textAlign="right">
<Typography
className={classes.title}
color="textSecondary"
>
{title}
</Typography>
<Typography variant="h5" component="h2">
{subtitle || ' '}
</Typography>
</Box>
</div>
</Link>
{children && <Divider />}
{children}
</Card>
);
}
Example #12
Source File: DeleteConfirm.tsx From max-todos with MIT License | 6 votes |
DeleteConfirm = ({ open, close, yes }: Props) => {
const matches = useMediaQuery("(max-width: 768px)");
return (
<Dialog open={open} onClose={close}>
<DialogTitle>DELETE ITEM?</DialogTitle>
<DialogContent>
<DialogContentText>
Are you sure you want to delete this item?
</DialogContentText>
<div style={{ display: matches ? "none" : "block" }}>
<Divider />
<br />
<DialogContentText>
<span style={{ color: "green", fontWeight: "bold" }}>PROTIP:</span>
<br />
You can hold down shift when clicking the <b>delete button</b> to
bypass this confirmation entirely
</DialogContentText>
</div>
</DialogContent>
<DialogActions>
<Button onClick={close} color="primary">
No
</Button>
<Button onClick={yes} color="primary" variant="contained">
Yes
</Button>
</DialogActions>
</Dialog>
);
}
Example #13
Source File: page.tsx From mtcute with GNU Lesser General Public License v3.0 | 6 votes |
export function ListItemTlObject({ node }: { node: ExtendedTlObject }) {
return (
<>
<div style={{ padding: '16px 32px' }}>
<MuiLink
component={Link}
to={`/${node.prefix}${node.type}/${node.name}`}
>
<Typography variant="h5" color="textPrimary">
{node.prefix}
{node.name}
</Typography>
</MuiLink>
<Description description={node.description} />
</div>
<Divider />
</>
)
}
Example #14
Source File: Network.tsx From parity-bridges-ui with GNU General Public License v3.0 | 6 votes |
NetworkSides = () => {
const classes = useStyles();
const { sourceSubscriptions, targetSubscriptions } = useSubscriptionsContext();
const { sourceChainDetails, targetChainDetails } = useSourceTarget();
const { sourceReady, targetReady } = useLoadingApi();
return (
<Box marginY={2} className={classes.main}>
<Box p={1} className={classes.statsEntry}>
<div>
<IconApiStatus className={classes.IconApiSvg} status={sourceReady} />
<a target="_blank" rel="noreferrer" href={sourceChainDetails.polkadotjsUrl}>
<Web3Icon>{sourceChainDetails.chain}</Web3Icon>
{sourceChainDetails.chain}
</a>
</div>
<span># {sourceSubscriptions.bestBlock}</span>
</Box>
<Divider />
<ArrowDownwardIcon className={classes.arrowIcon} />
<BridgedLocalWrapper blurred>
<Box p={1} className={classes.statsEntry}>
<div>
<IconApiStatus className={classes.IconApiSvg} status={targetReady} />
<a target="_blank" rel="noreferrer" href={targetChainDetails.polkadotjsUrl}>
{targetChainDetails.chain}
</a>
</div>
<span style={{ opacity: 0.4 }}># {targetSubscriptions.bestBlock}</span>
</Box>
</BridgedLocalWrapper>
</Box>
);
}
Example #15
Source File: bar.tsx From vhealth-gatsby with MIT License | 6 votes |
Bar = () => {
const classes = useStyles()
return (
<Box style={{ width: 80 }}>
<Divider
classes={{ root: classes.divider }}
// style={{ height: 3, margin: 10, color: "#000" }}
/>
</Box>
)
}
Example #16
Source File: FriendLinks.tsx From TidGi-Desktop with Mozilla Public License 2.0 | 6 votes |
export function FriendLinks(props: ISectionProps): JSX.Element {
const { t } = useTranslation();
return (
<>
<SectionTitle ref={props.sections.friendLinks.ref}>{t('Preference.FriendLinks')}</SectionTitle>
<Paper elevation={0}>
<List dense disablePadding>
<ListItem button onClick={async () => await window.service.native.open('https://github.com/webcatalog/webcatalog-engine')}>
<ListItemText secondary={t('Preference.WebCatalogEngineIntro')} />
<ChevronRightIcon color="action" />
</ListItem>
<Divider />
<ListItem button onClick={async () => await window.service.native.open('https://webcatalogapp.com?utm_source=tidgi_app')}>
<ListItemText primary={<Logo src={webcatalogLogo} alt={t('Preference.WebCatalog')} />} secondary={t('Preference.WebCatalogIntro')} />
<ChevronRightIcon color="action" />
</ListItem>
<Divider />
<ListItem button onClick={async () => await window.service.native.open('https://translatiumapp.com?utm_source=tidgi_app')}>
<ListItemText primary={<Logo src={translatiumLogo} alt={t('Preference.Translatium')} />} secondary={t('Preference.TranslatiumIntro')} />
<ChevronRightIcon color="action" />
</ListItem>
</List>
</Paper>
</>
);
}
Example #17
Source File: Questionnaire.tsx From flect-chime-sdk-demo with Apache License 2.0 | 6 votes |
Questionnaire = (props: QuestionnaireProps) => {
const classes = useStyles();
const links = props.links.map((x) => {
return (
<Link key={x.title} onClick={x.onClick}>
{x.title}
</Link>
);
});
return (
<Container maxWidth="xs" className={classes.root}>
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>{props.avatorIcon}</Avatar>
<Typography variant="h4" className={classes.title}>
{props.title}
</Typography>
<div>{props.forms}</div>
<Divider style={{ width: "50%" }} />
<div style={{ display: "flex", flexDirection: "column" }}>{links}</div>
<Divider style={{ width: "50%" }} />
<Copyright />
</div>
</Container>
);
}
Example #18
Source File: CartDrawer.tsx From frontend-clean-architecture with MIT License | 6 votes |
CartDrawer: React.FC = () => {
const classes = useStyles();
const ploc = useCartPloc();
const state = usePlocState(ploc);
return (
<Drawer
anchor="right"
open={state.open}
className={classes.drawer}
classes={{
paper: classes.drawerPaper,
}}>
<Box className={classes.drawerHeader}>
<IconButton onClick={() => ploc.closeCart()}>
<ChevronLeftIcon />
</IconButton>
<Box className={classes.drawerTitleContainer}>
<ShoppingCartIcon className={classes.drawerTitleIcon} />
<Typography variant="h6" component="h2">
Cart
</Typography>
</Box>
</Box>
<Divider />
<CartContent />
</Drawer>
);
}
Example #19
Source File: ActionBar.tsx From Demae with MIT License | 5 votes |
ActionSheet = ({ url, text, onClose }: { url: string, text: string, onClose: () => void }) => {
const [showSnackbar] = useSnackbar()
return (
<Paper>
<Box>
<Box padding={2}>
<Typography variant="subtitle1">Share this page</Typography>
</Box>
<List>
<ListItem button onClick={async () => {
await navigator.clipboard.writeText(url)
showSnackbar('success', 'Copied this page URL.')
onClose()
}}>
<ListItemIcon>
<AssignmentTurnedInIcon />
</ListItemIcon>
<ListItemText primary="Copy URL of this page" />
</ListItem>
<ListItem button onClick={() => {
const encoded = encodeURI(url)
const uri = `https://twitter.com/intent/tweet?text=${encoded}`
if (!window.open(uri)) window.location.href = uri
onClose()
}}>
<ListItemIcon>
<TwitterIcon />
</ListItemIcon>
<ListItemText primary="Twitter" />
</ListItem>
</List>
<Divider />
<List>
<ListItem button onClick={onClose}>
<ListItemText primary="Cancel" />
</ListItem>
</List>
</Box>
</Paper>
)
}
Example #20
Source File: NavDrawer.tsx From firetable with Apache License 2.0 | 5 votes |
export default function NavDrawer({
currentSection,
currentTable,
...props
}: INavDrawerProps) {
const classes = useStyles();
const { sections } = useFiretableContext();
return (
<Drawer open {...props} classes={{ paper: classes.paper }}>
<Grid
container
spacing={1}
wrap="nowrap"
alignItems="center"
className={classes.logoRow}
>
<Grid item>
<IconButton
aria-label="Close navigation drawer"
onClick={props.onClose as any}
>
<CloseIcon />
</IconButton>
</Grid>
<Grid item className={classes.logo}>
<FiretableLogo />
</Grid>
</Grid>
<nav>
<List>
<li>
<ListItem
button
classes={{ root: classes.listItem }}
component={Link}
to={routes.home}
>
<ListItemIcon className={classes.listItemIcon}>
<HomeIcon />
</ListItemIcon>
<ListItemText
primary="Home"
classes={{ primary: classes.listItemText }}
/>
</ListItem>
</li>
<Divider variant="middle" className={classes.divider} />
{sections &&
Object.entries(sections).map(([section, tables]) => (
<NavDrawerItem
key={section}
section={section}
tables={tables}
currentSection={currentSection}
currentTable={currentTable}
/>
))}
</List>
</nav>
</Drawer>
);
}
Example #21
Source File: code_review.tsx From jupyter-extensions with Apache License 2.0 | 5 votes |
render() {
const comments = this.props.commentsList.map((comment, index) => (
<div key={index}>
<Comment reviewComment={comment} file={this.props.file} />
<Divider />
</div>
));
const reviewTimeStamp = timeAgo(
new Date().getTime(),
this.props.reviewRequest.timestamp
);
return (
<List
subheader={
<Grid container direction="column" spacing={0}>
<Grid container direction="row" spacing={0}>
<Grid item style={style.reviewIcon}>
<RateReviewIcon color="primary" />
</Grid>
<Grid item>
<Typography
color="primary"
style={style.commentListHeader}
gutterBottom
>
{'Review requested: ' + this.props.reviewRequest.description}
</Typography>
</Grid>
</Grid>
<Grid item>
<Typography
color="primary"
style={style.commentListDescription}
gutterBottom
>
{'Requested by: ' + this.props.reviewRequest.requester}
</Typography>
</Grid>
<Grid item>
<Typography color="primary" style={style.commentListDescription}>
{'Opened ' + reviewTimeStamp}
</Typography>
</Grid>
</Grid>
}
>
{' '}
{comments}{' '}
</List>
);
}
Example #22
Source File: CreateRoom.tsx From cards-against-formality-pwa with BSD 2-Clause "Simplified" License | 5 votes |
function DeckSelector({ decks, onChange }: { decks: any[], onChange: (decks: string[]) => void }) {
const [deckOptions, setDeckOptions] = useState<{ name: string; _id: string, value?: boolean }[]>([]);
const [isExpanded, setIsExpanded] = useState(false);
const [isAllSelected, setIsAllSelected] = useState(false);
const toggleSelectAll = useCallback(() => {
setDeckOptions(prevDeck => {
prevDeck.forEach(deck => deck.value = !isAllSelected);
return [...prevDeck];
});
setIsAllSelected(!isAllSelected);
}, [isAllSelected])
useEffect(() => {
if (decks) {
setDeckOptions(decks.map(deck => {
return { value: deck.name.includes('Base'), ...deck }
}));
}
}, [decks]);
useEffect(() => {
onChange(deckOptions.filter(deck => deck.value).map(deck => deck._id));
}, [deckOptions, onChange]);
function _onChange(e: React.ChangeEvent<HTMLInputElement>) {
setDeckOptions(prevDeck => {
const deck = prevDeck.find(deck => deck._id === e.target.name);
if (deck) {
deck.value = e.target.checked;
}
return [...prevDeck];
});
}
if (!decks?.length) {
return null;
}
return <ExpansionPanel expanded={isExpanded} onChange={() => { setIsExpanded(prev => !prev) }}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Typography>Available Decks!</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<FormControl required component="fieldset" error={!deckOptions.some(deck => deck.value)}>
<FormControlLabel
control={<Checkbox checked={isAllSelected} onChange={toggleSelectAll} name="Select all" />}
label="Select all"
/>
<Divider />
<FormLabel component="legend">Select which decks you would like to play with</FormLabel>
<FormGroup className="deck-checkbox-group">
{deckOptions.map(deck => {
return <FormControlLabel
key={deck._id}
control={<Checkbox checked={deck.value} onChange={_onChange} name={deck._id} />}
label={deck.name}
/>
})}
</FormGroup>
<FormHelperText>You must select at least one</FormHelperText>
</FormControl>
</ExpansionPanelDetails>
</ExpansionPanel>
}
Example #23
Source File: Settings.tsx From SpaceEye with MIT License | 5 votes |
Settings: React.FC<SettingsProps> = props => {
const {
onClickBack,
onClickQuit,
onClickStartOnLoginSwitch,
onClickAutoUpdateSwitch,
openAboutApp,
closeAboutApp,
shouldStartOnLogin,
autoUpdate,
aboutAppVisible
} = props
return (
<SettingsContainer>
<SectionsContainer>
<SectionsColumn>
<Box my={1} />
<Grid container direction="row" justify="center">
<Typography variant="h5">SpaceEye</Typography>
</Grid>
<Box my={1} />
<Grid container direction="row" justify="center">
<Button variant="outlined" color="primary" onClick={onClickBack}>
Back
</Button>
</Grid>
<Spacer />
<Grid container direction="column" justify="center" alignItems="center">
<Link
component="button"
variant="body2"
color="textSecondary"
onClick={openAboutApp}
>
About
</Link>
<Box my={0.5} />
<Button variant="outlined" color="secondary" onClick={onClickQuit}>
Quit
</Button>
</Grid>
<Box my={1} />
</SectionsColumn>
</SectionsContainer>
<SettingsColumn>
<Box my={2} />
<Grid container direction="row" justify="center">
<Typography variant="h6">Settings</Typography>
</Grid>
<Box my={2} mx={1}>
<Divider variant="fullWidth" />
</Box>
<Grid container direction="column" justify="flex-start" alignContent="flex-start">
<SettingsSwitch
isChecked={shouldStartOnLogin}
onChange={onClickStartOnLoginSwitch}
label="Start on Login"
/>
{/* Don't show auto-update option if downloaded from an app store */}
{!process.mas && !process.windowsStore && (
<SettingsSwitch
isChecked={autoUpdate}
onChange={onClickAutoUpdateSwitch}
label="Auto update"
/>
)}
</Grid>
</SettingsColumn>
<AboutThisApp onClickDone={closeAboutApp} visible={aboutAppVisible} />
</SettingsContainer>
)
}
Example #24
Source File: TransactionInfiniteList.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 5 votes |
TransactionInfiniteList: React.FC<TransactionListProps> = ({
transactions,
loadNextPage,
pagination,
}) => {
const classes = useStyles();
const theme = useTheme();
const isXsBreakpoint = useMediaQuery(theme.breakpoints.down("xs"));
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const itemCount = pagination.hasNextPages ? transactions.length + 1 : transactions.length;
const loadMoreItems = () => {
return new Promise((resolve) => {
return resolve(pagination.hasNextPages && loadNextPage(pagination.page + 1));
});
};
const isRowLoaded = (params: Index) =>
!pagination.hasNextPages || params.index < transactions.length;
// @ts-ignore
function rowRenderer({ key, index, style }) {
const transaction = get(index, transactions);
if (index < transactions.length) {
return (
<div key={key} style={style}>
<TransactionItem transaction={transaction} />
<Divider variant={isMobile ? "fullWidth" : "inset"} />
</div>
);
}
}
return (
<InfiniteLoader
isRowLoaded={isRowLoaded}
loadMoreRows={loadMoreItems}
rowCount={itemCount}
threshold={2}
>
{({ onRowsRendered, registerChild }) => (
<div data-test="transaction-list" className={classes.transactionList}>
<List
rowCount={itemCount}
ref={registerChild}
onRowsRendered={onRowsRendered}
height={isXsBreakpoint ? theme.spacing(74) : theme.spacing(88)}
width={isXsBreakpoint ? theme.spacing(38) : theme.spacing(110)}
rowHeight={isXsBreakpoint ? theme.spacing(28) : theme.spacing(16)}
rowRenderer={rowRenderer}
/>
</div>
)}
</InfiniteLoader>
);
}
Example #25
Source File: index.tsx From react-app-architecture with Apache License 2.0 | 5 votes |
export default function Component(): ReactElement {
const classes = useStyles();
return (
<footer className={classes.root}>
<Divider />
<Grid className={classes.grid} container>
<Grid className={classes.listItem} item xs={12} sm={6} md={3}>
<Copyright className={classes.icon} />
<Typography component="span" variant="h6">
Copyright 2020
</Typography>
<Typography variant="subtitle1" color="textSecondary">
MindOrks Nextgen Private Limited
<br />
Gurgaon, Haryana, India
<br />
</Typography>
</Grid>
<Grid className={classes.listItem} item xs={12} sm={6} md={3}>
<Typography component="p" variant="h6">
Quick Links
</Typography>
<InternalLink link="/contact" name="Contact Us" />
<br />
<InternalLink link="/policies/privacy" name="Privacy Policy" />
<br />
<InternalLink link="/policies/terms-and-conditions" name="Terms And Conditions" />
<br />
<InternalLink link="/policies/cookie" name="Cookie Policy" />
<br />
</Grid>
<Grid className={classes.listItem} item xs={12} sm={6} md={3}>
<Typography component="p" variant="h6">
About Us
</Typography>
<ExternalLink href="https://www.facebook.com/afteracademy" name="AfterAcademy" />
<br />
<ExternalLink href="https://www.facebook.com/mindorks.nextgen" name="MindOrks" />
<br />
<ExternalLink
href="https://www.linkedin.com/in/amit-shekhar-iitbhu"
name="Amit Shekhar"
/>
<br />
<ExternalLink href="https://www.linkedin.com/in/janishar-ali" name="Janishar Ali" />
</Grid>
<Grid className={classes.listItem} item xs={12} sm={6} md={3}>
<Typography component="p" variant="h6">
Free Resources
</Typography>
<ExternalLink href="https://blog.mindorks.com" name="Publication" />
<br />
<ExternalLink href="https://medium.com/mindorks" name="Medium" />
<br />
<ExternalLink href="https://www.youtube.com/mindorks" name="Video Lessons" />
<br />
<ExternalLink href="https://github.com/mindorksopensource" name="Mindorks Open Source" />
</Grid>
</Grid>
</footer>
);
}
Example #26
Source File: Header.tsx From aqualink-app with MIT License | 5 votes |
Header = ({ user, nSites, classes }: HeaderProps) => (
<>
<Grid container justify="space-between">
<Grid item>
<Grid container direction="column">
<Grid item>
<Typography variant="subtitle2" color="textSecondary">
Managed by
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" color="textSecondary">
{user.organization}
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" spacing={1}>
<Grid item>
<Typography
className={classNames(classes.organization, classes.blueText)}
>
{nSites}
</Typography>
</Grid>
<Grid item>
<Typography variant="h6" className={classes.grayText}>
Sites
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>
<Typography variant="subtitle1" color="textSecondary">
{user.fullName}
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center">
<Grid item>
<EmailIcon className={classes.emailIcon} />
</Grid>
<Grid item>
<Typography variant="caption" color="textSecondary">
{user.email}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Divider className={classes.divider} />
</>
)
Example #27
Source File: Stepper.tsx From storefront with MIT License | 5 votes |
Stepper: React.FC<StepperProps> = ({
activeStep: initialActiveStep,
children,
onChangeStep,
steps,
...props
}) => {
const styles = useStyles();
const [activeStep, setActiveStep] = useState(
steps.findIndex((step) => step.path === initialActiveStep),
);
useEffect(() => {
if (onChangeStep != null) {
onChangeStep(steps[activeStep]);
}
}, [activeStep, onChangeStep, steps]);
const handleStep = (step: number) => () => {
setActiveStep(step);
};
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handlePrevious =
(step = activeStep - 1) =>
() => {
if (step < activeStep && step >= 0) {
setActiveStep(step);
}
};
return (
<>
<MuiStepper
alternativeLabel
activeStep={activeStep}
className={styles.root}
orientation="horizontal"
{...props}
>
{steps.map((step, i) => (
<Step key={step.path}>
<StepButton onClick={handleStep(i)}>{step.title}</StepButton>
</Step>
))}
</MuiStepper>
<Divider />
{children({ handleNext, handlePrevious })[activeStep]}
</>
);
}
Example #28
Source File: AdrSearchResultListItem.tsx From backstage with Apache License 2.0 | 5 votes |
AdrSearchResultListItem = ({
lineClamp = 5,
highlight,
result,
}: {
lineClamp?: number;
highlight?: ResultHighlight;
result: AdrDocument;
}) => {
const classes = useStyles();
return (
<Link to={result.location}>
<ListItem alignItems="flex-start" className={classes.flexContainer}>
<ListItemText
className={classes.itemText}
primaryTypographyProps={{ variant: 'h6' }}
primary={
highlight?.fields.title ? (
<HighlightedSearchResultText
text={highlight.fields.title}
preTag={highlight.preTag}
postTag={highlight.postTag}
/>
) : (
result.title
)
}
secondary={
<span
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: lineClamp,
overflow: 'hidden',
}}
>
{highlight?.fields.text ? (
<HighlightedSearchResultText
text={highlight.fields.text}
preTag={highlight.preTag}
postTag={highlight.postTag}
/>
) : (
result.text
)}
</span>
}
/>
<Box>
{result.status && (
<Chip label={`Status: ${result.status}`} size="small" />
)}
{result.date && <Chip label={`Date: ${result.date}`} size="small" />}
</Box>
</ListItem>
<Divider component="li" />
</Link>
);
}
Example #29
Source File: with-custom-menu.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
withCustomMenu = (): StoryFnReactReturnType => {
const avatar = <Avatar src={tRex} alt={'User Avatar'} />;
const open = (): void => {
store.set({ open: true });
};
const close = (): void => {
store.set({ open: false });
};
const menu = (state: any): JSX.Element => (
<Menu open={state.open} onClose={close}>
<div key={'header'} style={{ position: 'relative', padding: 10 }}>
<Typography variant={'h6'}>Welcome, </Typography>
<Typography style={{ fontWeight: 600, marginTop: '-10px' }} variant={'h3'}>
T-Rex
</Typography>
<div
style={{
position: 'absolute',
right: 0,
top: 0,
height: '100%',
width: '100%',
opacity: 0.2,
backgroundSize: 'cover',
backgroundImage: `url(${tRex})`,
}}
/>
</div>
<Divider key={'divider-1'} />
<MenuItem onClick={close} key={'account'}>
My Account
</MenuItem>
<MenuItem onClick={close} key={'logout'}>
Logout
</MenuItem>
<Divider key={'divider-2'} />
<img
key={'footer'}
alt={'tRex'}
style={{ textAlign: 'center', padding: '12px 16px 0 16px', height: 40 }}
src={EatonLogo}
/>
</Menu>
);
store.set({ open: false });
return (
<State store={store}>
{(state): JSX.Element => <UserMenu avatar={avatar} onOpen={open} menu={menu(state)} />}
</State>
);
}