feat: additional work sections

client/components/build/LeftSidebar/sections/Section.tsx

@@ -1,6 +1,6 @@
 import { Add } from '@mui/icons-material';
 import { Button } from '@mui/material';
-import { ListItem } from '@reactive-resume/schema';
+import { ListItem, Section as SectionRecord, SectionType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
@@ -10,28 +10,34 @@ import Heading from '@/components/shared/Heading';
 import List from '@/components/shared/List';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { ModalName, setModalState } from '@/store/modal/modalSlice';
-import { duplicateItem } from '@/store/resume/resumeSlice';
+import { duplicateItem, duplicateSection } from '@/store/resume/resumeSlice';
 
 import SectionSettings from './SectionSettings';
 
 type Props = {
   path: `sections.${string}`;
+  type?: SectionType;
   name?: string;
   titleKey?: string;
   subtitleKey?: string;
   isEditable?: boolean;
   isHideable?: boolean;
   isDeletable?: boolean;
+  addMore?: boolean;
+  isDuplicated?: boolean;
 };
 
 const Section: React.FC<Props> = ({
   path,
   name = 'Section Name',
+  type = 'basic',
   titleKey = 'title',
   subtitleKey = 'subtitle',
   isEditable = false,
   isHideable = false,
   isDeletable = false,
+  addMore = false,
+  isDuplicated = false,
 }) => {
   const { t } = useTranslation();
 
@@ -42,21 +48,43 @@ const Section: React.FC<Props> = ({
 
   const handleAdd = () => {
     const id = path.split('.')[1];
-    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+    let modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
 
+    if (type) {
+      modal = `builder.sections.${type}`;
+    }
     dispatch(setModalState({ modal, state: { open: true, payload: { path } } }));
   };
 
   const handleEdit = (item: ListItem) => {
     const id = path.split('.')[1];
-    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+    let modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+
     const payload = validate(id) ? { path, item } : { item };
 
+    if (isDuplicated) {
+      modal = `builder.sections.${type}`;
+      payload.path = path;
+    }
+
     dispatch(setModalState({ modal, state: { open: true, payload } }));
   };
 
   const handleDuplicate = (item: ListItem) => dispatch(duplicateItem({ path: `${path}.items`, value: item }));
 
+  const handleDuplicateSection = () => {
+    const newSection: SectionRecord = {
+      name: `${heading}`,
+      type: type,
+      visible: true,
+      columns: 2,
+      items: [],
+      isDuplicated: true
+    };
+
+    dispatch(duplicateSection({ value: newSection, type }));
+  };
+
   return (
     <>
       <Heading path={path} name={name} isEditable={isEditable} isHideable={isHideable} isDeletable={isDeletable} />
@@ -77,6 +105,16 @@ const Section: React.FC<Props> = ({
           {t<string>('builder.common.actions.add', { token: heading })}
         </Button>
       </footer>
+
+      {addMore ? (
+        <div className="py-6 text-right">
+          <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleDuplicateSection}>
+            {t<string>('builder.common.actions.duplicate')}
+          </Button>
+        </div>
+      ) : (
+        <></>
+      )}
     </>
   );
 };