2b:o1,~2b:o401,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/1ysqul-c0gptf.js" 4:I[134030,["$3"],"default"] 5:I[831544,["$3"],"default"] 26:"ViewportBoundary" 27:I[809245,["$3"],"$26"] 29:"MetadataBoundary" 2a:I[809245,["$3"],"$29"] 2b:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/2h56-cstbxs66.css","style"] :HL["/chat-static/_next/static/immutable/chunks/2blj-ty16oo9v.css","style"] :HL["/chat-static/_next/static/immutable/chunks/00ig-5h_vyw6f.css","style"] 1:X 6:X 18:X 1b:X 20:X 25:X 23:[["children",{"s":"__PAGE__","h":130,"d":{"r":"$L24","p":false,"v":"$25"}}]] 21:[["children",{"s":{"n":"id","t":"d","k":"sketchpad-shadcn-ui-theme-rINMO44ZAoN","s":null},"h":38,"d":{"r":"$L22","p":false,"v":"$6"},"c":"$Q23"}]] 1e:[["children",{"s":"(discover)","h":106,"d":{"r":"$L1f","p":false,"v":"$20"},"c":"$Q21"}]] 1c:[["children",{"s":"templates","h":106,"d":{"r":"$L1d","p":false,"v":"$6"},"c":"$Q1e"}]] 19:[["children",{"s":"(no-sidebar)","h":74,"d":{"r":"$L1a","p":false,"v":"$1b"},"c":"$Q1c"}]] 2b:oc16,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2h56-cstbxs66.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2blj-ty16oo9v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/00ig-5h_vyw6f.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0es5ktwx2x0sh.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/3jzmo4noa0mpl.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/3mtt4covw9ds-.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/0vipvuoajg-2_.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/2ron94c4y2zz0.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/3mvemo9sfjww9.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/3kb2onlo4hhwu.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/0ha3nguz8evd7.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/3cjpiu0vbgn3n.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/42onr_fte7hg-.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/366hx723h4u3b.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/1cz6nbno0w7y9.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/41t0ijk1nkphe.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/0-l2tjdo7rgxo.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/1jdxhszryiyyf.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/3mmzxybt5th7d.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/1_2_grn0tlbrx.js","async":true,"nonce":"$undefined"}],["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/072xbb9f59qg1.js","async":true,"nonce":"$undefined"}],"$L9","$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15","$L16"],"$L17"]}],"p":false,"v":"$18"},"c":"$Q19"}]] 2b:o1db,7:[["children",{"s":{"n":"variants","t":"d","k":"v0pprvariant-0-0-en-cgas","s":null},"h":122,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q8"}]] 2d:X 2e:X 2b:o712,0:{"q":"","i":false,"S":true,"r":"$1","t":{"t":{"s":"","h":90,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q7"},"h":{"r":["$","$2","h",{"children":[null,["$","$L27","dTkpmSH4RptClZmGqWSadv",{"children":"$L28"}],["$","$L2a","dTkpmSH4RptClZmGqWSadm",{"children":[["$","div",null,{"hidden":true,"children":["$","$2b",null,{"name":"Next.Metadata","children":"$L2c"}]}],null]}]]}],"p":false,"v":"$2d"}},"s":"$2e","a":"$@2f"} 2b:o1000,30:"/chat-static/_next/static/immutable/chunks/0es5ktwx2x0sh.js" 31:"/chat-static/_next/static/immutable/chunks/3jzmo4noa0mpl.js" 32:"/chat-static/_next/static/immutable/chunks/3mtt4covw9ds-.js" 33:"/chat-static/_next/static/immutable/chunks/0vipvuoajg-2_.js" 34:"/chat-static/_next/static/immutable/chunks/2ron94c4y2zz0.js" 35:"/chat-static/_next/static/immutable/chunks/3mvemo9sfjww9.js" 36:"/chat-static/_next/static/immutable/chunks/3kb2onlo4hhwu.js" 37:"/chat-static/_next/static/immutable/chunks/0ha3nguz8evd7.js" 38:"/chat-static/_next/static/immutable/chunks/3cjpiu0vbgn3n.js" 39:"/chat-static/_next/static/immutable/chunks/42onr_fte7hg-.js" 3a:"/chat-static/_next/static/immutable/chunks/366hx723h4u3b.js" 3b:"/chat-static/_next/static/immutable/chunks/1cz6nbno0w7y9.js" 3c:"/chat-static/_next/static/immutable/chunks/41t0ijk1nkphe.js" 3d:"/chat-static/_next/static/immutable/chunks/0-l2tjdo7rgxo.js" 3e:"/chat-static/_next/static/immutable/chunks/1jdxhszryiyyf.js" 3f:"/chat-static/_next/static/immutable/chunks/3mmzxybt5th7d.js" 40:"/chat-static/_next/static/immutable/chunks/1_2_grn0tlbrx.js" 41:"/chat-static/_next/static/immutable/chunks/072xbb9f59qg1.js" 42:"/chat-static/_next/static/immutable/chunks/2ortbrmzoog7i.js" 43:"/chat-static/_next/static/immutable/chunks/1yjts7gyhrs4-.js" 44:"/chat-static/_next/static/immutable/chunks/26og1bpyfkkr3.js" 45:"/chat-static/_next/static/immutable/chunks/1m-ggy76h0icp.js" 46:"/chat-static/_next/static/immutable/chunks/0qt01s45m15wx.js" 47:"/chat-static/_next/static/immutable/chunks/0bmrnr7mqq125.js" 48:"/chat-static/_next/static/immutable/chunks/3cxkytghtnjb5.js" 49:"/chat-static/_next/static/immutable/chunks/175t8gqlqy8ma.js" 4a:"/chat-static/_next/static/immutable/chunks/1t81f07l2nl_a.js" 4b:"/chat-static/_next/static/immutable/chunks/3p0ur8tex0ala.js" 4c:"/chat-static/_next/static/immutable/chunks/3gw38yxym-j2u.js" 4d:"/chat-static/_next/static/immutable/chunks/3l5ae94az6erv.js" 4e:"/chat-static/_next/static/immutable/chunks/1mbs9vpfnj-e4.js" 4f:"/chat-static/_next/static/immutable/chunks/0ytyhlmzz1-j9.js" 50:"/chat-static/_next/static/immutable/chunks/3zycbaqfaw33b.js" 51:"/chat-static/_next/static/immutable/chunks/2sc14nh2g5bd4.js" 52:"/chat-static/_next/static/immutable/chunks/20uonqf5_n_4k.js" 53:"/chat-static/_next/static/immutable/chunks/1c53lewt7qycs.js" 54:"/chat-static/_next/static/immutable/chunks/2l1a8_-2eyjhf.js" 55:"/chat-static/_next/static/immutable/chunks/2-b-n69tlmzaq.js" 56:"ScopedPromiseContextProvider" 57:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$56"] 5e:"SidebarUIProvider" 5f:I[475961,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$5e"] 60:I[990009,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"Header"] 61:I[980088,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"DynamicCMDK"] 63:"LoadingBoundaryProvider" 64:I[134030,["$3"],"$63"] 65:"/chat-static/_next/static/immutable/chunks/2lbsicg9-muxn.js" 66:"/chat-static/_next/static/immutable/chunks/0x54-j9mmodap.js" 67:"/chat-static/_next/static/immutable/chunks/3t7-ks7ncv93k.js" 68:"/chat-static/_next/static/immutable/chunks/2w_jt-oimkft1.js" 69:"/chat-static/_next/static/immutable/chunks/3w2b7tivu5kj9.js" 6a:"/chat-static/_next/static/immutable/chunks/2b59wrz340g03.js" 6b:"/chat-static/_next/static/immutable/chunks/3v3bd6x7-mssw.js" 6c:"/chat-static/_next/static/immutable/chunks/0r_5h2b:of29,w7dbh5dh.js" 6d:"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js" 6e:"/chat-static/_next/static/immutable/chunks/2dlg1c44j4_lb.js" 6f:"/chat-static/_next/static/immutable/chunks/27yzbb-nkv77_.js" 70:"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js" 71:"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js" 72:"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js" 73:"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js" 74:"/chat-static/_next/static/immutable/chunks/1hiqy6npmzfom.js" 75:"/chat-static/_next/static/immutable/chunks/21a7_6p8n3xkk.js" 76:"/chat-static/_next/static/immutable/chunks/39imuygzw_00z.js" 77:"TemplatePreviewContainer" 78:I[959794,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$77"] 79:"TemplateInfoSection" 7a:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$79"] 7b:"TemplateInfoSectionGroup" 7c:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$7b"] 7f:I[809245,["$3"],"OutletBoundary"] :HL["/chat-static/_next/static/immutable/chunks/2r4ti-hs27evh.css","style"] :HL["/chat-static/_next/static/immutable/chunks/0oyqfqfdkpyn4.css","style"] 6:C 9:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/2ortbrmzoog7i.js","async":true,"nonce":"$undefined"}] a:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/1yjts7gyhrs4-.js","async":true,"nonce":"$undefined"}] b:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/26og1bpyfkkr3.js","async":true,"nonce":"$undefined"}] c:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/1m-ggy76h0icp.js","async":true,"nonce":"$undefined"}] d:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/0qt01s45m15wx.js","async":true,"nonce":"$undefined"}] e:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/0bmrnr7mqq125.js","async":true,"nonce":"$undefined"}] f:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/3cxkytghtnjb5.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/175t8gqlqy8ma.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/1t81f07l2nl_a.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/3p0ur8tex0ala.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/3gw38yxym-j2u.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/3l5ae94az6erv.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-30",{"src":"/chat-static/_next/static/immutable/chunks/1mbs9vpfnj-e4.js","async":true,"nonce":"$undefined"}] 16:["$","script","script-31",{"src":"/chat-static/_next/static/immutable/chunks/0ytyhlmzz1-j9.js","async":true,"nonce":"$undefined"}] 2b:o5a8,1a:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3zycbaqfaw33b.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2sc14nh2g5bd4.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/20uonqf5_n_4k.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1c53lewt7qycs.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/2l1a8_-2eyjhf.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/2-b-n69tlmzaq.js","async":true,"nonce":"$undefined"}]],["$","$L57",null,{"params":null,"promises":{"scopeUserDetails":"$@58","team":"$@59","vercelProjectsFavorites":"$@5a","chats":"$@5b","sidebarProjectGroups":"$@5c","sidebarDrafts":"$@5d"},"children":["$","$L5f",null,{"children":[["$","$L60",null,{}],["$","div",null,{"className":"flex min-h-0 flex-1","children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L61",null,{}]]}]}]]}] 2b:o1f9,1d:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1f:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/2lbsicg9-muxn.js","async":true,"nonce":"$undefined"}]],"$L62"]}] 2b:o1156,22:["$","$L64",null,{"loading":[["$","div","l",{"data-testid":"template-detail-skeleton","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-20"}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"mb-0.5 flex items-center sm:mb-0","children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-10 w-64 max-w-[60vw]"}]}],["$","div",null,{"className":"flex items-center gap-1.5","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-5 rounded-full sm:size-6"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-20"}]]}]]}],["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-lg sm:h-8 sm:w-24"}]}]]}]]}],["$","div",null,{"className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w-[1600px]","children":["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col gap-9","children":[["$","$L78",null,{"children":["$","div",null,{"aria-hidden":true,"className":"flex size-full flex-col bg-v0-background-200","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-2 border-b border-v0-gray-300 px-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 mx-auto h-7 w-[min(40%,20rem)]"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 size-7"}]]}],["$","div",null,{"className":"flex flex-1 items-center justify-center p-8","children":["$","div",null,{"className":"flex w-full max-w-sm flex-col items-center gap-3","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-2/3"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-4/5"}]]}]}]]}]}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L7a",null,{"className":"flex-1","title":"About","children":["$","div",null,{"className":"flex w-full max-w-xl flex-col gap-2","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-3/4"}]]}]}],["$","$L7c",null,{"className":"w-full lg:w-80","children":[["$","$L7a",null,{"title":"Tags","children":["$","div",null,{"className":"flex flex-wrap gap-6","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-16 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-full"}]]}]}]}],["$","$L7a",null,{"title":"Share","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}]]}]}],["$","$L7a",null,{"children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full max-w-44"}]}]]}]]}]]}]}]]}],[],[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/1p__zgxp5dvuo.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/3gq2s7ocap5c-.js","async":true,"nonce":"$undefined"}]]],"children":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$L7d","forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 2b:oa94,24:["$","$2","c",{"children":["$L7e",[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2r4ti-hs27evh.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/0oyqfqfdkpyn4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0x54-j9mmodap.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/3t7-ks7ncv93k.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/2w_jt-oimkft1.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/3w2b7tivu5kj9.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/2b59wrz340g03.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/3v3bd6x7-mssw.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/0r_5hw7dbh5dh.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2dlg1c44j4_lb.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/27yzbb-nkv77_.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/1hiqy6npmzfom.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/21a7_6p8n3xkk.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/39imuygzw_00z.js","async":true,"nonce":"$undefined"}]],["$","$L7f",null,{"children":["$","$2b",null,{"name":"Next.MetadataOutlet","children":"$@80"}]}]]}] 2b:o16,2e:300 7d:["$L81",[]] 2b:o67d,88:I[339811,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"PageLayout"] 89:"ScrollFadeContainer" 8a:I[388503,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"$89"] 8b:"CommunityTabsClient" 8c:I[490134,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"$8b"] 8d:"CommunityLiveSearch" 8e:I[803568,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"$8d"] 8f:I[32970,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"ZoneProvider"] 90:I[532822,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"default"] 18:T8,variants20:T8,variants82:T18d5,2b:o18d5,(({protect:a})=>{function b(a){return new Promise((b,c)=>{if(document.querySelector(`script[src="${a}"]`))return void b();let d=document.createElement("script");d.src=a,d.async=!0,d.onload=()=>b(),d.onerror=a=>{console.error("Error loading script",a),c(a)},document.head.appendChild(d)})}var c=class a{#a;#b;#c=0;constructor(){let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,this.#e(),window.addEventListener("online",this.#f),window.addEventListener("visibilitychange",this.#f)}getChallenge=async()=>(await this.#g(),await this.#a.then(a=>"function"==typeof a?a():a));#f=()=>{if(document.hidden)return;let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,window.V_C=[],window.V_C.push=c;let d=document.querySelector('script[src*="c.js"]');d&&d.remove(),this.#c+=1};#e=()=>{if(window.V_C){let a=window.V_C.pop();a&&this.#b(a)}else window.V_C=[],window.V_C.push=this.#b};#g=()=>{let a=new URL("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/a-4-a/c.js",window.location.origin);return a.searchParams.set("i",String(this.#c)),a.searchParams.set("v",String(3)),a.searchParams.set("h",window.location.host),b(a.pathname+a.search)};#h=()=>{window.V_C=void 0};static #d(){let a,b;return{promise:new Promise((c,d)=>{a=c,b=d}),resolve:a,reject:b}}},d=class a{#a=!1;#b;constructor(a){this.#b=a}get loaded(){return this.#a}load=async()=>{this.#a||await this.#f()};#c=()=>{if(typeof globalThis.window>"u")throw Error("KPSDK is not available in the server");if(!window.KPSDK)throw Error("KPSDK is not loaded");let b=this.#b.map(b=>{let c=a.#e(b.path);return{domain:c.host,path:c.pathname,method:b.method}});try{window.KPSDK.configure(b)}catch(a){console.error("Error configuring KPSDK...",a)}};#f=async()=>{let a=this;return new Promise((c,d)=>{let e=()=>{document.removeEventListener("kpsdk-load",e),this.#c()},f=()=>{document.removeEventListener("kpsdk-ready",f),a.#a=!0,c()};document.addEventListener("kpsdk-load",e,{once:!0}),document.addEventListener("kpsdk-ready",f,{once:!0}),b("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/p.js").catch(a=>{document.removeEventListener("kpsdk-load",e),document.removeEventListener("kpsdk-ready",f),d(a)})})};static #e(a){let b;try{b=new URL(a)}catch{b=new URL(a,location.origin)}return b}},e=a=>{let b=a.replace(/[.?+^$[\]\\(){}|-]/g,"\\$&").split("*").join(".*");return RegExp(`^${b}$`)},f=({path:a,pattern:b})=>-1!==a.search(b);!function({protect:a=[]}){let b;for(let b of a)if(b.advancedOptions?.checkLevel!==void 0&&"deepAnalysis"!==b.advancedOptions.checkLevel&&"basic"!==b.advancedOptions.checkLevel)throw Error(`Invalid checkLevel "${b.advancedOptions.checkLevel}" for route "${b.path}". Must be one of: deepAnalysis, basic`);let g=new c,h=new d(a);(async function(a,b,c){let d=XMLHttpRequest.prototype.open,g=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,b,c,e,f){return this._requestUrl=b.toString(),this._requestMethod=a,d.call(this,a,b,c??!0,e,f)},XMLHttpRequest.prototype.send=async function(d){let h=this._requestUrl;if(!h||this._isReexecution)return g.call(this,d);let i=new URL(h,location.href),j=c.find(a=>f({path:i.pathname,pattern:e(a.path)}));if(null==j||j.method!==(this._requestMethod??"GET")&&"*"!==j.method)return g.call(this,d);let k=await a.getChallenge();if(this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET"),0!==k.b||b.loaded||((1===k.d||j?.advancedOptions?.checkLevel==="deepAnalysis")&&await b.load(),!b.loaded))return g.call(this,d);this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET");let l=new XMLHttpRequest;return l._isReexecution=!0,l.open(this._requestMethod||"GET",h,!0),l.setRequestHeader("x-is-human",JSON.stringify(k)),l.setRequestHeader("x-path",i.pathname),l.setRequestHeader("x-method",this._requestMethod||"GET"),this.timeout&&(l.timeout=this.timeout),this.responseType&&(l.responseType=this.responseType),this.withCredentials&&(l.withCredentials=this.withCredentials),l.onreadystatechange=()=>{Object.defineProperty(this,"readyState",{value:l.readyState,writable:!0,configurable:!0}),l.readyState===XMLHttpRequest.DONE&&(Object.defineProperty(this,"status",{value:l.status,writable:!0,configurable:!0}),Object.defineProperty(this,"statusText",{value:l.statusText,writable:!0,configurable:!0}),Object.defineProperty(this,"response",{value:l.response,writable:!0,configurable:!0}),Object.defineProperty(this,"responseText",{value:l.responseText,writable:!0,configurable:!0}),Object.defineProperty(this,"responseXML",{value:l.responseXML,writable:!0,configurable:!0}),this.getAllResponseHeaders=()=>l.getAllResponseHeaders(),this.getResponseHeader=a=>l.getResponseHeader(a)),this.onreadystatechange&&this.onreadystatechange.call(this,new Event("readystatechange"))},l.onload=a=>{this.onload&&this.onload.call(this,a)},l.onerror=a=>{this.onerror&&this.onerror.call(this,a)},l.onabort=a=>{this.onabort&&this.onabort.call(this,a)},l.ontimeout=a=>{this.ontimeout&&this.ontimeout.call(this,a)},l.onloadstart=a=>{this.onloadstart&&this.onloadstart.call(this,a)},l.onloadend=a=>{this.onloadend&&this.onloadend.call(this,a)},l.onprogress=a=>{this.onprogress&&this.onprogress.call(this,a)},l.send(d)}})(g,h,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let i=new URL(c instanceof Request?c.url:c,location.href),j=i.origin===location.origin,k=a.find(a=>f({path:i.pathname,pattern:e(a.path)})),l=d?.method??(c instanceof Request?c.method:"GET"),m=null!=k&&(k.method===l||"*"===k.method);if(null==k||!m||!j)return b(c,d);let n=await g.getChallenge(),o=new Headers(d?.headers||(c instanceof Request?c.headers:void 0));o.set("x-is-human",JSON.stringify(n)),o.set("x-path",i.pathname),o.set("x-method",l);let p={...d,headers:o};return h.loaded||0!==n.b?b(c,p):1===n.d||k?.advancedOptions?.checkLevel==="deepAnalysis"?(await h.load(),window.fetch(c,p)):b(c,p)}}({protect:a})})({ protect: [{"path":"/chat/api/vm/actions/run-pipeline","method":"POST","advancedOptions":{"checkLevel":"deepAnalysis"}},{"path":"/chat/api/chat","method":"POST"},{"path":"/chat/api/vm/actions/*","method":"POST"},{"path":"*/chat/api/vm/actions/*","method":"POST"}] });2b:o534,17:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$82"}}],"$L83","$L84","$L85","$L86"]}],"$L87"]}] 62:["$","$L88",null,{"actions":["$","div",null,{"className":"flex lg:pr-1 items-center w-full justify-between flex-row gap-2 relative","children":[["$","$L8a",null,{"leftFadeClassName":"left-0 z-20","rightFadeClassName":"right-0 z-20","showButtons":false,"className":"flex-1 min-w-0","scrollableClassName":"px-0","children":["$","$L8c",null,{}]}],["$","$2b",null,{"children":["$","$L8e",null,{}]}]]}],"titleRowClassName":"hidden","className":"flex py-6 px-4 sm:p-9","contentWrapperClassName":"flex-1 min-h-max","headerClassName":"!border-t-0","title":"Community","children":[["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","div",null,{"className":"py-4","children":["$","$L8f",null,{"zone":"chat","children":["$","$L90",null,{}]}]}]]}] 2b:o1000,91:"GeistThemeScript" 92:I[86098,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$91"] 93:I[600033,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"AppStoreMetaTag"] 94:I[86098,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"GeistProvider"] 95:I[818362,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"LocaleProvider"] 96:I[841245,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"MotionConfig"] 97:"AtomicContextSWRProvider" 98:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$97"] 99:"GlobalPromiseContextProvider" 9a:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$99"] 9d:I[827887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"JotaiProvider"] 9e:"ServerQuerySWRRuntimeProvider" 9f:I[74757,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$9e"] a1:I[815349,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"CleanupStorage"] a2:I[994115,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"Analytics"] a3:I[503803,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"SpeedInsights"] a5:I[108762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"TrackInfo"] a6:I[578386,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"PageViewTracker"] a7:I[356301,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"AutoCapture"] 83:["$","$L92",null,{"storageKey":"theme"}] 84:["$","$2b",null,{"children":["$","$L93",null,{}]}] 85:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 86:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Vercel\",\"url\":\"https://vercel.com\",\"logo\":\"https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico\",\"sameAs\":[\"https://x.com/vercel\",\"https://x.com/v0\",\"https://github.com/vercel\",\"https://www.linkedin.com/company/vercel\",\"https://www.lin2b:o1a8,kedin.com/company/v0dev\"]},{\"@context\":\"https://schema.org\",\"@type\":\"WebApplication\",\"name\":\"v0\",\"url\":\"https://v0.app\",\"description\":\"Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.\",\"applicationCategory\":[\"DeveloperApplication\",\"DesignApplication\"],\"operatingSystem\":\"All\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Vercel\"}}]"}}] 2b:o926,87:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased eEAu7a_variable dJgEwW_variable hGs1mq_variable","children":[["$","$L94",null,{"storageKey":"theme","withScript":false,"children":["$","$L95",null,{"locale":"en","children":["$","$L96",null,{"reducedMotion":"user","children":["$","$L98",null,{"routes":{"scoped":{"scopeUserDetails":{"path":"/api/chat/scoped/user","method":"GET"},"team":{"path":"/api/chat/scoped/team","method":"GET"},"vercelProjectsFavorites":{"path":"/api/chat/scoped/vercel-projects/favorites","method":"GET"},"chats":{"path":"/api/chat/scoped/chats","method":"GET"},"paginatedChats":{"path":"/api/chat/scoped/get-paginated-chats","method":"GET"},"designSystems":{"path":"/api/chat/scoped/design-systems-with-registry/list","method":"GET"},"sidebarProjectGroups":{"path":"/api/chat/scoped/sidebar-project-groups","method":"GET"},"sidebarDrafts":{"path":"/api/v2/internal/chats/sidebar-drafts","method":"GET"}},"chat":{"attributes":{"path":"/api/chat/chat/attributes","method":"GET"},"externalMeta":{"path":"/api/chat/chat/latest-external-meta","method":"GET"},"latest":{"path":"/api/chat/chat/latest","method":"GET"},"template":{"path":"/api/chat/chat/template","method":"GET"},"messages":{"path":"/api/chat/chat/messages","method":"GET"},"messagesRange":{"path":"/api/chat/chat/messages/range","method":"GET"},"gitStatus":{"path":"/api/git/status","method":"GET"}},"library":{"chatsList":{"path":"/api/chat/library/chats/list","method":"GET"},"archivedChatsList":{"path":"/api/chat/library/chats/archived","method":"GET"},"projectsList":{"path":"/api/chat/library/projects/list","method":"GET"},"filters":{"path":"/api/chat/library/filters","method":"GET"}},"project":{},"global":{"dailyModelUsage":{"path":"/api/chat/global/daily-model-usage","method":"GET"},"freeFixWithV0Usage":{"path":"/api/chat/global/free-fix-with-v0-usage","method":"GET"}}},"children":["$","$L9a",null,{"params":null,"promises":{"dailyModelUsage":"$@9b","freeFixWithV0Usage":"$@9c"},"children":[["$","$L9d",null,{"children":["$","$L9f",null,{"children":"$La0"}]}],["$","$La1",null,{}]]}]}]}]}]}],["$","$La2",null,{}],["$","$La3",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$2b",null,{"children":"$La4"}],["$","$La5",null,{}],["$","$La6",null,{}],["$","$La7",null,{}]]}] 2b:o90,28:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 2b:oe,2d:T8,variants2b:o1000,a8:"HydrateDurableAtoms" a9:I[783749,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$a8"] aa:I[359783,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"DataProvider"] ab:I[32170,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"UserProvider"] ad:"AnimatedIconProvider" ae:I[908887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$ad"] af:I[30570,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"PortalProvider"] b0:"SnowflakePublishProvider" b1:I[966820,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b0"] b2:"UserInputProvider" b3:I[472914,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b2"] b4:I[69221,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"CmdkProvider"] b5:"VirtualMachineUIStateProvider" b6:I[319228,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b5"] b7:"DeployedPreviewIframeRefProvider" b8:I[166890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b7"] b9:"PreviewSourceUIStateProvider" ba:I[197843,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b9"] bb:I[367078,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"LoaderProvider"] bc:"PromptFormUIProvider" bd:I[595358,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$bc"] be:I[242759,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"FlagsProvider"] c0:I[549011,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"NuqsAdapter"] c1:"ChatTabsProvider" c2:I[568561,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$c1"] c3:"PersonalScopeMigrationAnnouncementProvider" c4:I[206559,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$c3"] c6:"AnnouncementVisibilityProvider" c7:I[878519,["$30","$31","$32","$33","$34","$35","$36","$37","$38","2b:o719,$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$c6"] ca:I[561588,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"Toaster"] cb:I[407562,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"Toaster"] cc:"SuspendingDialogs" cd:I[840793,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$cc"] ce:I[323194,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"SignInDialog"] cf:I[279070,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"ConsentBanner"] d0:"/chat-static/_next/static/immutable/chunks/2dsrb3shrl4k7.js" d1:I[192842,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$d0"],"ChatWarning"] d2:I[15279,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"SessionManager"] 2b:o8ef,a0:["$","$La9",null,{"serverData":{"chat":null,"scoped":null,"root":{"root":{"sidebarCollapsed":false,"sidebarPreferenceSet":false,"sidebarWidth":250,"sidebarGroupOrder":[],"lastUpdated":0,"modelConfiguration":{"fast":false,"modelId":"v0-max","thinking":false,"thinkingEffort":null,"imageGenerations":false},"modelDisplayPreference":null,"lastModelPreference":null,"manualModelSelectionAnchorKey":null,"toolConfiguration":{"webSearch":true,"generateImages":true,"vercelProjectId":null,"vercelProjectName":null,"vercelProjectBranch":null,"vercelProjectGitOrg":null,"vercelProjectGitRepo":null,"customInstructionIds":[],"mcpServerIds":[],"marketplaceMcpIds":[],"autoAllowMcpTools":false},"shouldShowUpgrade":false,"chatMobilePanel":"input","chatPanelLayout":[{"id":"input","ratio":0.205,"visible":true},{"id":"output","ratio":0.795,"visible":true}],"dismissedFeatureDialogs":{},"dismissedConnectRepoCard":false,"permissionsModeV2":null}}},"children":["$","$Laa",null,{"children":["$","$Lab",null,{"expectUser":false,"userPromise":"$@ac","children":["$","$Lae",null,{"children":["$","$Laf",null,{"children":["$","$Lb1",null,{"children":["$","$Lb3",null,{"children":["$","$Lb4",null,{"children":["$","$Lb6",null,{"children":["$","$Lb8",null,{"children":["$","$Lba",null,{"children":["$","$Lbb",null,{"children":["$","$Lbd",null,{"children":["$","$Lbe",null,{"promise":"$@bf","middlewareFlags":["cgas"],"children":["$","$Lc0",null,{"children":["$","$Lc2",null,{"children":["$","$Lc4",null,{"destinationTeamIdPromise":"$@c5","children":["$","$Lc7",null,{"visiblePromise":"$@c8","children":["$","div",null,{"className":"max-h-screen-patched min-h-screen-patched flex w-full flex-col overflow-auto bg-v0-background-200","vaul-drawer-wrapper":"","children":[["$","$2b",null,{"fallback":null,"children":"$Lc9"}],["$","$Lca",null,{}],["$","$Lcb",null,{}],["$","$2b",null,{"fallback":null,"children":["$","$Lcd",null,{}]}],["$","$Lce",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Lcf",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 2b:o2a2,5d:null 81:["$","$Ld1",null,{"description":"This generation was deleted, unpublished, or no longer exists.","icon":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"circular","style":{"color":"currentColor"},"className":"size-8","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m1-5a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7.1 5.82a1 1 0 1 1 1.04 1.42c-.44.06-.89.44-.89 1.01v1h1.5v-.61a2.5 2.5 0 1 0-3-3.46l-.33.68 1.35.64z","clipRule":"evenodd"}]}],"title":"Not Found","children":null}] a4:["$","$Ld2",null,{"enabled":false}] 2b:o20,ac:"$undefined" c8:true c9:null 2b:o20,2d:0 25:0 2e:60 25:T2,id2d:T2,id2b:o8,c5:null 2b:o8b7,d3:I[144680,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"S"] d4:"KeepClientOnUpToDateSlugPath" d5:I[983440,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$d4"] d6:"TemplateFlagDialog" d7:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$d6"] d8:I[636340,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],""] d9:"TemplateStatusBadge" da:I[484402,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$d9"] db:I[834117,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"CommunityAvatar"] 2b:o1163,7e:["$","$Ld3",null,{"value":{"fallback":{"template:rINMO44ZAoN:likes":{"likeCount":419,"isLiked":false}}},"children":[["$","$Ld5",null,{"id":"rINMO44ZAoN","title":"Sketchpad - shadcn/ui theme"}],["$","$Ld7",null,{"templateId":"rINMO44ZAoN"}],["$","div",null,{"data-testid":"template-detail-content","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"data-testid":"template-detail-header","className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"max-w-full","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-v0-gray-900 flex items-center text-sm break-words gap-0.5 flex-nowrap","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$Ld8",null,{"href":"/templates","prefetch":true,"children":"Templates","data-slot":"breadcrumb-link","className":"hover:text-v0-gray-1000 transition-colors","ref":null}]}],[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"m6.75 3.94.53.53 2.82 2.82a1 1 0 0 1 0 1.42l-2.82 2.82-.53.53L5.69 11l.53-.53L8.69 8 6.22 5.53 5.69 5z","clipRule":"evenodd"}]}]}],["$","$Ld8",null,{"className":"hover:text-v0-gray-1000 transition-colors capitalize truncate","href":"/templates/components","prefetch":true,"children":"Components","data-slot":"breadcrumb-link","ref":null}]],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":"$7e:props:children:2:props:children:0:props:children:0:props:children:props:children:1:0:props:children:props:children"}]}],["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-v0-gray-1000 font-normal capitalize truncate","children":"Sketchpad - shadcn/ui theme"}]]}]}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"data-testid":"template-detail-title","className":"line-clamp-1 text-heading-32","children":"Sketchpad - shadcn/ui theme"}],["$","$Lda",null,{"status":"approved"}]]}],["$","div",null,{"className":"flex items-center flex-wrap gap-3","children":[["$","$Ld8",null,{"className":"flex items-center gap-1.5","href":"/@matsu","children":[["$","$Ldb",null,{"className":"size-5 sm:size-6","username":"matsu","teamId":"team_EfdzhKp01lFrzEh4iEuQM0TH","teamAvatarClassName":"size-3 sm:size-3.5"}],["$","p",null,{"className":"text-sm font-medium text-v0-gray-900","children":"matsu"}]]}],["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"className":"size-3","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M2.5 3.25C2.5 1.45 3.96 0 5.75 0h.5C8.05 0 9.5 1.46 9.5 3.25v.5C9.5 5.55 8.04 7 6.25 7h-.5A3.25 3.25 0 0 1 2.5 3.75zM5.75 1.5C4.78 1.5 4 2.28 4 3.25v.5c0 .97.78 1.75 1.75 1.75h.5C7.22 5.5 8 4.72 8 3.75v-.5c0-.97-.78-1.75-1.75-1.75zm-4.25 13v-1.33a4.8 4.8 0 0 1 4.33-2.67h.34a4.8 4.8 0 0 1 4.33 2.67v1.33zM5.83 9a6.3 6.3 0 0 0-5.76 3.69l-.07.15V16h12v-3.16l-.07-.15A6.3 6.3 0 0 0 6.17 9zm10.1 3.69a6.3 6.3 0 0 0-2.59-2.84l-.75 1.3c.8.46 1.48 1.16 1.91 2.02v1.33h-1V16H16v-3.16zM11.25 0h-.75v1.5h.75c.97 0 1.75.78 1.75 1.75v.5c0 .97-.78 1.75-1.75 1.75h-.75V7h.75c1.8 0 3.25-1.46 3.25-3.25v-.5c0-1.8-1.46-3.25-3.25-3.25","clipRule":"evenodd"}]}],["$","span",null,{"className":"text-[13px] leading-none","children":"1.3K"}]]}],"$Ldc","$Ldd"]}]]}]]}],"$Lde"]}]]}],"$Ldf"]}]]}] 2b:o1000,e0:"TemplateCardStatsLikesClient" e1:I[441648,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$e0"] e2:"TemplateFlagButton" e3:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$e2"] e4:"TemplateLikeButton" e5:I[605890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$e4"] e6:"TemplateBlockButton" e7:I[411379,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$e6"] e9:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"TemplateTags"] ea:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"TemplateShare"] eb:"TemplateLastUpdated" ec:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$eb"] dc:["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-dot size-4 -mx-1","children":[["$","circle","18d7e5",{"cx":"12.1","cy":"12.1","r":"1"}],"$undefined"]}] dd:["$","$Le1",null,{"templateCanonId":"rINMO44ZAoN"}] de:["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":[null,null,null,["$","$Le3",null,{}],null,null,["$","$Le5","rINMO44ZAoN",{"templateCanonId":"rINMO44ZAoN"}],null,["$","$Le7",null,{"buttonProps":{"className":"h-7 rounded-md px-2 sm:h-8 sm:rounded-lg sm:px-3"},"buttonType":"v0","template":{"blockId":"b_xIowvf68Og6","description":"A modern shadcn/ui theme","imageUrl":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/Slide%2016_9%20-%201-CHnazAD1AEqAdgi7MFl0idV4eGE2od.png","title":"Sketchpad - shadcn/ui theme","publishedToCommunity":"approved","templateCanonId":"rINMO44ZAoN","templateVersionId":"vXPGuHRg1DI","uses":1303,"isTeamTemplate":true,"likeCount":419,"vercelDeploymentUrl":null,"createdAt":"$D2025-11-07T11:27:01.399Z","category":"components","tags":["shadcnui","shadcn","theme","sketchpad","shadcndesign"],"authorUsername":"matsu","isVercel":false,"teamId":"team_EfdzhKp01lFrzEh4iEuQM0TH","liked":false},"isOwnTemplate":false}]]}] df:["$","div",null,{"2b:o369,className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w-[1600px]","children":[["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col gap-9","children":[["$","$L78","description",{"testId":"template-detail-preview","children":"$Le8"}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L7a",null,{"className":"flex-1","title":"About","children":["$","p",null,{"className":"whitespace-pre-wrap text-v0-gray-900","children":"A modern shadcn/ui theme"}]}],["$","$L7c",null,{"className":"w-full lg:w-80","children":[["$","$Le9",null,{"tags":"$de:props:children:8:props:template:tags"}],["$","$Lea",null,{"templateUrl":"https://v0.app/templates/sketchpad-shadcn-ui-theme-rINMO44ZAoN"}],["$","$Lec",null,{"updatedAt":"$D2025-11-07T11:27:02.158Z"}]]}]]}]]}],["$","$2b",null,{"fallback":null,"children":"$Led"}]]}] 2b:o2fb,ee:"ExplicitChatIdProvider" ef:I[903690,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$ee"] f0:I[838238,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"SWRDataProvider"] f1:Tf43f,2b:of43f,[V0_FILE]typescriptreact:file="activity-goal.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { MinusIcon, PlusIcon } from "lucide-react" import { Bar, BarChart } from "recharts" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer } from "@/components/ui/chart" const data = [ { goal: 400, }, { goal: 300, }, { goal: 200, }, { goal: 300, }, { goal: 200, }, { goal: 278, }, { goal: 189, }, { goal: 239, }, { goal: 300, }, { goal: 200, }, { goal: 278, }, { goal: 189, }, { goal: 349, }, ] const chartConfig = { goal: { label: "Goal", color: "var(--primary)", }, } satisfies ChartConfig export function CardsActivityGoal() { const [goal, setGoal] = React.useState(350) function onClick(adjustment: number) { setGoal(Math.max(200, Math.min(400, goal + adjustment))) } return ( Move Goal Set your daily activity goal.

{goal}

Calories/day

) } [V0_FILE]typescriptreact:file="calendar.tsx" isQuickEdit="true" isMerged="true" "use client" import { addDays } from "date-fns" import { Calendar } from "@/components/ui/calendar" import { Card, CardContent } from "@/components/ui/card" const start = new Date(2025, 5, 5) export function CardsCalendar() { return ( ) } [V0_FILE]typescriptreact:file="chat.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { ArrowUpIcon, CheckIcon, PlusIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" const users = [ { name: "Olivia Martin", email: "m@example.com", avatar: "/avatars/01.png", }, { name: "Isabella Nguyen", email: "isabella.nguyen@email.com", avatar: "/avatars/03.png", }, { name: "Emma Wilson", email: "emma@example.com", avatar: "/avatars/05.png", }, { name: "Jackson Lee", email: "lee@example.com", avatar: "/avatars/02.png", }, { name: "William Kim", email: "will@email.com", avatar: "/avatars/04.png", }, ] as const type User = (typeof users)[number] export function CardsChat() { const [open, setOpen] = React.useState(false) const [selectedUsers, setSelectedUsers] = React.useState([]) const [messages, setMessages] = React.useState([ { role: "agent", content: "Hi, how can I help you today?", }, { role: "user", content: "Hey, I'm having trouble with my account.", }, { role: "agent", content: "What seems to be the problem?", }, { role: "user", content: "I can't log in.", }, ]) const [input, setInput] = React.useState("") const inputLength = input.trim().length return ( <>

Sofia Davis

m@example.com

New message

{messages.map((message, index) => (

{message.content}

))}

) } [V0_FILE]typescriptreact:file="cookie-settings.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" export function CardsCookieSettings() { return ( Cookie Settings Manage your cookie settings here.

Strictly Necessary These cookies are essential in order to use the website and use its features.

Functional Cookies These cookies allow the website to provide personalized functionality.

) } [V0_FILE]typescriptreact:file="create-account.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function CardsCreateAccount() { return ( Create an account Enter your email below to create your account

Or continue with

Password

) } [V0_FILE]typescriptreact:file="exercise-minutes.tsx" isMerged="true" "use client" import { CartesianGrid, Line, LineChart, XAxis } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const data = [ { average: 400, today: 240, day: "Monday", }, { average: 300, today: 139, day: "Tuesday", }, { average: 200, today: 980, day: "Wednesday", }, { average: 278, today: 390, day: "Thursday", }, { average: 189, today: 480, day: "Friday", }, { average: 239, today: 380, day: "Saturday", }, { average: 349, today: 430, day: "Sunday", }, ] const chartConfig = { today: { label: "Today", color: "var(--primary)", }, average: { label: "Average", color: "var(--primary)", }, } satisfies ChartConfig export function CardsExerciseMinutes() { return ( Exercise Minutes Your exercise minutes are ahead of where you normally are. value.slice(0, 3)} /> } /> ) } [V0_FILE]typescriptreact:file="forms.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Textarea } from "@/components/ui/textarea" const plans = [ { id: "starter", name: "Starter Plan", description: "Perfect for small businesses.", price: "$10", }, { id: "pro", name: "Pro Plan", description: "More features and storage.", price: "$20", }, ] as const export function CardsForms() { return ( Upgrade your subscription You are currently on the free plan. Upgrade to the pro plan to get access to all features.

