File size: 2,138 Bytes
c30ea2a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import { Reorder } from "framer-motion";
import { MenuSection } from "@/types/resume";
import LayoutItem from "./LayoutItem";
interface LayoutPanelProps {
menuSections: MenuSection[];
activeSection: string;
setActiveSection: (id: string) => void;
toggleSectionVisibility: (id: string) => void;
updateMenuSections: (sections: MenuSection[]) => void;
removeCustomData: (sectionId: string) => void;
reorderSections: (sections: MenuSection[]) => void;
}
const LayoutSetting = ({
menuSections,
activeSection,
setActiveSection,
toggleSectionVisibility,
updateMenuSections,
removeCustomData,
reorderSections,
}: LayoutPanelProps) => {
const basicSection = menuSections.find((item) => item.id === "basic");
const draggableSections = menuSections.filter((item) => item.id !== "basic");
return (
<div className="space-y-4 rounded-lg dark:bg-neutral-900/30">
{basicSection && (
<LayoutItem
item={basicSection}
isBasic={true}
activeSection={activeSection}
setActiveSection={setActiveSection}
toggleSectionVisibility={toggleSectionVisibility}
updateMenuSections={updateMenuSections}
removeCustomData={removeCustomData}
menuSections={menuSections}
/>
)}
<Reorder.Group
axis="y"
values={draggableSections}
onReorder={(newOrder) => {
const updatedSections = [
...menuSections.filter((item) => item.id === "basic"),
...newOrder,
];
reorderSections(updatedSections);
}}
className="space-y-2"
>
{draggableSections.map((item) => (
<LayoutItem
key={item.id}
item={item}
activeSection={activeSection}
setActiveSection={setActiveSection}
toggleSectionVisibility={toggleSectionVisibility}
updateMenuSections={updateMenuSections}
removeCustomData={removeCustomData}
menuSections={menuSections}
/>
))}
</Reorder.Group>
</div>
);
};
export default LayoutSetting;
|