79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import { CopyAll } from '@mui/icons-material';
|
|
import { Checkbox, FormControlLabel, IconButton, List, ListItem, ListItemText, Switch, TextField } from '@mui/material';
|
|
import get from 'lodash/get';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { useMemo, useState } from 'react';
|
|
import toast from 'react-hot-toast';
|
|
|
|
import Heading from '@/components/shared/Heading';
|
|
import { useAppDispatch, useAppSelector } from '@/store/hooks';
|
|
import { setResumeState } from '@/store/resume/resumeSlice';
|
|
import getResumeUrl from '@/utils/getResumeUrl';
|
|
|
|
const Sharing = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
const [showShortUrl, setShowShortUrl] = useState(false);
|
|
|
|
const resume = useAppSelector((state) => state.resume);
|
|
const isPublic = useMemo(() => get(resume, 'public'), [resume]);
|
|
const url = useMemo(() => getResumeUrl(resume, { withHost: true }), [resume]);
|
|
const shortUrl = useMemo(() => getResumeUrl(resume, { withHost: true, shortUrl: true }), [resume]);
|
|
|
|
const handleSetVisibility = (value: boolean) => dispatch(setResumeState({ path: 'public', value }));
|
|
|
|
const handleCopyToClipboard = async () => {
|
|
const text = showShortUrl ? shortUrl : url;
|
|
|
|
await navigator.clipboard.writeText(text);
|
|
|
|
toast.success(t('common.toast.success.resume-link-copied'));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Heading path="metadata.sharing" name={t('builder.rightSidebar.sections.sharing.heading')} />
|
|
|
|
<List sx={{ padding: 0 }}>
|
|
<ListItem className="flex flex-col" sx={{ padding: 0 }}>
|
|
<div className="flex w-full items-center justify-between">
|
|
<ListItemText
|
|
primary={t('builder.rightSidebar.sections.sharing.visibility.title')}
|
|
secondary={t('builder.rightSidebar.sections.sharing.visibility.subtitle')}
|
|
/>
|
|
<Switch color="secondary" checked={isPublic} onChange={(_, value) => handleSetVisibility(value)} />
|
|
</div>
|
|
|
|
<div className="mt-2 w-full">
|
|
<TextField
|
|
disabled
|
|
fullWidth
|
|
value={showShortUrl ? shortUrl : url}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<IconButton onClick={handleCopyToClipboard}>
|
|
<CopyAll />
|
|
</IconButton>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-1 flex w-full">
|
|
<FormControlLabel
|
|
label={t('builder.rightSidebar.sections.sharing.short-url.label') as string}
|
|
control={
|
|
<Checkbox className="mr-1" checked={showShortUrl} onChange={(_, value) => setShowShortUrl(value)} />
|
|
}
|
|
/>
|
|
</div>
|
|
</ListItem>
|
|
</List>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Sharing;
|