Name

Card Number

Plan

Select the plan that best fits your needs.

{plans.map((plan) => (

{plan.name}

{plan.description}

))}

Notes

</div>
          <div className="flex flex-col gap-3">
            <div className="flex items-center gap-2">
              <Checkbox id="terms" />
              <Label htmlFor="terms" className="font-normal">
                I agree to the terms and conditions
              </Label>
            </div>
            <div className="flex items-center gap-2">
              <Checkbox id="newsletter" defaultChecked />
              <Label htmlFor="newsletter" className="font-normal">
                Allow us to send you emails
              </Label>
            </div>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" size="sm">
          Cancel
        </Button>
        <Button size="sm">Upgrade Plan</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "@tanstack/react-table": "8.21.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="payment-method.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const plans = [
  {
    id: "starter",
    name: "Starter Plan",
    description: "Perfect for small businesses.",
    price: "$10",
  },
  {
    id: "pro",
    name: "Pro Plan",
    description: "Advanced features with more storage.",
    price: "$20",
  },
] as const

export function CardsPaymentMethod() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Payment Method</CardTitle>
        <CardDescription>Add a new payment method to your account.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-6">
        <div className="flex flex-col gap-3">
          <Label htmlFor="name">Name</Label>
          <Input id="name" placeholder="First Last" />
        </div>
        <fieldset className="flex flex-col gap-3">
          <legend className="text-sm font-medium">Plan</legend>
          <p className="text-muted-foreground text-sm">Select the plan that best fits your needs.</p>
          <RadioGroup defaultValue="starter" className="grid gap-3">
            {plans.map((plan) => (
              <Label
                className="has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-primary/5 flex items-start gap-3 rounded-lg border p-3"
                key={plan.id}
              >
                <RadioGroupItem value={plan.id} id={plan.name} className="data-[state=checked]:border-primary" />
                <div className="grid gap-1 font-normal">
                  <div className="font-medium">{plan.name}</div>
                  <div className="text-muted-foreground pr-2 text-xs leading-snug text-balance">{plan.description}</div>
                </div>
              </Label>
            ))}
          </RadioGroup>
        </fieldset>
        <div className="flex flex-col gap-3">
          <Label htmlFor="number">Card number</Label>
          <Input id="number" placeholder="" />
        </div>
        <div className="grid grid-cols-3 gap-4">
          <div className="flex flex-col gap-3">
            <Label htmlFor="month">Expires</Label>
            <Select>
              <SelectTrigger id="month" aria-label="Month" className="w-full">
                <SelectValue placeholder="Month" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">January</SelectItem>
                <SelectItem value="2">February</SelectItem>
                <SelectItem value="3">March</SelectItem>
                <SelectItem value="4">April</SelectItem>
                <SelectItem value="5">May</SelectItem>
                <SelectItem value="6">June</SelectItem>
                <SelectItem value="7">July</SelectItem>
                <SelectItem value="8">August</SelectItem>
                <SelectItem value="9">September</SelectItem>
                <SelectItem value="10">October</SelectItem>
                <SelectItem value="11">November</SelectItem>
                <SelectItem value="12">December</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex flex-col gap-3">
            <Label htmlFor="year">Year</Label>
            <Select>
              <SelectTrigger id="year" aria-label="Year" className="w-full">
                <SelectValue placeholder="Year" />
              </SelectTrigger>
              <SelectContent>
                {Array.from({ length: 10 }, (_, i) => (
                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
                    {new Date().getFullYear() + i}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="flex flex-col gap-3">
            <Label htmlFor="cvc">CVC</Label>
            <Input id="cvc" placeholder="CVC" />
          </div>
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Continue</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="payments.tsx" isMerged="true"
"use client"

import * as React from "react"
import {
  type ColumnDef,
  type ColumnFiltersState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  type SortingState,
  useReactTable,
  type VisibilityState,
} from "@tanstack/react-table"
import { MoreHorizontalIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const data: Payment[] = [
  {
    id: "m5gr84i9",
    amount: 316,
    status: "success",
    email: "ken99@example.com",
  },
  {
    id: "3u1reuv4",
    amount: 242,
    status: "success",
    email: "Abe45@example.com",
  },
  {
    id: "derv1ws0",
    amount: 837,
    status: "processing",
    email: "Monserrat44@example.com",
  },
  {
    id: "bhqecj4p",
    amount: 721,
    status: "failed",
    email: "carmella@example.com",
  },
  {
    id: "k9f2m3n4",
    amount: 450,
    status: "pending",
    email: "jason78@example.com",
  },
  {
    id: "p5q6r7s8",
    amount: 1280,
    status: "success",
    email: "sarah23@example.com",
  },
]

export type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

export const columns: ColumnDef<Payment>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => <div className="capitalize">{row.getValue("status")}</div>,
  },
  {
    accessorKey: "email",
    header: "Email",
    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
  },
  {
    accessorKey: "amount",
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue("amount"))

// Format the amount as a dollar amount
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount)

return <div className="text-right font-medium">{formatted}</div>
    },
  },
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      const payment = row.original

