Reactive-Resume/apps/client/components/build/LeftSidebar/sections/Profiles.tsx

53 lines
1.6 KiB
TypeScript

import { Add } from '@mui/icons-material';
import { Button } from '@mui/material';
import { ListItem } from '@reactive-resume/schema';
import { useTranslation } from 'next-i18next';
import Heading from '@/components/shared/Heading';
import List from '@/components/shared/List';
import { useAppDispatch } from '@/store/hooks';
import { setModalState } from '@/store/modal/modalSlice';
import { duplicateItem } from '@/store/resume/resumeSlice';
const Profiles = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const handleAdd = () => {
dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true } }));
};
const handleEdit = (item: ListItem) => {
dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true, payload: { item } } }));
};
const handleDuplicate = (item: ListItem) => {
dispatch(duplicateItem({ path: 'basics.profiles', value: item }));
};
return (
<>
<Heading path="sections.profiles" name={t('builder.leftSidebar.sections.profiles.heading')} />
<List
path="basics.profiles"
titleKey="username"
subtitleKey="network"
onEdit={handleEdit}
onDuplicate={handleDuplicate}
/>
<footer className="flex justify-end">
<Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
{t('builder.common.actions.add', {
section: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
})}
</Button>
</footer>
</>
);
};
export default Profiles;