125 lines
3.6 KiB
TypeScript
125 lines
3.6 KiB
TypeScript
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 (
|
|
<div
|
|
className="template-list"
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
|
|
gap: "1rem",
|
|
padding: "1rem",
|
|
}}
|
|
>
|
|
{templates.map((template) => (
|
|
<div
|
|
key={template.id}
|
|
className="template-item"
|
|
style={{
|
|
border: "1px solid #e0e0e0",
|
|
borderRadius: "8px",
|
|
padding: "1rem",
|
|
transition: "box-shadow 0.3s ease",
|
|
}}
|
|
>
|
|
{template.snapshot && (
|
|
<div style={{ position: "relative", paddingBottom: "56.25%" }}>
|
|
{" "}
|
|
{/* 16:9 aspect ratio */}
|
|
<img
|
|
src={template.snapshot} // Corrected from template.image to template.snapshot
|
|
alt={`${template.name} preview`}
|
|
style={{
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
borderRadius: "4px",
|
|
cursor: "pointer",
|
|
transition: "transform 0.3s ease",
|
|
// ':hover': {
|
|
// transform: 'scale(1.05)'
|
|
// }
|
|
}}
|
|
onClick={() => handleLoadTemplate(template)}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginTop: "0.5rem",
|
|
}}
|
|
>
|
|
<div
|
|
onClick={() => handleLoadTemplate(template)}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontWeight: "500",
|
|
// ':hover': {
|
|
// textDecoration: 'underline'
|
|
// }
|
|
}}
|
|
>
|
|
{template.name}
|
|
</div>
|
|
<button
|
|
onClick={() => handleDeleteTemplate(template.id)}
|
|
style={{
|
|
padding: "0.25rem 0.5rem",
|
|
background: "#ff4444",
|
|
color: "white",
|
|
border: "none",
|
|
borderRadius: "4px",
|
|
cursor: "pointer",
|
|
transition: "opacity 0.3s ease",
|
|
// ':hover': {
|
|
// opacity: 0.8
|
|
// }
|
|
}}
|
|
aria-label="Delete template"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{templates.length === 0 && (
|
|
<div
|
|
style={{
|
|
textAlign: "center",
|
|
color: "#666",
|
|
padding: "2rem",
|
|
gridColumn: "1 / -1",
|
|
}}
|
|
>
|
|
No saved templates yet. Create one in the visualization view!
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Templates;
|