https://www.trypekto.com/assets/Collections-OzZEOMkE.js

1import{r as t,b as e,L as R,a9 as y,a0 as L,a1 as O,B as c,a2 as S,a3 as g,f as M,k as $,d as p,S as _,aG as h,D as b,aH as N,p as z,q as I,t as Z,v as H,I as T,T as B,w as A,C as V,y as W}from"./index-CPG463RQ.js";import{L as f}from"./label-L_PbVYzN.js";import{F as q}from"./FolderIcon-COLn3fDn.js";import{F as P}from"./PencilSquareIcon-DlCpgWIc.js";import{F as G}from"./ShareIcon-BY19hSK2.js";import{F as U}from"./TrashIcon-CX4gDtRL.js";import{F as J}from"./ArrowRightIcon-CRCx3VYo.js";import{F as C,a as K}from"./fade-in-CNYWr6ll.js";import{F as Q}from"./Squares2X2Icon-bC5aXooo.js";function X({title:r,titleId:o,...l},i){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:i,"aria-labelledby":o},l),r?t.createElement("title",{id:o},r):null,t.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"}))}const Y=t.forwardRef(X);function ee({title:r,titleId:o,...l},i){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:i,"aria-labelledby":o},l),r?t.createElement("title",{id:o},r):null,t.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776"}))}const se=t.forwardRef(ee);function re({title:r,titleId:o,...l},i){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:i,"aria-labelledby":o},l),r?t.createElement("title",{id:o},r):null,t.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"}))}const ae=t.forwardRef(re);function te({collection:r,onDelete:o}){const l={initial:{y:-8},hover:{y:-24,transition:{type:"spring",stiffness:400,damping:15}}};return e.jsx(R,{to:`/dashboard/collections/${r.id}`,className:"block group h-full pt-6",children:e.jsxs(y.div,{className:"relative h-full flex flex-col isolate",initial:"initial",whileHover:"hover",children:[e.jsxs(y.div,{className:"absolute left-4 right-4 top-0 h-24 bg-white border border-gray-200 rounded-t-lg z-0 shadow-sm",variants:l,children:[e.jsx("div",{className:"w-full h-6 bg-gray-50/50 rounded-t-lg border-b border-gray-100 flex items-center justify-center",children:e.jsx("div",{className:"w-8 h-1 bg-gray-200 rounded-full"})}),e.jsxs("div",{className:"p-4 opacity-50 space-y-2",children:[e.jsx("div",{className:"w-3/4 h-2 bg-gray-100 rounded"}),e.jsx("div",{className:"w-1/2 h-2 bg-gray-100 rounded"})]})]}),e.jsxs("div",{className:"flex-grow flex flex-col bg-white border border-gray-100 rounded-xl shadow-sm group-hover:shadow-md transition-all duration-300 relative z-10 overflow-hidden",children:[e.jsx("div",{className:"absolute top-0 right-0 bottom-0 w-1 bg-gray-50 border-l border-gray-100 flex flex-col gap-1 py-2 items-center justify-center opacity-50 group-hover:opacity-100 transition-opacity",children:[...Array(5)].map((i,x)=>e.jsx("div",{className:"w-0.5 h-1 bg-gray-300 rounded-full"},x))}),e.jsxs("div",{className:"p-5 flex-grow flex flex-col",children:[e.jsxs("div",{className:"flex justify-between items-start mb-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-md flex items-center justify-center border border-gray-100 bg-gray-50/50 group-hover:bg-white transition-colors",children:e.jsx(q,{className:"h-5 w-5 transition-colors duration-300",style:{color:r.color}})}),e.jsxs("div",{children:[e.jsx("h3",{className:"font-bold text-gray-900 text-lg leading-tight group-hover:text-primary transition-colors",children:r.name}),e.jsxs("p",{className:"text-[10px] font-mono text-gray-400 uppercase tracking-wider mt-0.5",children:["ID: ",r.id.slice(0,8)]})]})]}),e.jsxs(L,{children:[e.jsx(O,{asChild:!0,onClick:i=>i.preventDefault(),children:e.jsx(c,{variant:"ghost",size:"icon",className:"h-8 w-8 -mr-2 text-gray-400 hover:text-gray-900 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0",children:e.jsx(Y,{className:"h-5 w-5"})})}),e.jsxs(S,{align:"end",children:[e.jsxs(g,{children:[e.jsx(P,{className:"mr-2 h-4 w-4"})," Edit"]}),e.jsxs(g,{children:[e.jsx(G,{className:"mr-2 h-4 w-4"})," Share"]}),e.jsxs(g,{className:"text-destructive focus:text-destructive",onClick:i=>{i.stopPropagation(),o(r.id)},children:[e.jsx(U,{className:"mr-2 h-4 w-4"})," Delete"]})]})]})]}),e.jsx("p",{className:"text-sm text-gray-500 line-clamp-2 mb-6 flex-grow leading-relaxed",children:r.description||"No description provided."}),e.jsxs("div",{className:"flex items-center justify-between pt-4 border-t border-gray-50 mt-auto",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-[10px] font-mono text-gray-400 uppercase",children:"Items"}),e.jsx("span",{className:"text-sm font-medium text-gray-700 font-mono",children:String(r.item_count||0).padStart(2,"0")})]}),e.jsx("div",{className:"w-px h-6 bg-gray-100"}),e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-[10px] font-mono text-gray-400 uppercase",children:"Updated"}),e.jsx("span",{className:"text-xs text-gray-500 font-mono",children:new Date(r.updated_at).toLocaleDateString(void 0,{month:"short",day:"numeric"})})]})]}),e.jsx("div",{className:"opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0",children:e.jsx(J,{className:"h-4 w-4 text-gray-400"})})]})]})]})]})})}const oe=[{name:"Blue",value:"#3b82f6"},{name:"Purple",value:"#8b5cf6"},{name:"Green",value:"#10b981"},{name:"Orange",value:"#f59e0b"},{name:"Red",value:"#ef4444"},{name:"Pink",value:"#ec4899"},{name:"Indigo",value:"#6366f1"},{name:"Teal",value:"#14b8a6"}];function ge(){const{user:r}=M(),{toast:o}=$(),[l,i]=t.useState([]),[x,k]=t.useState(!0),[j,d]=t.useState(!1),[n,m]=t.useState({name:"",description:"",color:"#3b82f6"});t.useEffect(()=>{u()},[r]);const u=async()=>

