102 lines
2.9 KiB
React
102 lines
2.9 KiB
React
import React from 'react';
|
|
import { Typography, IconButton, Stack, Box } from '@mui/material';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import { useTheme } from '@emotion/react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { setStarPromptOpen } from '../../Features/UI/uiSlice';
|
|
|
|
const StarPrompt = ({
|
|
repoUrl = 'https://github.com/bluewave-labs/checkmate'
|
|
}) => {
|
|
const theme = useTheme();
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
const isOpen = useSelector((state) => state.ui?.starPromptOpen ?? true);
|
|
const mode = useSelector((state) => state.ui.mode);
|
|
|
|
const handleClose = () => {
|
|
dispatch(setStarPromptOpen(false));
|
|
};
|
|
|
|
const handleStarClick = () => {
|
|
window.open(repoUrl, '_blank');
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<Stack
|
|
direction="column"
|
|
sx={{
|
|
width: '100%',
|
|
padding: `${theme.spacing(6)} ${theme.spacing(6)}`,
|
|
borderTop: `1px solid ${theme.palette.primary.lowContrast}`,
|
|
borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
|
|
borderRadius: 0,
|
|
gap: theme.spacing(1.5),
|
|
backgroundColor: theme.palette.primary.main,
|
|
}}
|
|
>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center" width="100%" pl={theme.spacing(4)}>
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{
|
|
color: mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary,
|
|
mt: theme.spacing(3)
|
|
}}
|
|
>
|
|
{t('starPromptTitle')}
|
|
</Typography>
|
|
<IconButton
|
|
onClick={handleClose}
|
|
size="small"
|
|
sx={{
|
|
color: theme.palette.text.primary,
|
|
padding: 0,
|
|
marginTop: theme.spacing(-5),
|
|
'&:hover': {
|
|
backgroundColor: 'transparent',
|
|
opacity: 0.8
|
|
},
|
|
}}
|
|
>
|
|
<CloseIcon sx={{ fontSize: '1.25rem' }} />
|
|
</IconButton>
|
|
</Stack>
|
|
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
color: theme.palette.text.secondary,
|
|
fontSize: '0.938rem',
|
|
lineHeight: 1.5,
|
|
mb: 1,
|
|
px: theme.spacing(4)
|
|
}}
|
|
>
|
|
{t('starPromptDescription')}
|
|
</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(4),
|
|
filter: mode === 'dark' ? 'invert(1)' : 'none'
|
|
}}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default StarPrompt;
|