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 */}

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;