1{if(r)try{const{data:s,error:a}=await p.from("collections").select(`
2          *,
3          collection_items(count)
4        `).eq("user_id",r.id).order("updated_at",{ascending:!1});if(a)throw a;const E=(s==null?void 0:s.map(v=>{var w;return{...v,item_count:((w=v.collection_items)==null?void 0:w.length)||0}}))||[];i(E)}catch(s){console.error("Error fetching collections:",s),o({title:"Error",description:"Failed to load collections",variant:"destructive"})}finally{k(!1)}},F=async()=>{if(!(!r||!n.name.trim()))try{const{error:s}=await p.from("collections").insert({name:n.name,description:n.description,color:n.color,user_id:r.id});if(s)throw s;o({title:"Success",description:"Collection created successfully"}),d(!1),m({name:"",description:"",color:"#3b82f6"}),u()}catch(s){console.error("Error creating collection:",s),o({title:"Error",description:"Failed to create collection",variant:"destructive"})}},D=async s=>{try{const{error:a}=await p.from("collections").delete().eq("id",s);if(a)throw a;o({title:"Success",description:"Collection deleted successfully"}),u()}catch(a){console.error("Error deleting collection:",a),o({title:"Error",description:"Failed to delete collection",variant:"destructive"})}};return x?e.jsxs("div",{className:"container mx-auto p-1 md:p-6 space-y-8",children:[e.jsx(_,{title:"Collections"}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(h,{className:"h-9 w-64"}),e.jsx(h,{className:"h-5 w-80"})]}),e.jsx(h,{className:"h-10 w-36"})]}),e.jsx("div",{className:"grid gap-6 md:grid-cols-2 lg:grid-cols-3",children:[...Array(6)].map((s,a)=>e.jsx(h,{className:"h-[200px] w-full rounded-lg"},a))})]}):e.jsx("div",{className:"min-h-screen bg-gray-50/30 pb-20",children:e.jsxs("div",{className:"container mx-auto p-2 md:p-4 space-y-8",children:[e.jsxs("div",{className:"flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-gray-100 pb-6",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("h1",{className:"text-3xl font-bold tracking-tight text-gray-900",children:"Collections"}),e.jsx("p",{className:"text-muted-foreground text-lg font-light",children:"Organize your digital assets into themed stacks."})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"hidden md:flex items-center bg-white border border-gray-200 rounded-md p-1 mr-2",children:[e.jsx(c,{variant:"ghost",size:"icon",className:"h-8 w-8 text-gray-900 bg-gray-100 rounded-sm",children:e.jsx(Q,{className:"h-4 w-4"})}),e.jsx(c,{variant:"ghost",size:"icon",className:"h-8 w-8 text-gray-400 hover:text-gray-900 rounded-sm",children:e.jsx(ae,{className:"h-4 w-4"})})]}),e.jsxs(b,{open:j,onOpenChange:d,children:[e.jsx(N,{asChild:!0,children:e.jsxs(c,{size:"lg",variant:"fancy",className:"shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all",children:[e.jsx(C,{className:"h-5 w-5"}),"New Collection"]})}),e.jsxs(z,{children:[e.jsxs(I,{children:[e.jsx(Z,{children:"Create New Collection"}),e.jsx(H,{children:"Organize your infographics by grouping them into collections"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(f,{htmlFor:"name",children:"Name"}),e.jsx(T,{id:"name",placeholder:"Collection name...",value:n.name,onChange:s=>m(a=>({...a,name:s.target.value}))})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(f,{htmlFor:"description",children:"Description"}),e.jsx(B,{id:"description",placeholder:"Optional description...",value:n.description,onChange:s=>m(a=>({...a,description:s.target.value}))})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(f,{children:"Color Tag"}),e.jsx("div",{className:"flex gap-2 flex-wrap",children:oe.map(s=>e.jsx("button",{className:`w-8 h-8 rounded-full border-2 transition-transform ${n.color===s.value?"border-foreground scale-110":"border-transparent"}`,style:{backgroundColor:s.value},onClick:()=>m(a=>({...a,color:s.value})),title:s.name},s.value))})]})]}),e.jsxs(A,{children:[e.jsx(c,{variant:"outline",onClick:()=>d(!1),children:"Cancel"}),e.jsx(c,{variant:"fancy",onClick:F,disabled:!n.name.trim(),children:"Create Collection"})]})]})]})]})]}),l.length>0?e.jsx("div",{className:"grid gap-6 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr",children:l.map((s,a)=>e.jsx(K,{delay:a*.05,children:e.jsx(te,{collection:s,onDelete:D})},s.id))}):e.jsx(V,{className:"text-center py-16 border-dashed border-2 bg-gray-50/50",children:e.jsxs(W,{children:[e.jsx("div",{className:"bg-white p-4 rounded-full w-fit mx-auto mb-4 shadow-sm border border-gray-100",children:e.jsx(se,{className:"h-8 w-8 text-gray-400"})}),e.jsx("h3",{className:"text-lg font-semibold mb-2 text-gray-900",children:"No collections yet"}),e.jsx("p",{className:"text-muted-foreground mb-6 max-w-sm mx-auto",children:"Create your first collection to organize your infographics into stacks."}),e.jsx(b,{open:j,onOpenChange:d,children:e.jsx(N,{asChild:!0,children:e.jsxs(c,{variant:"fancy",children:[e.jsx(C,{className:"mr-2 h-4 w-4"}),"Create First Collection"]})})})]})})]})})}export{ge as default};