return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="size-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontalIcon />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(payment.id)}>
              Copy payment ID
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>View customer</DropdownMenuItem>
            <DropdownMenuItem>View payment details</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
]

export function CardsPayments() {
  const [sorting, setSorting] = React.useState<SortingState>([])
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
  const [rowSelection, setRowSelection] = React.useState({})

const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  })

return (
    <Card>
      <CardHeader className="flex flex-row items-center">
        <div className="grid gap-2">
          <CardTitle className="text-xl">Payments</CardTitle>
          <CardDescription>Manage your payments.</CardDescription>
        </div>
        <Button variant="secondary" size="sm" className="ml-auto shadow-none">
          Add Payment
        </Button>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="overflow-hidden rounded-md border">
          <Table>
            <TableHeader>
              {table.getHeaderGroups().map((headerGroup) => (
                <TableRow key={headerGroup.id}>
                  {headerGroup.headers.map((header) => {
                    return (
                      <TableHead
                        key={header.id}
                        className="data-[name=actions]:w-10 data-[name=amount]:w-24 data-[name=select]:w-10 data-[name=status]:w-24 [&:has([role=checkbox])]:pl-3"
                        data-name={header.id}
                      >
                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                      </TableHead>
                    )
                  })}
                </TableRow>
              ))}
            </TableHeader>
            <TableBody>
              {table.getRowModel().rows?.length ? (
                table.getRowModel().rows.map((row) => (
                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                    {row.getVisibleCells().map((cell) => (
                      <TableCell
                        key={cell.id}
                        className="data-[name=actions]:w-10 data-[name=amount]:w-24 data-[name=select]:w-10 data-[name=status]:w-24 [&:has([role=checkbox])]:pl-3"
                        data-name={cell.column.id}
                      >
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </TableCell>
                    ))}
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={columns.length} className="h-24 text-center">
                    No results.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
        <div className="flex items-center justify-end gap-2">
          <div className="text-muted-foreground flex-1 text-sm">
            {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s)
            selected.
          </div>
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
            >
              Previous
            </Button>
            <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
              Next
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="report-issue.tsx" isMerged="true"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export function CardsReportIssue() {
  const id = React.useId()

return (
    <Card>
      <CardHeader>
        <CardTitle>Report an issue</CardTitle>
        <CardDescription>What area are you having problems with?</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-6">
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="flex flex-col gap-3">
            <Label htmlFor={`area-${id}`}>Area</Label>
            <Select defaultValue="billing">
              <SelectTrigger id={`area-${id}`} aria-label="Area" className="w-full">
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="team">Team</SelectItem>
                <SelectItem value="billing">Billing</SelectItem>
                <SelectItem value="account">Account</SelectItem>
                <SelectItem value="deployments">Deployments</SelectItem>
                <SelectItem value="support">Support</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex flex-col gap-3">
            <Label htmlFor={`security-level-${id}`}>Security Level</Label>
            <Select defaultValue="2">
              <SelectTrigger
                id={`security-level-${id}`}
                className="w-full [&_span]:!block [&_span]:truncate"
                aria-label="Security Level"
              >
                <SelectValue placeholder="Select level" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">Severity 1 (Highest)</SelectItem>
                <SelectItem value="2">Severity 2</SelectItem>
                <SelectItem value="3">Severity 3</SelectItem>
                <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <div className="flex flex-col gap-3">
          <Label htmlFor={`subject-${id}`}>Subject</Label>
          <Input id={`subject-${id}`} placeholder="I need help with..." />
        </div>
        <div className="flex flex-col gap-3">
          <Label htmlFor={`description-${id}`}>Description</Label>
          <Textarea
            id={`description-${id}`}
            placeholder="Please include all information relevant to your issue."
            className="min-h-28"
          />
        </div>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="ghost" size="sm">
          Cancel
        </Button>
        <Button size="sm">Submit</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="share.tsx" isMerged="true"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"

const people = [
  {
    name: "Olivia Martin",
    email: "m@example.com",
    avatar: "/avatars/03.png",
  },
  {
    name: "Isabella Nguyen",
    email: "b@example.com",
    avatar: "/avatars/04.png",
  },
  {
    name: "Sofia Davis",
    email: "p@example.com",
    avatar: "/avatars/05.png",
  },
  {
    name: "Ethan Thompson",
    email: "e@example.com",
    avatar: "/avatars/01.png",
  },
]

export function CardsShare() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Share this document</CardTitle>
        <CardDescription>Anyone with the link can view this document.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-2">
          <Label htmlFor="link" className="sr-only">
            Link
          </Label>
          <Input id="link" value="http://example.com/link/to/document" className="h-8" readOnly />
          <Button size="sm" variant="outline" className="shadow-none bg-transparent">
            Copy Link
          </Button>
        </div>
        <Separator className="my-4" />
        <div className="flex flex-col gap-4">
          <div className="text-sm font-medium">People with access</div>
          <div className="grid gap-6">
            {people.map((person) => (
              <div key={person.email} className="flex items-center justify-between gap-4">
                <div className="flex items-center gap-4">
                  <Avatar>
                    <AvatarImage src={person.avatar || "/placeholder.svg"} alt="Image" />
                    <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="text-sm leading-none font-medium">{person.name}</p>
                    <p className="text-muted-foreground text-sm">{person.email}</p>
                  </div>
                </div>
                <Select defaultValue="edit">
                  <SelectTrigger className="ml-auto pr-2" aria-label="Edit" size="sm">
                    <SelectValue placeholder="Select" />
                  </SelectTrigger>
                  <SelectContent align="end">
                    <SelectItem value="edit">Can edit</SelectItem>
                    <SelectItem value="view">Can view</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="stats.tsx" isMerged="true"
"use client"

import { Area, AreaChart, Line, LineChart } from "recharts"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { type ChartConfig, ChartContainer } from "@/components/ui/chart"

const data = [
  {
    revenue: 10400,
    subscription: 40,
  },
  {
    revenue: 14405,
    subscription: 90,
  },
  {
    revenue: 9400,
    subscription: 200,
  },
  {
    revenue: 8200,
    subscription: 278,
  },
  {
    revenue: 7000,
    subscription: 89,
  },
  {
    revenue: 9600,
    subscription: 239,
  },
  {
    revenue: 11244,
    subscription: 78,
  },
  {
    revenue: 26475,
    subscription: 89,
  },
]

const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "var(--primary)",
  },
  subscription: {
    label: "Subscriptions",
    color: "var(--primary)",
  },
} satisfies ChartConfig

export function CardsStats() {
  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
      <Card>
        <CardHeader>
          <CardDescription>Total Revenue</CardDescription>
          <CardTitle className="text-3xl">$15,231.89</CardTitle>
          <CardDescription>+20.1% from last month</CardDescription>
        </CardHeader>
        <CardContent className="pb-0">
          <ChartContainer config={chartConfig} className="h-[80px] w-full">
            <LineChart
              data={data}
              margin={{
                top: 5,
                right: 10,
                left: 10,
                bottom: 0,
              }}
            >
              <Line
                type="monotone"
                strokeWidth={2}
                dataKey="revenue"
                stroke="var(--color-revenue)"
                activeDot={{
                  r: 6,
                }}
              />
            </LineChart>
          </ChartContainer>
        </CardContent>
      </Card>
      <Card className="pb-0 lg:hidden xl:flex">
        <CardHeader className="flex flex-row items-center">
          <div className="grid gap-2">
            <CardDescription>Subscriptions</CardDescription>
            <CardTitle className="text-3xl">+2,350</CardTitle>
            <CardDescription>+180.1% from last month</CardDescription>
          </div>
          <Button variant="ghost" size="sm" className="ml-auto shadow-none">
            View More
          </Button>
        </CardHeader>
        <CardContent className="mt-auto max-h-[124px] flex-1 p-0">
          <ChartContainer config={chartConfig} className="size-full">
            <AreaChart
              data={data}
              margin={{
                left: 0,
                right: 0,
              }}
            >
              <Area
                dataKey="subscription"
                fill="var(--color-subscription)"
                fillOpacity={0.05}
                stroke="var(--color-subscription)"
                strokeWidth={2}
                type="monotone"
              />
            </AreaChart>
          </ChartContainer>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="team-members.tsx" isMerged="true"
"use client"

import { ChevronDown } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

const teamMembers = [
  {
    name: "Sofia Davis",
    email: "m@example.com",
    avatar: "/avatars/01.png",
    role: "Owner",
  },
  {
    name: "Jackson Lee",
    email: "p@example.com",
    avatar: "/avatars/02.png",
    role: "Developer",
  },
  {
    name: "Isabella Nguyen",
    email: "i@example.com",
    avatar: "/avatars/03.png",
    role: "Billing",
  },
]

const roles = [
  {
    name: "Viewer",
    description: "Can view and comment.",
  },
  {
    name: "Developer",
    description: "Can view, comment and edit.",
  },
  {
    name: "Billing",
    description: "Can view, comment and manage billing.",
  },
  {
    name: "Owner",
    description: "Admin-level access to all resources.",
  },
]

export function CardsTeamMembers() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Team Members</CardTitle>
        <CardDescription>Invite your team members to collaborate.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-6">
        {teamMembers.map((member) => (
          <div key={member.name} className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <Avatar className="border">
                <AvatarImage src={member.avatar || "/placeholder.svg"} alt="Image" />
                <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col gap-0.5">
                <p className="text-sm leading-none font-medium">{member.name}</p>
                <p className="text-muted-foreground text-xs">{member.email}</p>
              </div>
            </div>
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" size="sm" className="ml-auto shadow-none bg-transparent">
                  {member.role} <ChevronDown />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" align="end">
                <Command>
                  <CommandInput placeholder="Select role..." />
                  <CommandList>
                    <CommandEmpty>No roles found.</CommandEmpty>
                    <CommandGroup>
                      {roles.map((role) => (
                        <CommandItem key={role.name}>
                          <div className="flex flex-col">
                            <p className="text-sm font-medium">{role.name}</p>
                            <p className="text-muted-foreground">{role.description}</p>
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { CardsDemo } from "@/index"

export default function HomePage() {
  return (
      <CardsDemo />
  )
}
[V0_FILE]typescriptreact:file="index.tsx" isQuickEdit="true" isMerged="true"
import { CardsActivityGoal } from "./activity-goal";
import { CardsCalendar } from "./calendar";
import { CardsChat } from "./chat";
import { CardsCookieSettings } from "./cookie-settings";
import { CardsCreateAccount } from "./create-account";
import { CardsExerciseMinutes } from "./exercise-minutes";
import { CardsForms } from "./forms";
import { CardsPayments } from "./payments";
import { CardsReportIssue } from "./report-issue";
import { CardsShare } from "./share";
import { CardsStats } from "./stats";
import { CardsTeamMembers } from "./team-members";

export function CardsDemo() {
  return (
    <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 bg-muted p-5 md:p-6 overflow-x-auto">
      <div className="grid gap-4 lg:col-span-4 xl:col-span-6">
        <CardsStats />
        <div className="grid gap-1 sm:grid-cols-[auto_1fr] md:hidden">
          <CardsCalendar />
          <div className="pt-3 sm:pt-0 sm:pl-2 xl:pl-4">
            <CardsActivityGoal />
          </div>
          <div className="pt-3 sm:col-span-2 xl:pt-4">
            <CardsExerciseMinutes />
          </div>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
          <div className="flex flex-col gap-4">
            <CardsForms />
            <CardsTeamMembers />
            <CardsCookieSettings />
          </div>
          <div className="flex flex-col gap-4">
            <CardsCreateAccount />
            <CardsChat />
            <div className="hidden xl:block">
              <CardsReportIssue />
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-4 lg:col-span-6 xl:col-span-5">
        <div className="hidden gap-1 sm:grid-cols-[auto_1fr] md:grid">
          <div className="pt-3 sm:col-span-2 lg:pt-0">
            <CardsExerciseMinutes />
          </div>
        </div>
        <div className="hidden md:block">
          <CardsPayments />
        </div>
        <CardsShare />
        <div className="xl:hidden">
          <CardsReportIssue />
        </div>
      </div>
    </div>
  );
}
[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--radius-sm: var(--radius);
--radius-md: var(--radius);
--radius-lg: var(--radius);
--radius-xl: var(--radius);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl)
}
:root {
--background: oklch(0.9721 0.0158 110.5501);
--foreground: oklch(0.5066 0.2501 271.8903);
--card: oklch(0.9721 0.0158 110.5501);
--card-foreground: oklch(0.5066 0.2501 271.8903);
--popover: oklch(0.9721 0.0158 110.5501);
--popover-foreground: oklch(0.5066 0.2501 271.8903);
--primary: oklch(0.5066 0.2501 271.8903);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(1 0 0);
--secondary-foreground: oklch(0.5066 0.2501 271.8903);
--muted: oklch(0.9189 0.0147 106.6853);
--muted-foreground: oklch(0.5066 0.2501 271.8903);
--accent: oklch(0.9168 0.0214 109.7161);
--accent-foreground: oklch(0.4486 0.2266 271.5512);
--destructive: oklch(0.63 0.19 23.03);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.5066 0.2501 271.8903);
--input: oklch(0.5066 0.2501 271.8903);
--ring: oklch(0.468 0.2721 279.6007);
--chart-1: oklch(0.5066 0.2501 271.8903);
--chart-2: oklch(0.7 0.19 48);
--chart-3: oklch(0.77 0.2 131);
--chart-4: oklch(0.68 0.15 237);
--chart-5: oklch(0.66 0.21 354);
--sidebar: oklch(0.9721 0.0158 110.5501);
--sidebar-foreground: oklch(0.5066 0.2501 271.8903);
--sidebar-primary: oklch(0.5066 0.2501 271.8903);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.9168 0.0214 109.7161);
--sidebar-accent-foreground: oklch(0.4486 0.2266 271.5512);
--sidebar-border: oklch(0.4486 0.2266 271.5512);
--sidebar-ring: oklch(0.4486 0.2266 271.5512);
--font-sans: Geist Mono;
--shadow-2xs: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.07);
--shadow-xs: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.07);
--shadow-sm: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
4px 1px 2px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
--shadow: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
4px 1px 2px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
--shadow-md: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
4px 2px 4px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
--shadow-lg: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
4px 4px 6px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
--shadow-xl: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
4px 8px 10px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
--shadow-2xl: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.38);
--radius: 0rem;
}
.dark {
--background: oklch(0.256 0.151 268.343);
--foreground: oklch(0.972 0.016 110.55);
--card: oklch(0.256 0.151 268.343);
--card-foreground: oklch(0.972 0.016 110.55);
--popover: oklch(0.507 0.25 271.89);
--popover-foreground: oklch(0.972 0.016 110.55);
--primary: oklch(0.972 0.016 110.55);
--primary-foreground: oklch(0.253 0.094 275.725);
--secondary: oklch(1 0 0 / 0.2);
--secondary-foreground: oklch(1 0 0);
--muted: oklch(0.228 0.127 269.556);
--muted-foreground: oklch(0.972 0.016 110.55);
--accent: oklch(0.228 0.127 269.556);
--accent-foreground: oklch(0.972 0.016 110.55);
--destructive: oklch(0.711 0.166 22.216);
--destructive-foreground: oklch(0 0 0);
--border: oklch(0.427 0.149 277.089);
--input: oklch(0.427 0.149 277.089);
--ring: oklch(1 0 0);
--chart-1: oklch(0.972 0.016 110.55);
--chart-2: oklch(0.7 0.19 48);
--chart-3: oklch(0.77 0.2 131);
--chart-4: oklch(0.68 0.15 237);
--chart-5: oklch(0.66 0.21 354);
--sidebar: oklch(0.256 0.151 268.343);
--sidebar-foreground: oklch(0.972 0.016 110.55);
--sidebar-primary: oklch(0.507 0.25 271.89);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.416 0.203 272.082);
--sidebar-accent-foreground: oklch(0.972 0.016 110.55);
--sidebar-border: oklch(0.972 0.016 110.55);
--sidebar-ring: oklch(0.972 0.016 110.55);
--sidebar-background: oklch(0.253 0.094 275.725);
--shadow-2xs: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
--shadow-xs: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
--shadow-sm: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
--shadow: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
--shadow-md: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
--shadow-lg: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
--shadow-xl: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
--shadow-2xl: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="components/theme-switcher.tsx"
"use client"

import { Moon, Sun } from "lucide-react"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"

export function ThemeSwitcher() {
  const [theme, setTheme] = useState<"light" | "dark">("light")

useEffect(() => {
    // Check if theme is already set in localStorage
    const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches

const initialTheme = savedTheme || (prefersDark ? "dark" : "light")
    setTheme(initialTheme)

if (initialTheme === "dark") {
      document.documentElement.classList.add("dark")
    }
  }, [])

const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light"
    setTheme(newTheme)
    localStorage.setItem("theme", newTheme)

if (newTheme === "dark") {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }

return (
    <Button
      variant="outline"
      size="icon"
      onClick={toggleTheme}
      className="fixed top-3 right-3 z-50 h-12 w-12 bg-white text-black border-black hover:bg-gray-50 hover:text-black/80"
      aria-label="Toggle theme"
    >
      {theme === "light" ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist_Mono } from "next/font/google"
import "./globals.css"
import { Suspense } from "react"
import { ThemeSwitcher } from "@/components/theme-switcher"

const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-geist-mono",
})

export const metadata: Metadata = {
  title: "v0 App",
  description: "Created with v0",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${geistMono.variable} antialiased`}>
      <body className="font-mono">
        <Suspense>{children}</Suspense>
        <ThemeSwitcher />
      </body>
    </html>
  )
}2b:o20e,e8:["$","$Lef",null,{"chatId":"zPhbNZruat9","children":["$","$Lf0",null,{"data":{"@\"active-block\",\"zPhbNZruat9\",":{"id":"b_xIowvf68Og6","messageId":"3Hy695ux4lVBOytP1QRzcA4I64oIg4re","source":"$f1","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Adding theme switcher","taskNameComplete":"Added theme switcher"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"zPhbNZruat9\",":false},"children":"$Lf2"}]}]
2b:o634,f3:"PublishedPageProvider"
f4:I[845210,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$f3"]
f5:"FullscreenContainer"
f6:I[481556,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$f5"]
f7:"TemplateBlockViewClient"
f8:I[552151,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$f7"]
f2:["$","$Lf4",null,{"children":["$","$Lf6",null,{"mode":"$undefined","children":["$","$Lf8",null,{"block":"$e8:props:children:props:data:@\"active-block\",\"zPhbNZruat9\",","allowMobileFullscreen":true,"initialSize":"$undefined","title":"Sketchpad - shadcn/ui theme","templateCanonId":"rINMO44ZAoN","templateVersionId":"vXPGuHRg1DI","authorizePublicFrame":true,"vmEnabled":false,"canViewConsole":false,"vercelDeploymentUrl":null}]}]}]
2b:o299,ed:["$","div",null,{"data-testid":"template-detail-related","className":"w-full flex flex-col gap-9","children":[["$","$L7a",null,{"title":"More from matsu","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lf9","$Lfa","$Lfb"]}]}]}],["$","$L7a",null,{"title":"More Templates Like This","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lfc","$Lfd","$Lfe"]}]}]}]]}]
2b:o2d,2e:C
2d:C
1:C
25:C
20:C
1b:C
18:C
2f:[48778]
2b:C
</article></body></html>