https://pika.style/_next/static/chunks/pages/user/library-a55b403215cb7cf8.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7597],{37069:(e,a,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/user/library",function(){return t(39496)}])},39496:(e,a,t)=>{"use strict";t.r(a),t.d(a,{default:()=>b,supabase:()=>f});var r=t(75038),s=t(56725),i=t(76430),l=t(58454),n=t(21625),d=t(83390),c=t(45609),o=t.n(c),x=t(72468),m=t(58742),u=t(74954),g=t(38220),h=t(84506),y=t(19021);let f=(0,t(73234).UU)("https://feeyaroruqlpnacnuyqt.supabase.co","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTY0NDAwNTc5NiwiZXhwIjoxOTU5NTgxNzk2fQ.IrgHK7nbn0pE4y8CFuajODgkeRzD574gt2mFMR7dZa8"),p=()=>{let{c_CloudLibrary:e}=(0,i.useContext)(l.A),[a,t]=(0,i.useState)(null);return(0,i.useEffect)(()=>{t(e)},[e]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(d.mc,{width:"1080px",className:"pt-12",children:[(0,r.jsxs)("div",{className:"flex flex-col justify-center",children:[(0,r.jsx)("h1",{className:"text-5xl md:text-6xl mb-2 font-bold font-inter dark:text-white",children:"Image Library"}),(0,r.jsx)("p",{className:"text-lg opacity-60 mt-1",children:"Images you've added in library from Screenshot editor"})]}),(0,r.jsx)("div",{className:"block mt-4",children:(0,r.jsxs)("div",{className:"px-3 text-sm py-1 rounded-lg bg-blue-100 border border-blue-500 text-blue-600  inline-flex items-center gap-1",children:[(0,r.jsx)(u.A,{}),"These images are meant only to be shared, but not hotlinked or directly used in production"]})})]}),(0,r.jsx)(d.mc,{width:"1080px",className:"mt-8 border rounded-xl p-0! dark:border-gray-700 ",children:a?.length?(0,r.jsx)("div",{className:"grid grid-cols-4 gap-4 divide-x divide-gray-100 dark:divide-gray-700",children:a?.map((e,a)=>(0,r.jsxs)("div",{className:"p-4 w-full flex items-start justify-center flex-col",children:[(0,r.jsx)("div",{className:"text-sm text-gray-500 px-2 py-px rounded-full mb-2 bg-gray-100 inline-flex dark:bg-gray-800 dark:text-gray-400",children:(0,x.B)(new Date(e?.created_at),new Date,{addSuffix:!0})}),(0,r.jsx)(o(),{target:"_blank",href:`https://pika.style/cloud/${e?.id}`,className:"mx-auto max-h-[200px]",children:(0,r.jsx)("img",{alt:e.Key,loading:"lazy",src:e?.to,className:"object-contain w-full h-full rounded-lg max-w-[90%] self-center"})}),(0,r.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,r.jsx)(d.$n,{type:"button",variant:"secondary",onClick:()=>{navigator.clipboard.writeText(`https://pika.style/cloud/${e?.id}`),m.oR.success("Link copied to clipboard")},children:"Copy Link"}),(0,r.jsx)(d.$n,{type:"button",variant:"secondary",onClick:async()=>{try{let a=await fetch("/api/storage/removeImage",{method:"POST",body:JSON.stringify({id:e.id})}),r=await a.json().catch(()=>null);if(!a.ok||r?.error)return void m.oR.error(r?.error||"Couldn't remove image, please try again");t(a=>a.filter(a=>a.id!==e.id)),m.oR.success("Image removed from library")}catch(e){m.oR.error("Couldn't remove image, please try again")}},children:(0,r.jsx)(g.A,{})})]})]},e?.id+e?.from+e?.to+a))}):a?.length?(0,r.jsxs)("div",{className:"min-h-[600px] flex items-center justify-center text-gray-400 bg-gray-50 rounded-xl dark:bg-gray-900 dark:text-gray-500 flex-col",children:[(0,r.jsx)(h.A,{size:32,className:"mb-2 opacity-50"}),"No images found in this category"]}):(0,r.jsxs)("div",{className:"min-h-[600px] flex items-center justify-center text-gray-400 bg-gray-50 rounded-xl dark:bg-gray-900 dark:text-gray-500 flex-col",children:[(0,r.jsx)(h.A,{size:32,className:"mb-2 opacity-50"}),"You haven't added or generated any images yet",(0,r.jsx)(d.$n,{as:"a",href:"/user/dashboard",variant:"secondary",className:"mt-4 font-semibold",children:"Start here"})]})})]})},b=()=>{let{c_Session:e}=(0,i.useContext)(l.A);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.bV,{title:"Image Library – Pika",noindex:!0,nofollow:!0}),(0,r.jsx)(n.Y9,{}),null===e?(0,r.jsx)("div",{className:"flex items-center justify-center h-full w-full min-h-[500px]",children:(0,r.jsx)(y.A,{size:32,className:"animate-spin leading-none opacity-70"})}):e?.id?(0,r.jsx)(p,{}):(0,r.jsx)("div",{className:"flex items-center justify-center h-full w-full min-h-[500px]",children:"Please login to view dashboard"}),(0,r.jsx)(n.wi,{})]})}}},e=>{e.O(0,[4558,1178,2468,239,1958,6394,636,6593,8792],()=>e(e.s=37069)),_N_E=e.O()}]);