@material-ui/icons#GitHub TypeScript Examples
The following examples show how to use
@material-ui/icons#GitHub.
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 projectboard with MIT License | 6 votes |
|
Footer: React.FC<Props> = () => {
return (
<footer className="m-4 p-4 lg:p-10 rounded-md bg-indigo-600 text-white">
<div className="flex justify-between flex-col md:flex-row items-center">
<h1 className="font-semibold text-xl md:text-3xl">Project Board</h1>
<div>
<Button>
<a
href="https://github.com/vishwajeetraj11/projectboard"
target="_blank"
referrerPolicy="no-referrer"
rel="noreferrer"
>
<GitHub className="text-white" />
</a>
</Button>
<Button>
<a
href="https://twitter.com/shuntzhere"
target="_blank"
referrerPolicy="no-referrer"
rel="noreferrer"
>
<Twitter className="text-white" />
</a>
</Button>
</div>
</div>
</footer>
);
}
Example #2
| Source File: index.tsx From aqualink-app with MIT License | 5 votes |
|
MenuDrawer = ({ classes, open, onClose }: MenuDrawerProps) => {
return (
<Drawer
anchor="left"
open={open}
onClose={onClose}
classes={{ paper: classes.paper }}
>
<IconButton
onClick={onClose}
style={{
alignSelf: "flex-end",
marginRight: 5,
marginTop: 5,
color: "white",
}}
>
<Clear />
</IconButton>
{menuRoutes.map(({ text, to, href, gaActionLabel }) => (
<Button
className={classes.menuDrawerButton}
key={text}
component={href ? ExternalLink : Link}
target={href ? "_blank" : undefined}
href={href || undefined}
to={to || ""}
onClick={() =>
trackButtonClick(
GaCategory.BUTTON_CLICK,
GaAction.SIDE_MENU_BUTTON_CLICK,
gaActionLabel
)
}
>
<Typography variant="h6">{text}</Typography>
</Button>
))}
<Box marginTop="auto" padding="25px">
<Typography variant="subtitle1">
{/* eslint-disable-next-line react/no-unescaped-entities */}
Aqualink is open-source (MIT). Join us and contribute!
</Typography>
<ButtonGroup variant="contained" color="default">
<Button
target="_blank"
href="https://github.com/aqualinkorg/aqualink-app"
startIcon={<GitHub />}
className={classes.contributeButton}
>
GitHub
</Button>
<Button
target="_blank"
href="https://ovio.org/project/aqualinkorg/aqualink-app"
className={classes.contributeButton}
>
<img src={ovioLogo} alt="Ovio Logo" />
</Button>
</ButtonGroup>
</Box>
</Drawer>
);
}
Example #3
| Source File: About.tsx From max-todos with MIT License | 5 votes |
|
About = () => {
return (
<>
<Container>
<p style={{ fontSize: "1.3rem" }}>
<b>Max Todos</b> is an open-source project started by Usman Sabuwala.
This app focuses on the ease of use of a Todo App. Write your todos,
change some settings, Enjoy!
</p>
<h2>Contact</h2>
<a
href="https://twitter.com/MaxProgramming1"
style={{
color: "#1CA0F1",
textDecoration: "none",
fontSize: "24px",
}}
target="_blank"
rel="noopener noreferrer"
>
<Twitter fontSize="large" />
</a>
<a
href="https://github.com/max-programming"
style={{
color: "#24292E",
textDecoration: "none",
fontSize: "24px",
}}
target="_blank"
rel="noopener noreferrer"
>
<GitHub fontSize="large" />
</a>
<a
href="https://www.facebook.com/usman.sabuwala.7"
style={{
color: "#0D8BF0",
textDecoration: "none",
fontSize: "24px",
}}
target="_blank"
rel="noopener noreferrer"
>
<Facebook fontSize="large" />
</a>
<a
href="https://youtube.com/MaxProgramming"
style={{
color: "#FD0000",
textDecoration: "none",
fontSize: "24px",
}}
target="_blank"
rel="noopener noreferrer"
>
<YouTube fontSize="large" />
</a>
<a
href="https://www.instagram.com/usmansabuwala7/"
style={{
color: "#CD2E96",
textDecoration: "none",
fontSize: "24px",
}}
target="_blank"
rel="noopener noreferrer"
>
<Instagram fontSize="large" />
</a>
</Container>
</>
);
}
Example #4
| Source File: index.tsx From anchor-web-app with Apache License 2.0 | 4 votes |
|
function FooterBase({ className, style }: FooterProps) {
const { network } = useNetwork();
const { data: lastSyncedHeight = 0 } = useLastSyncedHeightQuery();
const {
target: { isEVM },
} = useDeploymentTarget();
const { themeColor, switchable, updateTheme } = useTheme();
const appVersion = import.meta.env.VITE_APP_VERSION;
return (
<footer className={className} style={style}>
<Info>
<div className="blocks">
<a
href={getBlockUrl(network.chainID, lastSyncedHeight)}
target="_blank"
rel="noreferrer"
>
<BlockInfo
chainName={Chain.Terra}
networkName={network.name}
blockNumber={lastSyncedHeight}
/>
</a>
{isEVM && <EvmBlockInfo />}
</div>
{appVersion && <p>{appVersion}</p>}
<Link to="/terms">Terms</Link>
</Info>
<div>
<IconButton
component="a"
href="https://discord.gg/9aUYgpKZ9c"
target="_blank"
rel="noreferrer"
>
<Discord />
</IconButton>
<IconButton
component="a"
href="https://twitter.com/anchor_protocol"
target="_blank"
rel="noreferrer"
>
<Twitter />
</IconButton>
<IconButton
component="a"
href="https://t.me/anchor_official"
target="_blank"
rel="noreferrer"
>
<Telegram />
</IconButton>
<IconButton
component="a"
href="https://github.com/Anchor-Protocol"
target="_blank"
rel="noreferrer"
>
<GitHub />
</IconButton>
{switchable && (
<IconButton
onClick={() =>
updateTheme(themeColor === 'light' ? 'dark' : 'light')
}
>
{themeColor === 'light' ? <Brightness5 /> : <Brightness3 />}
</IconButton>
)}
</div>
</footer>
);
}
Example #5
| Source File: Header.tsx From frontend with Apache License 2.0 | 4 votes |
|
Header: FunctionComponent = () => {
const [avatarMenuRef, setAvatarMenuRef] = React.useState<null | HTMLElement>(null);
const [helpMenuRef, setHelpMenuRef] = React.useState<null | HTMLElement>(null);
const { loggedIn, user } = useUserState();
const authDispatch = useUserDispatch();
const styleMenuItem = {
display: "flex",
alignItems: "center",
};
const handleMenuClose = () => {
setAvatarMenuRef(null);
setHelpMenuRef(null);
};
const closeMenuAndOpenLink = () => {
handleMenuClose();
window.open("https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/new", "_blank");
};
const getVRTVersion = (): string => {
//For cypress tests, window._env_ variable may be undefined, so return a dummy value.
return window._env_ ? window._env_.VRT_VERSION : "5.0.0";
};
const renderHelpMenu = (
<Menu
anchorEl={helpMenuRef}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
id="headerHelpMenu"
keepMounted
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={!!helpMenuRef}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose} >
<GuidedTour />
</MenuItem>
<MenuItem onClick={closeMenuAndOpenLink} style={styleMenuItem}>
<IconButton size="small">
<GitHub />
</IconButton>
Open an issue in GitHub
</MenuItem>
<hr />
<MenuItem style={{
justifyContent: "center"
}}>
VRT Version : {getVRTVersion()}
</MenuItem>
</Menu >
);
const renderAvatarMenu = (
<Menu
anchorEl={avatarMenuRef}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
id="headerAvatarMenu"
keepMounted
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={!!avatarMenuRef}
onClose={handleMenuClose}
>
{user?.role === "admin" && (
<MenuItem
component={Link}
to={routes.USER_LIST_PAGE}
onClick={handleMenuClose}
style={styleMenuItem}
>
<IconButton size="small">
<People />
</IconButton>
Users
</MenuItem>
)}
<MenuItem
component={Link}
to={routes.PROJECT_LIST_PAGE}
onClick={handleMenuClose}
style={styleMenuItem}
>
<IconButton size="small">
<AllInbox />
</IconButton>
Projects
</MenuItem>
<MenuItem
component={Link}
to={routes.PROFILE_PAGE}
onClick={handleMenuClose}
style={styleMenuItem}
>
<IconButton size="small">
<Face />
</IconButton>
Profile
</MenuItem>
<MenuItem
onClick={() => {
handleMenuClose();
logout(authDispatch);
}}
data-testid="logoutBtn"
>
<IconButton size="small">
<SettingsPower />
</IconButton>
Logout
</MenuItem>
</Menu>
);
return (
<React.Fragment>
<AppBar position="static" color="default">
<Toolbar>
<Grid container justifyContent="space-between" alignItems="center">
<Grid item>
<Link to="/">
<img src={logo} width="60" height="60" alt="logo" />
</Link>
</Grid>
<Grid item>
<Grid
container
justifyContent="space-between"
alignItems="center"
>
<IconButton onClick={(event: React.MouseEvent<HTMLElement>) =>
setHelpMenuRef(event.currentTarget)
}>
<Avatar>
<HelpOutline />
</Avatar>
</IconButton>
{loggedIn && (
<IconButton
onClick={(event: React.MouseEvent<HTMLElement>) =>
setAvatarMenuRef(event.currentTarget)
}
>
<Avatar>{`${user?.firstName[0]}${user?.lastName[0]}`}</Avatar>
</IconButton>
)}
</Grid>
</Grid>
</Grid>
</Toolbar>
</AppBar>
{renderAvatarMenu}
{renderHelpMenu}
</React.Fragment>
);
}
