104 lines
2.6 KiB
TypeScript
104 lines
2.6 KiB
TypeScript
import { Typography, IconButton, Stack, Box } from "@mui/material";
|
|
import { Icon } from "@/Components/design-elements";
|
|
import { X } from "lucide-react";
|
|
import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
|
|
|
|
import { useTheme } from "@mui/material";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { useTranslation } from "react-i18next";
|
|
import { setStarPromptOpen } from "@/Features/UI/uiSlice.js";
|
|
import type { RootState } from "@/Types/state.js";
|
|
import useSidebar from "@/Hooks/useSidebar.js";
|
|
|
|
export const StarPrompt = ({
|
|
repoUrl = "https://github.com/bluewave-labs/checkmate",
|
|
}: {
|
|
repoUrl?: string;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
const isOpen = useSelector((state: RootState) => state.ui?.starPromptOpen ?? true);
|
|
const mode = useSelector((state: RootState) => state.ui.mode);
|
|
const { collapsed } = useSidebar();
|
|
const handleClose = () => {
|
|
dispatch(setStarPromptOpen(false));
|
|
};
|
|
|
|
const handleStarClick = () => {
|
|
window.open(repoUrl, "_blank");
|
|
};
|
|
|
|
if (collapsed) return null;
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<Stack
|
|
direction="column"
|
|
gap={theme.spacing(LAYOUT.MD)}
|
|
padding={theme.spacing(LAYOUT.SM)}
|
|
width={"100%"}
|
|
borderTop={`1px solid ${theme.palette.divider}`}
|
|
borderBottom={`1px solid ${theme.palette.divider}`}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
width="100%"
|
|
pl={theme.spacing(LAYOUT.XS)}
|
|
>
|
|
<Typography
|
|
variant="subtitle2"
|
|
mt={theme.spacing(SPACING.XXL)}
|
|
>
|
|
{t("components.sidebar.starPrompt.title")}
|
|
</Typography>
|
|
<IconButton
|
|
onClick={handleClose}
|
|
size="small"
|
|
sx={{
|
|
color: theme.palette.text.primary,
|
|
padding: 0,
|
|
"&:hover": {
|
|
backgroundColor: "transparent",
|
|
opacity: 0.8,
|
|
},
|
|
}}
|
|
>
|
|
<Icon
|
|
icon={X}
|
|
size={20}
|
|
/>
|
|
</IconButton>
|
|
</Stack>
|
|
|
|
<Typography
|
|
sx={{
|
|
mb: 1,
|
|
px: theme.spacing(LAYOUT.XS),
|
|
}}
|
|
>
|
|
{t("components.sidebar.starPrompt.description")}
|
|
</Typography>
|
|
|
|
<Box
|
|
component="img"
|
|
src={`https://img.shields.io/github/stars/bluewave-labs/checkmate?label=checkmate&style=social${mode === "dark" ? "&color=white" : ""}`}
|
|
alt="GitHub stars"
|
|
onClick={handleStarClick}
|
|
sx={{
|
|
cursor: "pointer",
|
|
transform: "scale(0.65)",
|
|
transformOrigin: "left center",
|
|
"&:hover": {
|
|
opacity: 0.8,
|
|
},
|
|
pl: theme.spacing(LAYOUT.XS),
|
|
filter: mode === "dark" ? "invert(1)" : "none",
|
|
}}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|