1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{5557:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return t(1838)}])},1838:function(e,s,t){"use strict";t.r(s),t.d(s,{default:function(){return Q}});var r=t(5893),a=t(7294),l=t(9008),n=t.n(l),i=t(5675),o=t.n(i);function c(){return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("div",{className:"bg-white py-4 px-4 sm:px-6 lg:px-8",children:(0,r.jsxs)("div",{className:"mx-auto flex max-w-7xl items-center gap-x-5",children:[(0,r.jsx)(o(),{src:"/logo.svg",width:"32",height:"32",alt:"HueHub"}),(0,r.jsx)("span",{className:"text-lg font-medium text-gray-900",children:"HueHub"})]})})})}var d=t(7853),m=t(6767),x=t.n(m);function u(e,s,t){switch(t.mode){case"complementary":!function(e,s,t){let r=x()(e).rotate(180).hex();s.current.setColors([e,r]),t.setColors([e,r])}(e,s,t);break;case"monochromatic":!function(e,s,t){s.current.setColors([e]);let r=x()(e),a=[];r.isDark()?(a.push(r.lighten(.1).hex()),a.push(r.lighten(.2).hex()),a.push(r.lighten(.3).hex())):(a.push(r.darken(.1).hex()),a.push(r.darken(.2).hex()),a.push(r.darken(.3).hex())),t.setColors([e,...a])}(e,s,t);break;case"analogous":!function(e,s,t){let r=x()(e).rotate(30).hex(),a=x()(e).rotate(-30).hex();s.current.setColors([e,r,a]),t.setColors([e,r,a])}(e,s,t);break;case"triadic":!function(e,s,t){let r=x()(e).rotate(120).hex(),a=x()(e).rotate(240).hex();s.current.setColors([e,r,a]),t.setColors([e,r,a])}(e,s,t);break;case"tetradic":!function(e,s,t){let r=x()(e).rotate(90).hex(),a=x()(e).rotate(180).hex(),l=x()(e).rotate(270).hex();s.current.setColors([e,r,a,l]),t.setColors([e,r,a,l])}(e,s,t)}t.setColor(e)}var h=function(e){let s=(0,a.useRef)(null),t=(0,a.useRef)(null),l=r=>{t.current=new d.Z.ColorPicker(s.current,{...e,borderWidth:2,colors:r,layout:[{component:d.Z.ui.Wheel,options:{borderColor:"#4b5563",wheelAngle:0,wheelDirection:"anticlockwise"}},{component:d.Z.ui.Slider,options:{borderColor:"#4b5563",margin:30}}]})};return(0,a.useEffect)(()=>
1{l([e.color,"#E1341E"])},[]),(0,a.useEffect)(()=>{t.current.on("color:change",s=>{let r=s.hexString;u(r,t,e)})},[e]),(0,a.useEffect)(()=>{let s=/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(e.color);s&&(t.current.setColors([e.color]),u(e.color,t,e))},[e.color]),(0,a.useEffect)(()=>{let s=t.current.color.hexString;u(s,t,e)},[e.mode]),(0,r.jsx)("div",{ref:s})},g=t(1863),p=t(1407),f=t(9645),j=t(9497);function y(){for(var e=arguments.length,s=Array(e),t=0;t<e;t++)s[t]=arguments[t];return s.filter(Boolean).join(" ")}function b(e){let{mode:s,setMode:t,modes:l}=e,n=s[0].toUpperCase()+s.substring(1);return(0,r.jsx)(g.R,{value:s,onChange:t,children:e=>{let{open:s}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(g.R.Label,{className:"mt-5 block text-sm font-medium leading-6 text-gray-900",children:"2. Choose a color mode"}),(0,r.jsxs)("div",{className:"relative mt-2",children:[(0,r.jsxs)(g.R.Button,{className:"relative h-10 w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-400 sm:text-sm sm:leading-6",children:[(0,r.jsx)("span",{className:"block truncate",children:n}),(0,r.jsx)("span",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2",children:(0,r.jsx)(f,{className:"h-5 w-5 text-gray-400","aria-hidden":"true"})})]}),(0,r.jsx)(p.u,{show:s,as:a.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0",children:(0,r.jsx)(g.R.Options,{className:"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",children:l.map(e=>(0,r.jsx)(g.R.Option,{className:e=>{let{active:s}=e;return y(s?"bg-rose-300 text-gray-900":"text-gray-900","relative cursor-default select-none py-2 pl-8 pr-4")},value:e.id,children:s=>{let{selected:t,active:a}=s;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:y(t?"font-semibold":"font-normal","block truncate"),children:e.name}),t?(0,r.jsx)("span",{className:y(a?"text-rose-500":"text-rose-600","absolute inset-y-0 left-0 flex items-center pl-1.5"),children:(0,r.jsx)(j,{className:"h-5 w-5","aria-hidden":"true"})}):null]})}},e.id))})})]})]})}})}function N(e){let{color:s,setColor:t}=e;return(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"color",className:"block text-sm font-medium leading-6 text-gray-900",children:"1. Pick a color"}),(0,r.jsx)("div",{className:"mt-2",children:(0,r.jsx)("input",{type:"text",name:"color",id:"color",className:"block h-10 w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm outline-none ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-rose-500 sm:text-sm sm:leading-6",value:s,onChange:e=>t(e.target.value)})})]})}function v(e){let{colors:s,copied:t,copyIndex:a,copyToClipboard:l}=e;return(0,r.jsx)("div",{className:"mx-auto max-w-xl",children:(0,r.jsx)("span",{className:"mt-5 flex sm:mx-auto",children:s&&s.map((e,n)=>(0,r.jsxs)("div",{className:"flex flex-1 flex-col",children:[(0,r.jsx)("button",{type:"button",className:function(){for(var e=arguments.length,s=Array(e),t=0;t<e;t++)s[t]=arguments[t];return s.filter(Boolean).join(" ")}(0===n&&"rounded-l-md",n===s.length-1&&"rounded-r-md","flex-1 px-4 py-5 text-sm hover:brightness-90 sm:p-6"),style:{backgroundColor:s[n]},onClick:()=>l(s[n],n)}),(0,r.jsx)("button",{type:"button",className:"mt-2 text-center text-sm hover:text-gray-600 focus:outline-none",onClick:()=>l(s[n],n),children:t&&a===n?"Copied!":s[n]})]},n))})})}var w=t(4123),k=t(7310),C=t(1532),S=t(7458),A=t(7090);let T=[{id:1,name:"Total Subscribers",stat:"71,897",icon:C,change:"122",changeType:"increase"},{id:2,name:"Avg. Open Rate",stat:"58.16%",icon:S,change:"5.4%",changeType:"increase"},{id:3,name:"Avg. Click Rate",stat:"24.57%",icon:A,change:"3.2%",changeType:"decrease"}];function B(e){let{colors:s}=e;return(0,r.jsx)("div",{children:(0,r.jsx)("dl",{className:"mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3",children:T.map((e,t)=>(0,r.jsxs)("div",{className:"relative overflow-hidden rounded-lg bg-white px-4 pt-5 pb-12 shadow sm:px-6 sm:pt-6",children:[(0,r.jsxs)("dt",{children:[(0,r.jsx)("div",{className:"absolute rounded-md p-3",style:{backgroundColor:s[t]},children:(0,r.jsx)(e.icon,{className:"h-6 w-6","aria-hidden":"true",style:{color:x()(s[t]).isDark()?x()(s[t]).lighten(.8):x()(s[t]).darken(.8),backgroundColor:s[t]}})}),(0,r.jsx)("p",{className:"ml-16 truncate text-sm font-medium text-gray-500",children:e.name})]}),(0,r.jsxs)("dd",{className:"ml-16 flex items-baseline pb-6 sm:pb-7",children:[(0,r.jsx)("p",{className:"text-2xl font-semibold text-gray-900",children:e.stat}),(0,r.jsxs)("p",{className:function(){for(var e=arguments.length,s=Array(e),t=0;t<e;t++)s[t]=arguments[t];
1return s.filter(Boolean).join(" ")}("increase"===e.changeType?"text-green-600":"text-red-600","ml-2 flex items-baseline text-sm font-semibold"),children:["increase"===e.changeType?(0,r.jsx)(w,{className:"h-5 w-5 flex-shrink-0 self-center text-green-500","aria-hidden":"true"}):(0,r.jsx)(k,{className:"h-5 w-5 flex-shrink-0 self-center text-red-500","aria-hidden":"true"}),(0,r.jsxs)("span",{className:"sr-only",children:[" ","increase"===e.changeType?"Increased":"Decreased"," ","by"," "]}),e.change]}),(0,r.jsx)("div",{className:"absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6",children:(0,r.jsx)("div",{className:"text-sm",children:(0,r.jsxs)("a",{href:"#",className:"font-medium",style:{color:s[0]},children:[" ","View all",(0,r.jsxs)("span",{className:"sr-only",children:[" ",e.name," stats"]})]})})})]})]},e.id))})})}function E(e){let{colors:s}=e;return(0,r.jsx)("div",{className:"my-10 mx-auto flex gap-x-5",children:s.map((e,s)=>(0,r.jsxs)("span",{className:"inline-flex items-center rounded-md bg-indigo-100 px-2.5 py-0.5 text-sm font-medium text-indigo-800",style:{color:x()(e).isDark()?x()(e).lighten(.8):x()(e).darken(.8),backgroundColor:e},children:[(0,r.jsx)("svg",{className:"-ml-0.5 mr-1.5 h-2 w-2 text-indigo-400",fill:"currentColor",viewBox:"0 0 8 8",style:{color:x()(e).darken(.5)},children:(0,r.jsx)("circle",{cx:4,cy:4,r:3})}),"Badge"]},s))})}var D=t(7768);function L(){for(var e=arguments.length,s=Array(e),t=0;t<e;t++)s[t]=arguments[t];return s.filter(Boolean).join(" ")}function _(e){let{colors:s}=e,[t,l]=(0,a.useState)(!0);return(0,r.jsx)("div",{className:"my-10 mx-auto flex gap-x-5",children:s.map((e,s)=>(0,r.jsxs)(D.r,{checked:t,className:L(t?"bg-indigo-600":"bg-gray-200","relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"),style:{backgroundColor:e},children:[(0,r.jsx)("span",{className:"sr-only",children:"Use setting"}),(0,r.jsx)("span",{"aria-hidden":"true",className:L(t?"translate-x-5":"translate-x-0","pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out")})]},s))})}var F=t(6781);function R(e){let{colors:s}=e;return(0,r.jsx)("div",{className:"my-3 rounded-md p-4",style:{backgroundColor:x()(s[0]).lighten(.8)},children:(0,r.jsxs)("div",{className:"flex",children:[(0,r.jsx)("div",{className:"flex-shrink-0",children:(0,r.jsx)(F,{className:"h-5 w-5","aria-hidden":"true",style:{color:s[0]}})}),(0,r.jsxs)("div",{className:"ml-3",children:[(0,r.jsx)("h3",{className:"text-sm font-medium",style:{color:s[0]},children:"Attention needed"}),(0,r.jsx)("div",{className:"mt-2 text-sm",style:{color:x()(s[0]).opaquer(.2)},children:(0,r.jsx)("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit."})})]})]})})}var P=t(6962);let X=[{id:"01",name:"Job details",href:"#",status:"complete"},{id:"02",name:"Application form",href:"#",status:"current"},{id:"03",name:"Preview",href:"#",status:"upcoming"}];function H(e){let{colors:s}=e;return(0,r.jsx)("nav",{"aria-label":"Progress",children:(0,r.jsx)("ol",{role:"list",className:"divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0",children:X.map((e,t)=>(0,r.jsxs)("li",{className:"relative md:flex md:flex-1",children:["complete"===e.status?(0,r.jsx)("a",{href:e.href,className:"group flex w-full items-center",children:(0,r.jsxs)("span",{className:"flex items-center px-6 py-4 text-sm font-medium",children:[(0,r.jsx)("span",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full",style:{backgroundColor:s[0]},children:(0,r.jsx)(P,{className:"h-6 w-6 text-white","aria-hidden":"true",style:{color:x()(s[0]).isDark()?x()(s[0]).lighten(.8):x()(s[0]).darken(.8),backgroundColor:s[0]}})}),(0,r.jsx)("span",{className:"ml-4 text-sm font-medium text-gray-900",children:e.name})]})}):"current"===e.status?(0,r.jsxs)("a",{href:e.href,className:"flex items-center px-6 py-4 text-sm font-medium","aria-current":"step",children:[(0,r.jsx)("span",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2",style:{borderColor:s[1]},children:(0,r.jsx)("span",{style:{color:s[1]},children:e.id})}),(0,r.jsx)("span",{className:"ml-4 text-sm font-medium",style:{color:s[1]},children:e.name})]}):(0,r.jsx)("a",{href:e.href,className:"group flex items-center",children:(0,r.jsxs)("span",{className:"flex items-center px-6 py-4 text-sm font-medium",children:[(0,r.jsx)("span",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400",children:(0,r.jsx)("span",{className:"text-gray-500 group-hover:text-gray-900",children:e.id})}),(0,r.jsx)("span",{className:"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900",children:e.name})]})}),t!==X.length-1?(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("div",{className:"absolute top-0 right-0 hidden h-full w-5 md:block","aria-hidden":"true",children:(0,r.jsx)("svg",{className:"h-full w-full text-gray-300",viewBox:"0 0 22 80",fill:"none",preserveAspectRatio:"none",children:(0,r.jsx)("path",{d:"M0 -2L20 40L0 82",vectorEffect:"non-scaling-stroke",stroke:"currentcolor",strokeLinejoin:"round"})})})}):null]},e.name))})})}
1function M(e){let{colors:s}=e;return(0,r.jsx)("div",{className:"my-10 mx-auto w-full overflow-hidden rounded-lg bg-white shadow",children:(0,r.jsx)("div",{className:function(){for(var e=arguments.length,s=Array(e),t=0;t<e;t++)s[t]=arguments[t];return s.filter(Boolean).join(" ")}(s.length>1&&"grid-cols-2","grid h-full items-center justify-center gap-5 px-4 py-5 sm:p-6"),children:s.map((e,s)=>(0,r.jsxs)("button",{type:"button",className:"rounded-md px-3.5 py-3 text-sm font-semibold text-white shadow-sm focus-visible:outline",style:{color:x()(e).isDark()?x()(e).lighten(.8):x()(e).darken(.8),backgroundColor:e},children:["Button ",s+1]},s))})})}var O=t(5712);function $(e){let{colors:s}=e;return(0,r.jsx)("section",{className:"my-10 bg-white px-8 py-10",children:(0,r.jsxs)("figure",{className:"mx-auto max-w-2xl",children:[(0,r.jsx)("p",{className:"sr-only",children:"5 out of 5 stars"}),(0,r.jsxs)("div",{className:"flex gap-x-1",style:{color:s[0]},children:[(0,r.jsx)(O,{className:"h-5 w-5 flex-none","aria-hidden":"true"}),(0,r.jsx)(O,{className:"h-5 w-5 flex-none","aria-hidden":"true"}),(0,r.jsx)(O,{className:"h-5 w-5 flex-none","aria-hidden":"true"}),(0,r.jsx)(O,{className:"h-5 w-5 flex-none","aria-hidden":"true"}),(0,r.jsx)(O,{className:"h-5 w-5 flex-none","aria-hidden":"true"})]}),(0,r.jsx)("blockquote",{className:"mt-5 text-lg font-semibold leading-8 tracking-tight text-gray-900",children:(0,r.jsx)("p",{children:"âQui dolor enim consectetur do et non ex amet culpa sint in ea non dolore. Enim minim magna anim id minim eu cillum sunt dolore aliquip. Amet elit laborum culpa irure incididunt adipisicing culpa amet officia exercitation. Eu non aute velit id velit Lorem elit anim pariatur.â"})})]})})}var z=t(5057);let q={name:"Basic Tee",price:"$35",rating:3.9,reviewCount:512,href:"#",colors:[{name:"Black",bgColor:"bg-gray-900",selectedColor:"ring-gray-900"},{name:"Heather Grey",bgColor:"bg-gray-400",selectedColor:"ring-gray-400"}],images:[{id:1,imageSrc:"https://tailwindui.com/img/ecommerce-images/product-page-01-featured-product-sh
1ot.jpg",imageAlt:"Back of women's Basic Tee in black.",primary:!0},{id:2,imageSrc:"https://tailwindui.com/img/ecommerce-images/product-page-01-product-shot-01.jpg",imageAlt:"Side profile of women's Basic Tee in black.",primary:!1},{id:3,imageSrc:"https://tailwindui.com/img/ecommerce-images/product-page-01-product-shot-02.jpg",imageAlt:"Front of women's Basic Tee in black.",primary:!1}],sizes:[{name:"XXS",inStock:!0},{name:"XS",inStock:!0},{name:"S",inStock:!0},{name:"M",inStock:!0},{name:"L",inStock:!0},{name:"XL",inStock:!1}]};function U(){for(var e=arguments.length,s=Array(e),t=0;t<e;t++)s[t]=arguments[t];return s.filter(Boolean).join(" ")}function Z(e){let{colors:s}=e,[t,l]=(0,a.useState)(q.colors[0]);return(0,r.jsx)("div",{className:"mx-auto max-w-md overflow-hidden rounded-3xl bg-white shadow",children:(0,r.jsxs)("div",{className:"px-4 py-5 sm:p-6",children:[(0,r.jsx)("img",{src:q.images[2].imageSrc,alt:q.images[2].imageAlt,className:U(q.images[2].primary?"lg:col-span-2 lg:row-span-2":"hidden lg:block","h-44 w-full rounded-lg object-contain object-top")},q.images[2].id),(0,r.jsxs)("div",{className:"mx-auto mt-8 max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8",children:[(0,r.jsxs)("div",{className:"lg:col-span-5 lg:col-start-8",children:[(0,r.jsxs)("div",{className:"flex justify-between",children:[(0,r.jsx)("h1",{className:"text-xl font-medium text-gray-900",children:q.name}),(0,r.jsx)("p",{className:"text-xl font-medium text-gray-900",children:q.price})]}),(0,r.jsxs)("div",{className:"mt-4",children:[(0,r.jsx)("h2",{className:"sr-only",children:"Reviews"}),(0,r.jsxs)("div",{className:"flex items-center",children:[(0,r.jsxs)("p",{className:"text-sm text-gray-700",children:[q.rating,(0,r.jsx)("span",{className:"sr-only",children:" out of 5 stars"})]}),(0,r.jsx)("div",{className:"ml-1 flex items-center",children:[0,1,2,3,4].map(e=>(0,r.jsx)(O,{className:"h-5 w-5 flex-shrink-0 text-gray-200","aria-hidden":"true",style:{color:q.rating>e&&s[1]}},e))}),(0,r.jsx)("div",{"aria-hidden":"true",className:"ml-4 text-sm text-gray-300",children:"\xb7"}),(0,r.jsx)("div",{className:"ml-4 flex",children:(0,r.jsxs)("a",{href:"#",className:"text-sm font-medium",style:{color:s[1]},children:["See all ",q.reviewCount," reviews"]})})]})]})]}),(0,r.jsx)("div",{className:"mt-8 lg:col-span-5",children:(0,r.jsxs)("form",{children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("h2",{className:"text-sm font-medium text-gray-900",children:"Color"}),(0,r.jsxs)(z.E,{value:t,onChange:l,className:"mt-2",children:[(0,r.jsxs)(z.E.Label,{className:"sr-only",children:[" ","Choose a color"," "]}),(0,r.jsx)("div",{className:"flex items-center space-x-3",children:q.colors.map(e=>(0,r.jsxs)(z.E.Option,{value:e,className:s=>{let{active:t,checked:r}=s;return U(e.selectedColor,t&&r?"ring ring-offset-1":"",!t&&r?"ring-2":"","relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none")},children:[(0,r.jsxs)(z.E.Label,{as:"span",className:"sr-only",children:[" ",e.name," "]}),(0,r.jsx)("span",{"aria-hidden":"true",className:U(e.bgColor,"h-8 w-8 rounded-full border border-black border-opacity-10")})]},e.name))})]})]}),(0,r.jsxs)("div",{className:"mt-8",children:[(0,r.jsxs)("div",{className:"flex items-center justify-between",children:[(0,r.jsx)("h2",{className:"mb-2 text-sm font-medium text-gray-900",children:"Size"}),(0,r.jsx)("a",{href:"#",className:"mb-2 text-sm font-medium",style:{color:s[0]},children:"See sizing chart"})]}),(0,r.jsxs)("div",{className:"grid grid-cols-3 gap-3 sm:grid-cols-6",children:[(0,r.jsx)("div",{className:"flex items-center justify-center rounded-md border border-gray-200 bg-white py-3 px-3 text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 sm:flex-1",children:"XXS"}),(0,r.jsx)("div",{className:"flex items-center justify-center rounded-md border border-gray-200 bg-white py-3 px-3 text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 sm:flex-1",children:"XS"}),(0,r.jsx)("div",{className:"flex items-center justify-center rounded-md border border-gray-200 bg-white py-3 px-3 text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 sm:flex-1",children:"S"}),(0,r.jsx)("div",{className:"flex items-center justify-center rounded-md py-3 px-3 text-sm font-medium uppercase sm:flex-1",style:{color:x()(s[0]).isDark()?x()(s[0]).lighten(.8):x()(s[0]).darken(.8),backgroundColor:s[0]},children:"M"}),(0,r.jsx)("div",{className:"flex items-center justify-center rounded-md border border-gray-200 bg-white py-3 px-3 text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 sm:flex-1",children:"L"}),(0,r.jsx)("div",{className:"flex items-center justify-center rounded-md border border-gray-200 bg-white py-3 px-3 text-sm font-medium uppercase text-gray-900 opacity-30 hover:bg-gray-50 sm:flex-1",children:"XL"})]})]}),(0,r.jsx)("button",{type:"submit",className:"mt-8 flex w-full items-center justify-center rounded-md border border-transparent py-3 px-8 text-base font-medium text-white focus:outline-none",style:{color:x()(s[0]).isDark()?x()(s[0]).lighten(.8):x()(s[0]).darken(.8),backgroundColor:s[0]},children:"Add to cart"})]})})]})]})})}let G=[{name:"Startup",id:"tier-startup",href:"#",price:{monthly:"$30",annually:"$288"},description:"A plan that scales with your rapidly growing business.",features:["25 products","Up to 10,000 subscribers","Advanced analytics","24-hour support response time","Marketing automations"],mostPopular:!0}];
1function W(e){let{colors:s}=e;return(0,r.jsx)("div",{className:"mx-auto flex max-w-md items-center justify-center rounded-3xl border-2 bg-white",style:{borderColor:s[0]},children:G.map(e=>(0,r.jsxs)("div",{className:"p-8 xl:p-10",children:[(0,r.jsxs)("div",{className:"flex h-full items-center justify-between gap-x-4",children:[(0,r.jsx)("h3",{id:e.id,className:"text-lg font-semibold leading-8",style:{color:s[0]},children:e.name}),e.mostPopular?(0,r.jsx)("p",{className:"rounded-full bg-indigo-600/10 py-1 px-2.5 text-xs font-semibold leading-5",style:{color:x()(s[1]).isDark()?x()(s[1]).lighten(.8):x()(s[1]).darken(.8),backgroundColor:s[1]},children:"Most popular"}):null]}),(0,r.jsx)("p",{className:"mt-4 text-sm leading-6 text-gray-600",children:e.description}),(0,r.jsxs)("p",{className:"mt-6 flex items-baseline gap-x-1",children:[(0,r.jsx)("span",{className:"text-4xl font-bold tracking-tight text-gray-900",children:"$30"}),(0,r.jsx)("span",{className:"text-sm font-semibold leading-6 text-gray-600",children:"/month"})]}),(0,r.jsx)("a",{href:e.href,"aria-describedby":e.id,className:"mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline",style:{color:x()(s[0]).isDark()?x()(s[0]).lighten(.8):x()(s[0]).darken(.8),backgroundColor:s[0]},children:"Buy plan"}),(0,r.jsx)("ul",{role:"list",className:"mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10",children:e.features.map(e=>(0,r.jsxs)("li",{className:"flex gap-x-3",children:[(0,r.jsx)(j,{className:"h-6 w-5 flex-none","aria-hidden":"true",style:{color:s[1]}}),e]},e))})]},e.id))})}function I(e){let{colors:s}=e;return(0,r.jsxs)("div",{className:"mx-5 mb-28 max-w-7xl rounded-2xl bg-gray-50 py-24 shadow-md sm:mx-auto sm:px-6 lg:px-8",children:[(0,r.jsx)("h2",{className:"mb-10 text-center text-3xl font-bold text-gray-900 sm:text-4xl",style:{color:s[0]},children:"Color Palette Preview"}),(0,r.jsx)(B,{colors:s}),(0,r.jsxs)("div",{className:"grid grid-cols-1 items-center gap-4 lg:grid-cols-3",children:[(0,r.jsx)(E,{colors:s}),(0,r.jsx)(_,{colors:s}),(0,r.jsx)(R,{colors:s})]}),(0,r.jsx)(H,{colors:s}),(0,r.jsxs)("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2",children:[(0,r.jsx)(M,{colors:s}),(0,r.jsx)($,{colors:s})]}),(0,r.jsxs)("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2",children:[(0,r.jsx)(Z,{colors:s}),(0,r.jsx)(W,{colors:s})]})]})}let J=[{id:"complementary",name:"Complementary"},{id:"monochromatic",name:"Monochromatic"},{id:"analogous",name:"Analogous"},{id:"triadic",name:"Triadic"},{id:"tetradic",name:"Tetradic"}];function Q(){let[e,s]=(0,a.useState)("#f43f5e"),[t,l]=(0,a.useState)([]),[i,o]=(0,a.useState)(J[0].id),[d,m]=(0,a.useState)(!1),[u,g]=(0,a.useState)(0),p=(e,s)=>{m(!0),g(s),navigator.clipboard.writeText(e),setTimeout(()=>{m(!1)},1500)};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n(),{children:[(0,r.jsx)("title",{children:"HueHub"}),(0,r.jsx)("meta",{name:"description",content:"Generated by create next app"}),(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1"}),(0,r.jsx)("link",{rel:"icon",href:"/favicon.ico"})]}),(0,r.jsx)(c,{}),(0,r.jsxs)("main",{className:"min-h-screen",children:[(0,r.jsx)("div",{className:"absolute top-0 left-0 right-0 -z-10 h-[65rem] bg-[url('../public/wave.webp')] bg-bottom bg-no-repeat",style:{backgroundColor:t[0]}}),(0,r.jsxs)("div",{className:"mx-auto max-w-7xl px-6 py-14 lg:flex lg:items-center lg:gap-x-10 lg:px-8",children:[(0,r.jsxs)("div",{className:"mx-auto max-w-2xl lg:mx-0 lg:flex-auto",children:[(0,r.jsx)("h1",{className:"max-w-lg text-4xl font-medium tracking-tight sm:text-6xl",style:{color:x()(t[0]).isDark()?"white":"#111827"},children:"Create your own color palette"}),(0,r.jsx)("p",{className:"mt-6 text-lg leading-8 opacity-70",style:{color:x()(t[0]).isDark()?"white":"#111827"},children:"Choose from a variety of color modes and pick your primary color. Then, you can copy the color palette to your clipboard and use it in your projects. Down below, you can see some components that use the color palette!"})]}),(0,r.jsxs)("div",{className:"mx-auto mt-16 max-w-lg rounded-lg bg-white p-8 shadow-2xl sm:mt-24 lg:mt-0 lg:flex-shrink-0 lg:flex-grow",children:[(0,r.jsx)("div",{className:"mt-10 flex items-center justify-center ",children:(0,r.jsx)(h,{color:e,setColor:s,setColors:l,mode:i})}
1),(0,r.jsxs)("div",{className:"mx-5 mt-5 max-w-md sm:mx-auto",children:[(0,r.jsx)(N,{color:e,setColor:s}),(0,r.jsx)(b,{mode:i,setMode:o,modes:J}),(0,r.jsx)(v,{colors:t,copied:d,copyIndex:u,copyToClipboard:p})]})]})]}),(0,r.jsx)(I,{colors:t})]})]})}}},function(e){e.O(0,[212,774,888,179],function(){return e(e.s=5557)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.