https://hugecreative.agency/assets/MediaLibrary-CnAABArn.js

1import{c as le,r as l,q as f,j as e,af as Q,l as ne,E as F}from"./index-DZmSEQxY.js";import{U as S}from"./upload-CzzluAqA.js";import{R as L}from"./refresh-cw-CnyolglA.js";import{I}from"./image-YV6cKyE5.js";import{V as W}from"./video-DLjtplKy.js";import{G as ie}from"./grid-3x3-B18hlQGk.js";import{L as oe}from"./list-Xr7f1r2A.js";import{T as U}from"./trash-2-DSHoyoLm.js";import{P as ce}from"./plus-DJ89xDQ0.js";import{C as b}from"./check-B4y1wh56.js";import{C as $}from"./copy-CbFpmn_T.js";/**
2 * @license lucide-react v1.7.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const de=[["path",{d:"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",key:"1oefj6"}],["path",{d:"M14 2v5a1 1 0 0 0 1 1h5",key:"wfsgrz"}]],K=le("file",de);function y(a){return a<1024?`${a} B`:a<1024*1024?`${(a/1024).toFixed(1)} KB`:`${(a/(1024*1024)).toFixed(1)} MB`}function c(a){return a.type.startsWith("image/")||/\.(jpe?g|png|gif|webp|svg)$/i.test(a.filename)?"image":a.type.startsWith("video/")||/\.(mp4|mov|webm)$/i.test(a.filename)?"video":"document"}function we(){const[a,m]=l.useState([]),[d,T]=l.useState(!0),[j,A]=l.useState(""),[N,E]=l.useState(!1),[M,R]=l.useState(""),[p,z]=l.useState("grid"),[w,Z]=l.useState(""),[u,H]=l.useState("all"),[i,g]=l.useState([]),[v,B]=l.useState(null),[J,k]=l.useState(!1),[n,C]=l.useState(null),h=l.useRef(null),P=l.useRef(null);l.useEffect(()=>{V()},[]);function X(t){t.preventDefault(),k(!0)}function Y(t){P.current?.contains(t.relatedTarget)||k(!1)}function ee(t){t.preventDefault(),k(!1),O(t.dataTransfer.files)}async function V(){T(!0),A("");try{const t=await f.list();m(t)}catch(t){A(t instanceof Error?t.message:"Failed to load media")}finally{T(!1)}}async function O(t){if(!(!t||t.length===0)){E(!0),R("");try{for(const s of Array.from(t)){const r=await f.upload(s);m(x=>[r,...x])}}catch(s){R(s instanceof Error?s.message:"Upload failed")}finally{E(!1),h.current&&(h.current.value="")}}}async function _(t){const s=a.find(r=>r.id===t);if(s&&window.confirm(`Delete "${s.name}"?`))try{await f.delete(t),m(r=>r.filter(x=>x.id!==t)),g(r=>r.filter(x=>x!==t))}catch(r){alert(r instanceof Error?r.message:"Delete failed")}}async function te(){if(window.confirm(`Delete ${i.length} selected files?`)){for(const t of i)try{await f.delete(t),m(s=>s.filter(r=>r.id!==t))}catch{}g([])}}function D(t,s){navigator.clipboard.writeText(t),B(s),setTimeout(()=>B(null),2e3)}function G(t){g(s=>s.includes(t)?s.filter(r=>r!==t):[...s,t])}const o=a.filter(t=>{const s=t.name.toLowerCase().includes(w.toLowerCase()),r=c(t);return s&&(u==="all"||r===u)}),se=a.filter(t=>c(t)==="image").length,ae=a.filter(t=>c(t)==="video").length,re=a.reduce((t,s)=>t+(s.size||0),0);function q(t){const s=c(t);return s==="image"?e.jsx(I,{className:"w-5 h-5"}):s==="video"?e.jsx(W,{className:"w-5 h-5"}):e.jsx(K,{className:"w-5 h-5"})}return e.jsxs("div",{ref:P,onDragOver:X,onDragLeave:Y,onDrop:ee,className:"relative",children:[J&&e.jsx("div",{className:"absolute inset-0 bg-orange-50/95 border-4 border-dashed border-[#FF3D00] rounded-xl flex items-center justify-center z-50 pointer-events-none",children:e.jsxs("div",{className:"text-center",children:[e.jsx(S,{className:"w-12 h-12 text-[#FF3D00] mx-auto mb-3"}),e.jsx("p",{className:"text-xl font-bold text-[#FF3D00]",children:"Drop files to upload"}),e.jsx("p",{className:"text-sm text-orange-600 mt-1",children:"Images, videos, PDFs up to 10MB"})]})}),e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center justify-between mb-6 sm:mb-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-xl sm:text-2xl text-gray-900 mb-1",children:"Media Library"}),e.jsx("p",{className:"text-sm text-gray-500",children:"Manage images, videos, and documents"})]}),e.jsxs("div",{className:"flex items-center gap-2 mt-4 sm:mt-0",children:[e.jsx("button",{type:"button",onClick:V,disabled:d,className:"p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors",title:"Refresh",children:e.jsx(L,{className:`w-5 h-5 ${d?"animate-spin":""}`})}),e.jsx("input",{ref:h,type:"file",multiple:!0,accept:"image/*,video/mp4,application/pdf",className:"hidden",onChange:t=>O(t.target.files),"aria-label":"Upload files"}),e.jsxs("button",{type:"button",onClick:()=>h.current?.click(),disabled:N,className:"inline-flex items-center px-4 sm:px-6 py-2 sm:py-3 text-sm sm:text-base bg-gradient-to-r from-[#FF3D00] to-[#FF6B35] text-white rounded-lg hover:shadow-lg transition-all disabled:opacity-50",children:[N?e.jsx(L,{className:"w-4 h-4 mr-2 animate-spin"}):e.jsx(S,{className:"w-4 h-4 mr-2"}),N?"Uploading…":"Upload"]})]})]}),j&&e.jsxs("div",{className:"flex items-center gap-3 p-4 mb-6 bg-red-50 border border-red-200 rounded-xl text-red-700",children:[e.jsx(Q,{className:"w-5 h-5 flex-shrink-0"}),e.jsxs("p",{children:[j," — Check that the API key is configured in Settings."]})]}),M&&e.jsxs("div",{className:"flex items-center gap-3 p-4 mb-6 bg-red-50 border border-red-200 rounded-xl text-red-700",children:[e.jsx(Q,{className:"w-5 h-5 flex-shrink-0"}),e.jsx("p",{children:M})]}),e.jsx("div",{className:"grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6",children:[{label:"Total Files",value:a.length,color:"bg-blue-500",icon:e.jsx(K,{className:"w-5 h-5 text-white"})},{label:"Images",value:se,color:"bg-green-500",icon:e.jsx(I,{className:"w-5 h-5 text-white"})},{label:"Videos",value:ae,color:"bg-purple-500",icon:e.jsx(W,{className:"w-5 h-5 text-white"})},{label:"Storage Used",value:y(re),color:"bg-orange-500",icon:e.jsx(S,{className:"w-5 h-5 text-white"})}].map(t=>e.jsxs("div",{className:"bg-white rounded-xl p-4 sm:p-6 border border-gray-200",children:[e.jsx("div",{className:`w-10 h-10 ${t.color} rounded-lg mb-3 flex items-center justify-center`,children:t.icon}),e.jsx("p",{className:"text-gray-600 text-sm mb-1",children:t.label}),e.jsx("p",{className:"text-xl sm:text-2xl text-gray-900",children:t.value})]},t.label))}),e.jsxs("div",{className:"bg-white rounded-xl border border-gray-200 p-4 mb-6",children:[e.jsxs("div",{className:"flex flex-col sm:flex-row gap-3",children:[e.jsxs("div",{className:"flex-1 relative",children:[e.jsx(ne,{className:"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"}),e.jsx("input",{type:"text",placeholder:"Search media…",value:w,onChange:t=>Z(t.target.value),className:"w-full pl-9 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-200"})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsxs("select",{value:u,onChange:t=>H(t.target.value),title:"Filter by type","aria-label":"Filter by type",className:"px-3 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-200",children:[e.jsx("option",{value:"all",children:"All Types"}),e.jsx("option",{value:"image",children:"Images"}),e.jsx("option",{value:"video",children:"Videos"}),e.jsx("option",{value:"document",children:"Documents"})]}),e.jsxs("div",{className:"flex border border-gray-200 rounded-lg overflow-hidden",children:[e.jsx("button",{type:"button",onClick:()=>z("grid"),title:"Grid view",className:`px-3 py-2.5 transition-colors ${p==="grid"?"bg-gray-100":"bg-white hover:bg-gray-50"}`,children:e.jsx(ie,{className:"w-4 h-4 text-gray-600"})}),e.jsx("button",{type:"button",onClick:()=>z("list"),title:"List view",className:`px-3 py-2.5 border-l border-gray-200 transition-colors ${p==="list"?"bg-gray-100":"bg-white hover:bg-gray-50"}`,children:e.jsx(oe,{className:"w-4 h-4 text-gray-600"})})]})]})]}),i.length>0&&e.jsxs("div",{className:"mt-4 pt-4 border-t border-gray-200 flex items-center justify-between",children:[e.jsxs("p",{className:"text-sm text-gray-600",children:[i.length," selected"]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{type:"button",onClick:()=>g([]),className:"px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",children:"Deselect All"}),e.jsxs("button",{type:"button",onClick:te,className:"px-3 py-1.5 text-sm bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors inline-flex items-center gap-1.5",children:[e.jsx(U,{className:"w-4 h-4"})," Delete Selected"]})]})]})]}),d&&e.jsxs("div",{className:"bg-white rounded-xl border border-gray-200 p-12 text-center text-gray-400",children:[e.jsx(L,{className:"w-8 h-8 animate-spin mx-auto mb-3"}),"Loading media…"]}),!d&&!j&&o.length===0&&e.jsxs("div",{className:"bg-white rounded-xl border-2 border-dashed border-gray-300 p-12 text-center",children:[e.jsx(I,{className:"w-16 h-16 text-gray-400 mx-auto mb-4"}),e.jsx("p",{className:"text-gray-500 mb-4",children:w||u!=="all"?"No media matches your filters.":"No media files yet."}),e.jsxs("button",{type:"button",onClick:()=>h.current?.click(),className:"inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-[#FF3D00] to-[#FF6B35] text-white rounded-lg",children:[e.jsx(ce,{className:"w-4 h-4"})," Upload First File"]})]}),!d&&p==="grid"&&o.length>0&&e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:o.map(t=>e.jsxs("div",{className:`bg-white rounded-xl border-2 overflow-hidden transition-all hover:shadow-lg ${i.includes(t.id)?"border-[#FF3D00]":"border-gray-200"}`,children:[e.jsxs("div",{className:"aspect-square bg-gray-100 relative group cursor-pointer",onClick:()=>C(t),children:[c(t)!=="document"?e.jsx("img",{src:t.url,alt:t.name,className:"w-full h-full object-cover"}):e.jsx("div",{className:"w-full h-full flex items-center justify-center text-gray-400",children:q(t)}),e.jsxs("div",{className:"absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2",children:[e.jsx("button",{type:"button",onClick:()=>G(t.id),title:i.includes(t.id)?"Deselect":"Select",className:"p-2 bg-white rounded-lg hover:bg-gray-100 transition-colors",children:e.jsx(b,{className:`w-5 h-5 ${i.includes(t.id)?"text-[#FF3D00]":"text-gray-600"}`})}),e.jsx("button",{type:"button",onClick:()=>D(t.url,t.id),title:"Copy URL",className:"p-2 bg-white rounded-lg hover:bg-gray-100 transition-colors",children:v===t.id?e.jsx(b,{className:"w-5 h-5 text-green-500"}):e.jsx($,{className:"w-5 h-5 text-gray-600"})}),t.url&&e.jsx("a",{href:t.url,target:"_blank",rel:"noopener noreferrer",title:"Open",className:"p-2 bg-white rounded-lg hover:bg-gray-100 transition-colors",children:e.jsx(F,{className:"w-5 h-5 text-gray-600"})}),e.jsx("button",{type:"button",onClick:()=>_(t.id),title:"Delete","aria-label":"Delete file",className:"p-2 bg-white rounded-lg hover:bg-red-50 transition-colors",children:e.jsx(U,{className:"w-5 h-5 text-red-500"})})]}),e.jsx("div",{className:"absolute top-2 left-2 px-2 py-1 bg-black/70 text-white text-xs rounded",children:c(t)})]}),e.jsxs("div",{className:"p-3",children:[e.jsx("p",{className:"text-gray-900 text-sm truncate mb-1",title:t.name,children:t.name}),e.jsxs("div",{className:"flex items-center justify-between text-xs text-gray-500",children:[e.jsx("span",{children:y(t.size)}),t.dimensions&&e.jsxs("span",{children:[t.dimensions.width,"×",t.dimensions.height]})]})]})]},t.id))}),n&&e.jsx("div",{className:"fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4",onClick:()=>C(null),children:e.jsxs("div",{className:"bg-white rounded-xl max-w-3xl w-full overflow-hidden",onClick:t=>t.stopPropagation(),children:[e.jsxs("div",{className:"flex items-center justify-between px-4 py-3 border-b border-gray-200",children:[e.jsx("p",{className:"text-sm font-medium text-gray-900 truncate",children:n.name}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>D(n.url,n.id),className:"px-3 py-1.5 text-xs bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center gap-1.5 transition-colors",children:[v===n.id?e.jsx(b,{className:"w-3.5 h-3.5 text-green-500"}):e.jsx($,{className:"w-3.5 h-3.5"})," Copy URL"]}),e.jsxs("a",{href:n.url,target:"_blank",rel:"noopener noreferrer",className:"px-3 py-1.5 text-xs bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center gap-1.5 transition-colors",children:[e.jsx(F,{className:"w-3.5 h-3.5"})," Open"]}),e.jsx("button",{type:"button",onClick:()=>C(null),className:"p-1.5 hover:bg-gray-100 rounded-lg transition-colors","aria-label":"Close preview",children:"✕"})]})]}),c(n)==="image"&&e.jsx("img",{src:n.url,alt:n.name,className:"w-full max-h-[60vh] object-contain bg-gray-50"}),e.jsxs("div",{className:"px-4 py-3 bg-gray-50 flex gap-4 text-xs text-gray-500",children:[e.jsx("span",{children:y(n.size)}),n.dimensions&&e.jsxs("span",{children:[n.dimensions.width,"×",n.dimensions.height,"px"]}),e.jsx("span",{children:new Date(n.uploadedAt).toLocaleDateString()})]})]})}),!d&&p==="list"&&o.length>0&&e.jsx("div",{className:"bg-white rounded-xl border border-gray-200 overflow-hidden",children:e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full min-w-[600px]",children:[e.jsx("thead",{className:"bg-gray-50 border-b border-gray-200",children:e.jsxs("tr",{children:[e.jsx("th",{className:"px-4 py-3 text-left",children:e.jsx("input",{type:"checkbox","aria-label":"Select all",checked:i.length===o.length&&o.length>0,onChange:()=>g(i.length===o.length?[]:o.map(t=>

6t.id)),className:"rounded border-gray-300"})}),e.jsx("th",{className:"px-4 py-3 text-left text-xs text-gray-500 uppercase tracking-wide",children:"Name"}),e.jsx("th",{className:"px-4 py-3 text-left text-xs text-gray-500 uppercase tracking-wide",children:"Type"}),e.jsx("th",{className:"px-4 py-3 text-left text-xs text-gray-500 uppercase tracking-wide",children:"Size"}),e.jsx("th",{className:"hidden sm:table-cell px-4 py-3 text-left text-xs text-gray-500 uppercase tracking-wide",children:"Dimensions"}),e.jsx("th",{className:"hidden md:table-cell px-4 py-3 text-left text-xs text-gray-500 uppercase tracking-wide",children:"Uploaded"}),e.jsx("th",{className:"px-4 py-3 text-left text-xs text-gray-500 uppercase tracking-wide",children:"Actions"})]})}),e.jsx("tbody",{className:"divide-y divide-gray-100",children:o.map(t=>e.jsxs("tr",{className:"hover:bg-gray-50 transition-colors",children:[e.jsx("td",{className:"px-4 py-3",children:e.jsx("input",{type:"checkbox","aria-label":`Select ${t.name}`,checked:i.includes(t.id),onChange:()=>G(t.id),className:"rounded border-gray-300"})}),e.jsx("td",{className:"px-4 py-3",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 bg-gray-100 rounded overflow-hidden flex-shrink-0 flex items-center justify-center",children:c(t)!=="document"?e.jsx("img",{src:t.url,alt:t.name,className:"w-full h-full object-cover"}):e.jsx("span",{className:"text-gray-400",children:q(t)})}),e.jsx("span",{className:"text-sm text-gray-900 truncate max-w-[160px]",children:t.name})]})}),e.jsx("td",{className:"px-4 py-3",children:e.jsx("span",{className:"px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded",children:c(t)})}),e.jsx("td",{className:"px-4 py-3 text-sm text-gray-500",children:y(t.size)}),e.jsx("td",{className:"hidden sm:table-cell px-4 py-3 text-sm text-gray-500",children:t.dimensions?`${t.dimensions.width}×${t.dimensions.height}`:"—"}),e.jsx("td",{className:"hidden md:table-cell px-4 py-3 text-sm text-gray-500",children:t.uploadedAt?new Date(t.uploadedAt).toLocaleDateString():"—"}),e.jsx("td",{className:"px-4 py-3",children:e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("button",{type:"button",onClick:()=>D(t.url,t.id),title:"Copy URL",className:"p-1.5 hover:bg-gray-100 rounded-lg transition-colors",children:v===t.id?e.jsx(b,{className:"w-4 h-4 text-green-500"}):e.jsx($,{className:"w-4 h-4 text-gray-600"})}),t.url&&e.jsx("a",{href:t.url,target:"_blank",rel:"noopener noreferrer",title:"Open",className:"p-1.5 hover:bg-gray-100 rounded-lg transition-colors",children:e.jsx(F,{className:"w-4 h-4 text-gray-600"})}),e.jsx("button",{type:"button",onClick:()=>_(t.id),title:"Delete","aria-label":"Delete file",className:"p-1.5 hover:bg-red-50 rounded-lg transition-colors",children:e.jsx(U,{className:"w-4 h-4 text-red-500"})})]})})]},t.id))})]})})})]})}export{we as MediaLibrary};