sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

App directory refactoring

Browse source
This commit is contained in:
Darren Clarke 2023-06-26 10:07:12 +00:00 • committed by GitHub
parent a53a26f4c0
commit b312a8c862
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
153 changed files with 1532 additions and 1447 deletions
Download patch file Download diff file Expand all files Collapse all files

156
apps/leafcutter/components/Tooltip.tsx
View file

@ -1,156 +0,0 @@
/* eslint-disable react/require-default-props */
import { FC } from "react";
import { useRouter } from "next/router";
import {
Box,
Grid,
Tooltip as MUITooltip,
Button,
IconButton,
} from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
interface TooltipProps {
title: string;
description: string;
placement: any;
tooltipID: string;
nextURL?: string;
previousURL?: string;
children: any;
}
export const Tooltip: FC<TooltipProps> = ({
title,
description,
placement,
tooltipID,
children,
previousURL = null,
nextURL = null,
// eslint-disable-next-line arrow-body-style
}) => {
const t = useTranslate();
const {
typography: { p, small },
colors: { white, leafcutterElectricBlue, almostBlack },
} = useAppContext();
const router = useRouter();
const activeTooltip = router.query.tooltip?.toString();
const open = activeTooltip === tooltipID;
const showNavigation = true;
return (
<MUITooltip
open={open}
title={
<Grid container direction="column">
<Grid item container direction="row-reverse">
<Grid item>
<IconButton onClick={() => router.push(router.pathname)}>
<CloseIcon
sx={{
color: leafcutterElectricBlue,
fontSize: "14px",
mt: 1,
}}
/>
</IconButton>
</Grid>
</Grid>
<Grid item>
<Box sx={{ p: "12px", pt: 0, mb: "6px" }}>
<Box sx={{ ...p, fontWeight: "bold" }}>
<Grid container direction="row" alignItems="center">
<Grid item>{title}</Grid>
</Grid>
</Box>
<Box sx={{ ...small, mt: 1, color: almostBlack }}>
{description}
</Box>
</Box>
</Grid>
{showNavigation ? (
<Grid
item
container
direction="row"
justifyContent="space-between"
alignItems="center"
sx={{ p: "12px" }}
>
<Grid item>
{previousURL ? (
<Button
sx={{
...small,
borderRadius: 500,
border: `1px solid ${leafcutterElectricBlue}`,
p: "2px 8px",
color: leafcutterElectricBlue,
textTransform: "none",
}}
onClick={() => router.push(previousURL)}
>
{t("previous")}
</Button>
) : null}
</Grid>
<Grid item>
{nextURL ? (
<Button
sx={{
...small,
borderRadius: 500,
border: `1px solid ${leafcutterElectricBlue}`,
p: "2px 8px",
color: leafcutterElectricBlue,
textTransform: "none",
}}
onClick={() => router.push(nextURL)}
>
{t("next")}
</Button>
) : (
<Button
sx={{
...small,
borderRadius: 500,
border: `1px solid ${leafcutterElectricBlue}`,
p: "2px 8px",
color: leafcutterElectricBlue,
textTransform: "none",
}}
onClick={() => router.push(router.pathname)}
>
{t("done")}
</Button>
)}
</Grid>
</Grid>
) : null}
</Grid>
}
arrow
placement={placement}
sx={{ opacity: 0.9 }}
componentsProps={{
tooltip: {
sx: {
opacity: 1.0,
backgroundColor: white,
color: leafcutterElectricBlue,
boxShadow: "0px 6px 20px rgba(0,0,0,0.25)",
},
},
arrow: {
sx: { opacity: 1.0, fontSize: "22px", color: white },
},
}}
>
{children}
</MUITooltip>
);
};