import useTemplateStore from "../../../../store/useTemplateStore"; import { useSelectedZoneStore } from "../../../../store/useZoneStore"; const Templates = () => { const { templates, removeTemplate } = useTemplateStore(); const { setSelectedZone } = useSelectedZoneStore(); const handleDeleteTemplate = (id: string) => { removeTemplate(id); }; const handleLoadTemplate = (template: any) => { setSelectedZone((prev) => ({ ...prev, panelOrder: template.panelOrder, activeSides: Array.from( new Set([...prev.activeSides, ...template.panelOrder]) ), widgets: template.widgets, })); }; return (
{templates.map((template) => (
{template.snapshot && (
{" "} {/* 16:9 aspect ratio */} {`${template.name} handleLoadTemplate(template)} />
)}
handleLoadTemplate(template)} style={{ cursor: "pointer", fontWeight: "500", // ':hover': { // textDecoration: 'underline' // } }} > {template.name}
))} {templates.length === 0 && (
No saved templates yet. Create one in the visualization view!
)}
); }; export default Templates;