e2:"ExplicitChatIdProvider" e3:I[903690,["$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"],"$e2"] e4:I[838238,["$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"],"SWRDataProvider"] 32:o1,~32:o434,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/3hgpkj-xzfw6u.js" 4:I[381307,["$3"],"default"] 5:I[934914,["$3"],"default"] 26:"ViewportBoundary" 27:I[176645,["$3"],"$26"] 29:"MetadataBoundary" 2a:I[176645,["$3"],"$29"] 2b:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/27u3l0930bcg6.css","style"] :HL["/chat-static/_next/static/immutable/chunks/120delrtkghfw.css","style"] :HL["/chat-static/_next/static/immutable/chunks/176nhfyswbwwb.css","style"] :HL["/chat-static/_next/static/immutable/chunks/2va7g60oc736i.css","style"] 1:X 6:X 18:X 1b:X 20:X 25:X 23:[["children",{"s":"__PAGE__","h":162,"d":{"r":"$L24","p":false,"v":"$25"}}]] 21:[["children",{"s":{"n":"id","t":"d","k":"rINMO44ZAoN","s":null},"h":102,"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"}]] 32:oc43,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/27u3l0930bcg6.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/120delrtkghfw.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/176nhfyswbwwb.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2va7g60oc736i.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0r1ememjedk27.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/0x4-3nkgsq4e6.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/0_szic-zyfps5.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/1j-kqadofzclg.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/3ns0-t8rn_3z7.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2hnc1lvy4flvw.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/0ndudxt1u55xy.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/0ncj9n7ev6vh1.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0xd1jmbsccuw8.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/3ezjq7shv0amj.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/3vwuml-2j-v_n.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/2opuakn4fr21i.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/0b_epuoqrnt9r.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/343w1ihk7sf63.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"}]] 32:o1d7,7:[["children",{"s":{"n":"variants","t":"d","k":"v0pprvariant-0-0-en-","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 32:o716,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","atDSFPjFLOLZ27gjnYq-Rv",{"children":"$L28"}],["$","div","atDSFPjFLOLZ27gjnYq-Rm",{"hidden":true,"children":["$","$L2a",null,{"children":["$","$2b",null,{"name":"Next.Metadata","children":"$L2c"}]}]}]]}],"p":false,"v":"$2d"}},"s":"$2e","a":"$@2f","w":"$@30"} 32:o1000,31:"/chat-static/_next/static/immutable/chunks/0r1ememjedk27.js" 32:"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js" 33:"/chat-static/_next/static/immutable/chunks/0x4-3nkgsq4e6.js" 34:"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js" 35:"/chat-static/_next/static/immutable/chunks/0_szic-zyfps5.js" 36:"/chat-static/_next/static/immutable/chunks/1j-kqadofzclg.js" 37:"/chat-static/_next/static/immutable/chunks/3ns0-t8rn_3z7.js" 38:"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js" 39:"/chat-static/_next/static/immutable/chunks/2hnc1lvy4flvw.js" 3a:"/chat-static/_next/static/immutable/chunks/0ndudxt1u55xy.js" 3b:"/chat-static/_next/static/immutable/chunks/0ncj9n7ev6vh1.js" 3c:"/chat-static/_next/static/immutable/chunks/0xd1jmbsccuw8.js" 3d:"/chat-static/_next/static/immutable/chunks/3ezjq7shv0amj.js" 3e:"/chat-static/_next/static/immutable/chunks/3vwuml-2j-v_n.js" 3f:"/chat-static/_next/static/immutable/chunks/2opuakn4fr21i.js" 40:"/chat-static/_next/static/immutable/chunks/0b_epuoqrnt9r.js" 41:"/chat-static/_next/static/immutable/chunks/343w1ihk7sf63.js" 42:"/chat-static/_next/static/immutable/chunks/1lff788ic9m6v.js" 43:"/chat-static/_next/static/immutable/chunks/3nfhzou9aygx6.js" 44:"/chat-static/_next/static/immutable/chunks/1t4aphgbcggb9.js" 45:"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js" 46:"/chat-static/_next/static/immutable/chunks/02pdgqm2qxcw6.js" 47:"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js" 48:"/chat-static/_next/static/immutable/chunks/1a9b2_it0a8j6.js" 49:"/chat-static/_next/static/immutable/chunks/3137kxq4-rxwu.js" 4a:"/chat-static/_next/static/immutable/chunks/2u7m0dym4233-.js" 4b:"/chat-static/_next/static/immutable/chunks/024-t3_x03fhs.js" 4c:"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js" 4d:"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js" 4e:"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js" 4f:"/chat-static/_next/static/immutable/chunks/1dj46qho-6-dt.js" 50:"/chat-static/_next/static/immutable/chunks/2wz6bur4axhh_.js" 51:"/chat-static/_next/static/immutable/chunks/1dl0dkng3xad8.js" 52:"/chat-static/_next/static/immutable/chunks/2ba0cut0gfset.js" 53:"/chat-static/_next/static/immutable/chunks/13ptl36d69n6c.js" 54:"ScopedPromiseContextProvider" 55:I[850359,["$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"] 5c:"SidebarUIProvider" 5d:I[475961,["$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"],"$5c"] 5e:I[990009,["$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"],"Header"] 5f:I[980088,["$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"],"DynamicCMDK"] 61:"LoadingBoundaryProvider" 62:I[381307,["$3"],"$61"] 63:"/chat-static/_next/static/immutable/chunks/2wrgkuw5lza7b.js" 64:"/chat-static/_next/static/immutable/chunks/0iv1vmo68w9j8.js" 65:"/chat-static/_next/static/immutable/chunks/1ur-u101ft1rh.js" 66:"/chat-static/_next/static/immutable/chunks/2et5rig-26l7f.js" 67:"/chat-static/_next/static/immutable/chunks/0_gorie14y0z_.js" 68:"TemplatePreviewContainer" 69:I[959794,["$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","$63","$64","$65","$66","$67"],"$68"] 6a:"TemplateInfoSection" 6b:I[164762,["$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44",32:ofb6,"$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67"],"$6a"] 6c:"TemplateInfoSectionGroup" 6d:I[164762,["$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","$63","$64","$65","$66","$67"],"$6c"] 70:I[176645,["$3"],"OutletBoundary"] 6:C 9:["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/1lff788ic9m6v.js","async":true,"nonce":"$undefined"}] a:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/3nfhzou9aygx6.js","async":true,"nonce":"$undefined"}] b:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/1t4aphgbcggb9.js","async":true,"nonce":"$undefined"}] c:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js","async":true,"nonce":"$undefined"}] d:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/02pdgqm2qxcw6.js","async":true,"nonce":"$undefined"}] e:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js","async":true,"nonce":"$undefined"}] f:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/1a9b2_it0a8j6.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/3137kxq4-rxwu.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/2u7m0dym4233-.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/024-t3_x03fhs.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js","async":true,"nonce":"$undefined"}] 16:["$","script","script-30",{"src":"/chat-static/_next/static/immutable/chunks/1dj46qho-6-dt.js","async":true,"nonce":"$undefined"}] 1a:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/2wz6bur4axhh_.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/1dl0dkng3xad8.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/2ba0cut0gfset.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/13ptl36d69n6c.js","async":true,"nonce":"$undefined"}]],["$","$L55",null,{"params":null,"promises":{"scopeUserDetails":"$@56","team":"$@57","vercelProjectsFavorites":"$@58","chats":"$@59","sidebarProjectGroups":"$@5a","sidebarDrafts":"$@5b"},"children":["$","$L5d",null,{"children":[["$","$L5e",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"}]}],["$","$L5f",null,{}]]}]}]]}] 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/2wrgkuw5lza7b.js","async":true,"nonce":"$undefined"}]],"$L60"]}] 32:o10d9,22:["$","$L62",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":[["$","$L69",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":[["$","$L6b",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"}]]}]}],["$","$L6d",null,{"className":"w-full lg:w-80","children":[["$","$L6b",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"}]]}]}]}],["$","$L6b",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"}]]}]}],["$","$L6b",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/03g0zotkoleh3.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":["$L6e",[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 32:o293,24:["$","$2","c",{"children":["$L6f",[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0iv1vmo68w9j8.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/1ur-u101ft1rh.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/2et5rig-26l7f.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/0_gorie14y0z_.js","async":true,"nonce":"$undefined"}]],["$","$L70",null,{"children":["$","$2b",null,{"name":"Next.MetadataOutlet","children":"$@71"}]}]]}] 32:o618,78:I[339811,["$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","$63"],"PageLayout"] 79:"ScrollFadeContainer" 7a:I[388503,["$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","$63"],"$79"] 7b:"CommunityTabsClient" 7c:I[490134,["$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","$63"],"$7b"] 7d:"CommunityLiveSearch" 7e:I[803568,["$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","$63"],"$7d"] 7f:I[32970,["$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","$63"],"ZoneProvider"] 80:I[532822,["$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","$63"],"default"] 2e:300 18:T8,variants20:T8,variants72:T18d6,32:o18d6,(({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);async function g(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)}}!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 h=new c,i=new d(a);g(h,i,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let g=new URL(c instanceof Request?c.url:c,location.href),j=g.origin===location.origin,k=a.find(a=>f({path:g.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 h.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",g.pathname),o.set("x-method",l);let p={...d,headers:o};return i.loaded||0!==n.b?b(c,p):1===n.d||k?.advancedOptions?.checkLevel==="deepAnalysis"?(await i.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"}] });32:o534,17:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$72"}}],"$L73","$L74","$L75","$L76"]}],"$L77"]}] 60:["$","$L78",null,{"actions":["$","div",null,{"className":"flex lg:pr-1 items-center w-full justify-between flex-row gap-2 relative","children":[["$","$L7a",null,{"leftFadeClassName":"left-0 z-20","rightFadeClassName":"right-0 z-20","showButtons":false,"className":"flex-1 min-w-0","scrollableClassName":"px-0","children":["$","$L7c",null,{}]}],["$","$2b",null,{"children":["$","$L7e",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":["$","$L7f",null,{"zone":"chat","children":["$","$L80",null,{}]}]}]]}] 32:o1000,81:"GeistThemeScript" 82:I[943185,["$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"],"$81"] 83:I[600033,["$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"] 84:I[943185,["$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"] 85:I[818362,["$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"] 86:I[841245,["$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"] 87:"AtomicContextSWRProvider" 88:I[850359,["$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"],"$87"] 89:"GlobalPromiseContextProvider" 8a:I[850359,["$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"],"$89"] 8d:I[827887,["$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"] 8e:"ServerQuerySWRRuntimeProvider" 8f:I[74757,["$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"],"$8e"] 91:I[815349,["$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"] 92:I[470669,["$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"] 93:I[191173,["$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"] 94:I[15279,["$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"] 95:"VercelianAppFlowMigrator" 96:I[23825,["$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"],"$95"] 97:I[108762,["$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"] 98:I[578386,["$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"] 99:I[356301,["$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"] 73:["$","$L82",null,{"storageKey":"theme"}] 74:["$","$2b",null,{"children":["$","$L83",null,{}]}] 75:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 76:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@cont32:o2fd,ext\":\"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.linkedin.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\"}}]"}}] 32:o949,77:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased kSVEZa_variable yCrHjW_variable hGs1mq_variable","children":[["$","$L84",null,{"storageKey":"theme","withScript":false,"children":["$","$L85",null,{"locale":"en","children":["$","$L86",null,{"reducedMotion":"user","children":["$","$L88",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":["$","$L8a",null,{"params":null,"promises":{"dailyModelUsage":"$@8b","freeFixWithV0Usage":"$@8c"},"children":[["$","$L8d",null,{"children":["$","$L8f",null,{"children":"$L90"}]}],["$","$L91",null,{}]]}]}]}]}]}],["$","$L92",null,{}],["$","$L93",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$2b",null,{"children":["$","$L94",null,{}]}],["$","$L96",null,{}],["$","$L97",null,{}],["$","$L98",null,{}],["$","$L99",null,{}]]}] 32:o90,28:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 32:oe,2d:T8,variants32:o1000,9a:"HydrateDurableAtoms" 9b:I[783749,["$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"],"$9a"] 9c:I[359783,["$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"] 9d:I[32170,["$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"] 9f:"AnimatedIconProvider" a0:I[908887,["$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"],"$9f"] a1:I[30570,["$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"] a2:"SnowflakePublishProvider" a3:I[966820,["$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"],"$a2"] a4:"UserInputProvider" a5:I[472914,["$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"],"$a4"] a6:I[69221,["$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"] a7:"VirtualMachineUIStateProvider" a8:I[319228,["$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"],"$a7"] a9:"DeployedPreviewIframeRefProvider" aa:I[166890,["$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"],"$a9"] ab:"PreviewSourceUIStateProvider" ac:I[197843,["$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"],"$ab"] ad:I[367078,["$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"] ae:"PromptFormUIProvider" af:I[595358,["$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"],"$ae"] b0:I[242759,["$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"] b2:I[723704,["$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"] b3:"ChatTabsProvider" b4:I[568561,["$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"],"$b3"] b5:"PersonalScopeMigrationAnnouncementProvider" b6:I[206559,["$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"] b8:"AnnouncementVisibilityProvider" b9:I[878519,["$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","32:o59e,$4b","$4c","$4d","$4e","$4f"],"$b8"] bc:I[561588,["$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"] bd:I[407562,["$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"] be:"SuspendingDialogs" bf:I[840793,["$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"],"$be"] c0:I[323194,["$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"] c1:I[279070,["$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"] c2:"/chat-static/_next/static/immutable/chunks/1b5rxm9wrm0ij.js" c3:I[192842,["$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","$63","$c2"],"ChatWarning"] 32:o8ad,90:["$","$L9b",null,{"serverData":{"chat":null,"scoped":null,"root":{"root":{"sidebarCollapsed":false,"sidebarPreferenceSet":false,"sidebarWidth":250,"lastUpdated":0,"modelConfiguration":{"fast":false,"modelId":"v0-max","thinking":false,"thinkingEffort":null,"imageGenerations":false},"modelDisplayPreference":null,"lastModelPreference":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":["$","$L9c",null,{"children":["$","$L9d",null,{"expectUser":false,"userPromise":"$@9e","children":["$","$La0",null,{"children":["$","$La1",null,{"children":["$","$La3",null,{"children":["$","$La5",null,{"children":["$","$La6",null,{"children":["$","$La8",null,{"children":["$","$Laa",null,{"children":["$","$Lac",null,{"children":["$","$Lad",null,{"children":["$","$Laf",null,{"children":["$","$Lb0",null,{"promise":"$@b1","middlewareFlags":[],"children":["$","$Lb2",null,{"children":["$","$Lb4",null,{"children":["$","$Lb6",null,{"destinationTeamIdPromise":"$@b7","children":["$","$Lb9",null,{"visiblePromise":"$@ba","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":"$Lbb"}],["$","$Lbc",null,{}],["$","$Lbd",null,{}],["$","$2b",null,{"fallback":null,"children":["$","$Lbf",null,{}]}],["$","$Lc0",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Lc1",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 32:o27b,5b:null 6e:["$","$Lc3",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}] 32:o20,9e:"$undefined" ba:true bb:null 32:o24,2d:T1,?25:T1,?2e:60 25:T2,id2d:T2,id32:o2e8,b7:null b1:{"requested":null,"identity":null,"resolution":"anonymous","flags":{"aepe":false,"asse":false,"afre":false,"bvge":false,"ctbe":true,"igm":"gateway.google/gemini-3.1-flash-lite-image","caae":false,"lcw":false,"tbb":false,"spqe":true,"oivs":false,"vmmt":false,"nfd":"","nfde":1,"iedm":true,"inb":true,"stve":true,"ci":true,"smpe":false,"dsie":false,"sie":false,"siv2":false,"cvod":false,"dce":false,"tse":false,"lmmo":false,"ubse":true,"dcpps":false,"spu":true,"kps":false,"tfam":false,"evmv":true,"dcv":false,"f5e":true,"f51e":true,"gmpe":true,"impe":false,"gope":false,"g56se":true,"g56spe":true,"g52e":false,"g46e":false,"kk3e":false,"o5e":true,"pwz":true,"shce":false,"shme":false,"idue":false,"ipc":true,"dsrr":false,"ftr":null}} 32:o676,c4:I[37565,["$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","$63","$64","$65","$66","$67"],"S"] c5:"KeepClientOnUpToDateSlugPath" c6:I[983440,["$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","$63","$64","$65","$66","$67"],"$c5"] c7:"TemplateFlagDialog" c8:I[39126,["$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","$63","$64","$65","$66","$67"],"$c7"] c9:I[482195,["$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","$63","$64","$65","$66","$67"],""] ca:"TemplateStatusBadge" cb:I[484402,["$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","$63","$64","$65","$66","$67"],"$ca"] cc:I[834117,["$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","$63","$64","$65","$66","$67"],"CommunityAvatar"] 32:o1150,6f:["$","$Lc4",null,{"value":{"fallback":{"template:rINMO44ZAoN:likes":{"likeCount":419,"isLiked":false}}},"children":[["$","$Lc6",null,{"id":"rINMO44ZAoN","title":"Sketchpad - shadcn/ui theme"}],["$","$Lc8",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":["$","$Lc9",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"}]}]}],["$","$Lc9",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":"$6f: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"}],["$","$Lcb",null,{"status":"approved"}]]}],["$","div",null,{"className":"flex items-center flex-wrap gap-3","children":[["$","$Lc9",null,{"className":"flex items-center gap-1.5","href":"/@matsu","children":[["$","$Lcc",null,{"className":"size-5 sm:size-6","username":"matsu","teamId":"$undefined","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"}]]}],"$Lcd","$Lce"]}]]}]]}],"$Lcf"]}]]}],"$Ld0"]}]]}] 32:o1000,d1:"TemplateCardStatsLikesClient" d2:I[441648,["$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","$63","$64","$65","$66","$67"],"$d1"] d3:"TemplateFlagButton" d4:I[39126,["$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","$63","$64","$65","$66","$67"],"$d3"] d5:"TemplateLikeButton" d6:I[605890,["$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","$63","$64","$65","$66","$67"],"$d5"] d7:"TemplateBlockButton" d8:I[411379,["$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","$63","$64","$65","$66","$67"],"$d7"] da:I[164762,["$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","$63","$64","$65","$66","$67"],"TemplateTags"] db:I[164762,["$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","$63","$64","$65","$66","$67"],"TemplateShare"] dc:"TemplateLastUpdated" dd:I[164762,["$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","$63","$64","$65","$66","$67"],"$dc"] cd:["$","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"]}] ce:["$","$Ld2",null,{"templateCanonId":"rINMO44ZAoN"}] cf:["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":[null,null,null,["$","$Ld4",null,{}],null,null,["$","$Ld6","rINMO44ZAoN",{"templateCanonId":"rINMO44ZAoN"}],null,["$","$Ld8",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":false,"likeCount":419,"vercelDeploymentUrl":null,"createdAt":"$D2025-11-07T11:27:01.399Z","category":"components","tags":["shadcnui","shadcn","theme","sketchpad","shadcndesign"],"authorUsername":"matsu","isVercel":false,"teamId":null,"liked":false},"isOwnTemplate":false}]]}] d0:["$","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":[["$","$L69","description",{"testId":"template-detail-preview","children":"$Ld9"}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L6b",null,{"className":"flex-1","title":"About","children":["$","p",null,{"className":"whitespace-pre-wrap text-v0-gray-900","children":"A modern shadcn/ui theme"}]}],["$","$L6d",null,{"className":"w-full lg:w-80","children":[["$","$Lda",null,{"tags":"$cf:props:children:8:props:template:tags"}],["$","$Ldb",null,{"templateUrl":"https://v0.app/te32:oaf,mplates/sketchpad-shadcn-ui-theme-rINMO44ZAoN"}],["$","$Ldd",null,{"updatedAt":"$D2025-11-07T11:27:02.158Z"}]]}]]}]]}],["$","$2b",null,{"fallback":null,"children":"$Lde"}]]}] 32:o23b,df:"ExplicitChatIdProvider" e0:I[903690,["$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","$63","$64","$65","$66","$67"],"$df"] e1:I[838238,["$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","$63","$64","$65","$66","$67"],"SWRDataProvider"] e2:Tf43f,32: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>
  )
}32:o20e,d9:["$","$Le0",null,{"chatId":"zPhbNZruat9","children":["$","$Le1",null,{"data":{"@\"active-block\",\"zPhbNZruat9\",":{"id":"b_xIowvf68Og6","messageId":"3Hy695ux4lVBOytP1QRzcA4I64oIg4re","source":"$e2","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":"$Le3"}]}]
32:o514,e4:"PublishedPageProvider"
e5:I[845210,["$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","$63","$64","$65","$66","$67"],"$e4"]
e6:"FullscreenContainer"
e7:I[481556,["$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","$63","$64","$65","$66","$67"],"$e6"]
e8:"TemplateBlockViewClient"
e9:I[552151,["$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","$63","$64","$65","$66","$67"],"$e8"]
e3:["$","$Le5",null,{"children":["$","$Le7",null,{"mode":"$undefined","children":["$","$Le9",null,{"block":"$d9: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}]}]}]
32:o11,30:true
2f:44658
32:o22,2e:C
2d:C
1:C
25:C
20:C
1b:C
18:C
32:C
e5:Tf43f,[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 (
    <Card className="h-full gap-5">
      <CardHeader>
        <CardTitle>Move Goal</CardTitle>
        <CardDescription>Set your daily activity goal.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-1 flex-col">
        <div className="flex items-center justify-center gap-4">
          <Button
            variant="outline"
            size="icon"
            className="size-7 rounded-full bg-transparent"
            onClick={() => onClick(-10)}
            disabled={goal <= 200}
          >
            <MinusIcon />
            <span className="sr-only">Decrease</span>
          </Button>
          <div className="text-center">
            <div className="text-4xl font-bold tracking-tighter tabular-nums">{goal}</div>
            <div className="text-muted-foreground text-xs uppercase">Calories/day</div>
          </div>
          <Button
            variant="outline"
            size="icon"
            className="size-7 rounded-full bg-transparent"
            onClick={() => onClick(10)}
            disabled={goal >= 400}
          >
            <PlusIcon />
            <span className="sr-only">Increase</span>
          </Button>
        </div>
        <div className="flex-1">
          <ChartContainer config={chartConfig} className="h-[80px] w-full">
            <BarChart data={data}>
              <Bar dataKey="goal" radius={4} fill="var(--color-goal)" />
            </BarChart>
          </ChartContainer>
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full" variant="secondary">
          Set Goal
        </Button>
      </CardFooter>
    </Card>
  )
}
[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 (
    <Card className="hidden max-w-[260px] p-0 sm:flex">
      <CardContent className="p-0">
        <Calendar
          numberOfMonths={1}
          mode="range"
          defaultMonth={start}
          selected={{
            from: start,
            to: addDays(start, 8),
          }}
        />
      </CardContent>
    </Card>
  )
}
[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<User[]>([])

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 (
    <>
      <Card>
        <CardHeader className="flex flex-row items-center">
          <div className="flex items-center gap-4">
            <Avatar className="border">
              <AvatarImage src="/avatars/01.png" alt="Image" />
              <AvatarFallback>S</AvatarFallback>
            </Avatar>
            <div className="flex flex-col gap-0.5">
              <p className="text-sm leading-none font-medium">Sofia Davis</p>
              <p className="text-muted-foreground text-xs">m@example.com</p>
            </div>
          </div>
          <TooltipProvider delayDuration={0}>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  size="icon"
                  variant="secondary"
                  className="ml-auto size-8 rounded-full"
                  onClick={() => setOpen(true)}
                >
                  <PlusIcon />
                  <span className="sr-only">New message</span>
                </Button>
              </TooltipTrigger>
              <TooltipContent sideOffset={10}>New message</TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-4">
            {messages.map((message, index) => (
              <div
                key={index}
                className={cn(
                  "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
                  message.role === "user" ? "bg-primary text-primary-foreground ml-auto" : "bg-muted",
                )}
              >
                {message.content}
              </div>
            ))}
          </div>
        </CardContent>
        <CardFooter>
          <form
            onSubmit={(event) => {
              event.preventDefault()
              if (inputLength === 0) return
              setMessages([
                ...messages,
                {
                  role: "user",
                  content: input,
                },
              ])
              setInput("")
            }}
            className="relative w-full"
          >
            <Input
              id="message"
              placeholder="Type your message..."
              className="flex-1 pr-10"
              autoComplete="off"
              value={input}
              onChange={(event) => setInput(event.target.value)}
            />
            <Button
              type="submit"
              size="icon"
              className="absolute top-1/2 right-2 size-6 -translate-y-1/2 rounded-full"
              disabled={inputLength === 0}
            >
              <ArrowUpIcon className="size-3.5" />
              <span className="sr-only">Send</span>
            </Button>
          </form>
        </CardFooter>
      </Card>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="gap-0 p-0 outline-none">
          <DialogHeader className="px-4 pt-5 pb-4">
            <DialogTitle>New message</DialogTitle>
            <DialogDescription>Invite a user to this thread. This will create a new group message.</DialogDescription>
          </DialogHeader>
          <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
            <CommandInput placeholder="Search user..." />
            <CommandList>
              <CommandEmpty>No users found.</CommandEmpty>
              <CommandGroup>
                {users.map((user) => (
                  <CommandItem
                    key={user.email}
                    data-active={selectedUsers.includes(user)}
                    className="data-[active=true]:opacity-50"
                    onSelect={() => {
                      if (selectedUsers.includes(user)) {
                        return setSelectedUsers(selectedUsers.filter((selectedUser) => selectedUser !== user))
                      }

return setSelectedUsers([...users].filter((u) => [...selectedUsers, user].includes(u)))
                    }}
                  >
                    <Avatar className="border">
                      <AvatarImage src={user.avatar || "/placeholder.svg"} alt="Image" />
                      <AvatarFallback>{user.name[0]}</AvatarFallback>
                    </Avatar>
                    <div className="ml-2">
                      <p className="text-sm leading-none font-medium">{user.name}</p>
                      <p className="text-muted-foreground text-sm">{user.email}</p>
                    </div>
                    {selectedUsers.includes(user) ? <CheckIcon className="text-primary ml-auto flex size-4" /> : null}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
          <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
            {selectedUsers.length > 0 ? (
              <div className="flex -space-x-2 overflow-hidden">
                {selectedUsers.map((user) => (
                  <Avatar key={user.email} className="inline-block border">
                    <AvatarImage src={user.avatar || "/placeholder.svg"} />
                    <AvatarFallback>{user.name[0]}</AvatarFallback>
                  </Avatar>
                ))}
              </div>
            ) : (
              <p className="text-muted-foreground text-sm">Select users to add to this thread.</p>
            )}
            <Button
              disabled={selectedUsers.length < 2}
              size="sm"
              onClick={() => {
                setOpen(false)
              }}
            >
              Continue
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}
[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 (
    <Card>
      <CardHeader>
        <CardTitle>Cookie Settings</CardTitle>
        <CardDescription>Manage your cookie settings here.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-6">
        <div className="flex items-center justify-between gap-4">
          <Label htmlFor="necessary" className="flex flex-col items-start">
            <span>Strictly Necessary</span>
            <span className="text-muted-foreground leading-snug font-normal">
              These cookies are essential in order to use the website and use its features.
            </span>
          </Label>
          <Switch id="necessary" defaultChecked aria-label="Necessary" />
        </div>
        <div className="flex items-center justify-between gap-4">
          <Label htmlFor="functional" className="flex flex-col items-start">
            <span>Functional Cookies</span>
            <span className="text-muted-foreground leading-snug font-normal">
              These cookies allow the website to provide personalized functionality.
            </span>
          </Label>
          <Switch id="functional" aria-label="Functional" />
        </div>
      </CardContent>
      <CardFooter>
        <Button variant="outline" className="w-full bg-transparent">
          Save preferences
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="create-account.tsx" isMerged="true"
"use client"

export function CardsCreateAccount() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-2xl">Create an account</CardTitle>
        <CardDescription>Enter your email below to create your account</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="grid grid-cols-2 gap-6">
          <Button variant="outline">
            <svg viewBox="0 0 438.549 438.549">
              <path
                fill="currentColor"
                d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
              ></path>
            </svg>
            GitHub
          </Button>
          <Button variant="outline">
            <svg role="img" viewBox="0 0 24 24">
              <path
                fill="currentColor"
                d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
              />
            </svg>
            Google
          </Button>
        </div>
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <span className="w-full border-t" />
          </div>
          <div className="relative flex justify-center text-xs uppercase">
            <span className="bg-card text-muted-foreground px-2">Or continue with</span>
          </div>
        </div>
        <div className="flex flex-col gap-3">
          <Label htmlFor="email-create-account">Email</Label>
          <Input id="email-create-account" type="email" placeholder="m@example.com" />
        </div>
        <div className="flex flex-col gap-3">
          <Label htmlFor="password-create-account">Password</Label>
          <Input id="password-create-account" type="password" />
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Create account</Button>
      </CardFooter>
    </Card>
  )
}
[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 (
    <Card>
      <CardHeader>
        <CardTitle>Exercise Minutes</CardTitle>
        <CardDescription>Your exercise minutes are ahead of where you normally are.</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="w-full md:h-[200px]">
          <LineChart
            accessibilityLayer
            data={data}
            margin={{
              top: 5,
              right: 10,
              left: 16,
              bottom: 0,
            }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="day"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <Line
              type="monotone"
              dataKey="today"
              strokeWidth={2}
              stroke="var(--color-today)"
              dot={{
                fill: "var(--color-today)",
              }}
              activeDot={{
                r: 5,
              }}
            />
            <Line
              type="monotone"
              strokeWidth={2}
              dataKey="average"
              stroke="var(--color-average)"
              strokeOpacity={0.5}
              dot={{
                fill: "var(--color-average)",
                opacity: 0.5,
              }}
              activeDot={{
                r: 5,
              }}
            />
            <ChartTooltip content={<ChartTooltipContent />} />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
[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 (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">Upgrade your subscription</CardTitle>
        <CardDescription className="text-balance">
          You are currently on the free plan. Upgrade to the pro plan to get access to all features.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-6">
          <div className="flex flex-col gap-3 md:flex-row">
            <div className="flex flex-1 flex-col gap-2">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Evil Rabbit" />
            </div>
            <div className="flex flex-1 flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="example@acme.com" />
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="card-number">Card Number</Label>
            <div className="grid grid-cols-2 gap-3 md:grid-cols-[1fr_80px_60px]">
              <Input id="card-number" placeholder="1234 1234 1234 1234" className="col-span-2 md:col-span-1" />
              <Input id="card-number-expiry" placeholder="MM/YY" />
              <Input id="card-number-cvc" placeholder="CVC" />
            </div>
          </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 md:grid-cols-2">
              {plans.map((plan) => (
                <Label
                  className="has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-primary/10 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 text-xs leading-snug text-balance">{plan.description}</div>
                  </div>
                </Label>
              ))}
            </RadioGroup>
          </fieldset>
          <div className="flex flex-col gap-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea id="notes" placeholder="Enter 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"

About

Tags

Share

About

Tags

Share

More from matsu

More Templates Like This

More from matsu

More Templates Like This