https://race-zeta.vercel.app/_next/static/chunks/pages/components-f5de729a716954d5.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[505],{41164:function(e,r,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components",function(){return a(30158)}])},66492:function(e,r,a){"use strict";a.d(r,{Z:function(){return h}});var i=a(41799),s=a(99534),t=a(828),l=a(85893),n=a(25675),d=a.n(n),c=a(67294),o=a(41612);function h(e){var r,a=e.useSkeleton,n=void 0!==a&&a,h=e.src,m=e.width,x=e.height,g=e.alt,u=e.className,b=e.imgClassName,p=e.blurClassName,y=(0,s.Z)(e,["useSkeleton","src","width","height","alt","className","imgClassName","blurClassName"]),f=(0,t.Z)(c.useState(n?"loading":"complete"),2),v=f[0],j=f[1],k=null!==(r=null===u||void 0===u?void 0:u.includes("w-"))&&void 0!==r&&r;return(0,l.jsx)("figure",{style:k?void 0:{width:"".concat(m,"px")},className:u,children:(0,l.jsx)(d(),(0,i.Z)({className:(0,o.Z)(b,"loading"===v&&(0,o.Z)("animate-pulse",p)),src:h,width:m,height:x,alt:g,onLoadingComplete:function(){return j("complete")},layout:"responsive"},y))})}},84038:function(e,r,a){"use strict";var i,s=a(41799),t=a(69396),l=a(99534),n=a(85893),d=a(67294),c=a(53990),o=a(41612);!function(e){e[e.primary=0]="primary",e[e.outline=1]="outline",e[e.ghost=2]="ghost",e[e.light=3]="light",e[e.dark=4]="dark",e[e["svg-dark"]=5]="svg-dark",e[e.gray=6]="gray"}(i||(i={}));var h=d.forwardRef((function(e,r){var a=e.children,i=e.className,d=e.disabled,h=e.isLoading,m=e.variant,x=void 0===m?"primary":m,g=e.isDarkBg,u=void 0!==g&&g,b=(0,l.Z)(e,["children","className","disabled","isLoading","variant","isDarkBg"]),p=h||d;return(0,n.jsxs)("button",(0,t.Z)((0,s.Z)({ref:r,type:"button",disabled:p,className:(0,o.Z)("inline-flex items-center rounded px-4 py-2 font-medium","focus:outline-none focus-visible:ring focus-visible:ring-primary-500","shadow-sm","transition-colors duration-75",["primary"===x&&["bg-primary-500 text-white","border border-primary-600","hover:bg-primary-600 hover:text-white","active:bg-primary-500","disabled:bg-primary-400 disabled:hover:bg-primary-400"],"outline"===x&&["text-primary-500","border border-primary-500","hover:bg-primary-50 active:bg-primary-100 disabled:bg-primary-100",u&&"hover:bg-gray-900 active:bg-gray-800 disabled:bg-gray-800"],"ghost"===x&&["text-primary-500","shadow-none","hover:bg-primary-50 active:bg-primary-100 disabled:bg-primary-100",u&&"hover:bg-gray-900 active:bg-gray-800 disabled:bg-gray-800"],"light"===x&&["bg-white text-dark ","border border-gray-300","hover:bg-black hover:text-white","active:bg-white/80 disabled:bg-gray-200","rounded-lg"],"dark"===x&&["bg-black text-white","rounded-lg border border-neutral-800","hover:border-neutral-100 hover:bg-white hover:text-black active:bg-white disabled:bg-gray-900 disabled:text-gray-500"],"svg-dark"===x&&["bg-black text-white","rounded-lg border border-neutral-100","hover: border-none hover:invert active:bg-white disabled:bg-gray-700"],"gray"===x&&["bg-[#E6E6E6] text-black","rounded-3xl","hover:bg-black hover:text-white active:bg-black active:text-white disabled:bg-gray-700"]],"disabled:cursor-not-allowed",h&&"relative text-transparent transition-none hover:text-transparent disabled:cursor-wait",i)},b),{children:[h&&(0,n.jsx)("div",{className:(0,o.Z)("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",{"text-white":["primary","dark"].includes(x),"text-black":["light"].includes(x),"text-primary-500":["outline","ghost"].includes(x)}),children:(0,n.jsx)(c.Cd,{className:"animate-spin"})}),a]}))}));r.Z=h},30158:function(e,r,a){"use strict";a.r(r),a.d(r,{default:function(){return k}});var i,s=a(828),t=a(85893),l=a(86010),n=a(67294),d=a(84038),c=a(86323),o=a(24248),h=a(41799),m=a(69396),x=a(99534),g=a(41612),u=a(27466);!function(e){e[e.primary=0]="primary",e[e.outline=1]="outline",e[e.ghost=2]="ghost",e[e.light=3]="light",e[e.dark=4]="dark"}(i||(i={}));var b=n.forwardRef((function(e,r){var a=e.children,i=e.className,s=e.variant,l=void 0===s?"primary":s,n=e.isDarkBg,d=void 0!==n&&n,c=(0,x.Z)(e,["children","className","variant","isDarkBg"]);return(0,t.jsx)(u.Z,(0,m.Z)((0,h.Z)({ref:r},c),{className:(0,g.Z)("inline-flex items-center rounded px-4 py-2 font-medium","focus:outline-none focus-visible:ring focus-visible:ring-primary-500","shadow-sm","transition-colors duration-75",["primary"===l&&["bg-primary-500 text-white","border border-primary-600","hover:bg-primary-600 hover:text-white","active:bg-primary-500","disabled:bg-primary-400 disabled:hover:bg-primary-400"],"outline"===l&&["text-primary-500","border border-primary-500","hover:bg-primary-50 active:bg-primary-100 disabled:bg-primary-100",d&&"hover:bg-gray-900 active:bg-gray-800 disabled:bg-gray-800"],"ghost"===l&&["text-primary-500","shadow-none","hover:bg-primary-50 active:bg-primary-100 disabled:bg-primary-100",d&&"hover:bg-gray-900 active:bg-gray-800 disabled:bg-gray-800"],"light"===l&&["bg-white text-dark ","border border-gray-300","hover:bg-gray-100 hover:text-dark","active:bg-white/80 disabled:bg-gray-200"],"dark"===l&&["bg-gray-900 text-white","border border-gray-600","hover:bg-gray-800 active:bg-gray-700 disabled:bg-gray-700"]],"disabled:cursor-not-allowed",i),children:a}))})),p=n.forwardRef((function(e,r){var a=e.className,i=e.children,s=(0,x.Z)(e,["className","children"]);return(0,t.jsx)(u.Z,(0,m.Z)((0,h.Z)({ref:r},s),{className:(0,g.Z)("inline-flex items-center","font-medium text-primary-600 hover:text-primary-500","focus:outline-none focus-visible:rounded focus-visible:ring focus-visible:ring-primary-500 focus-visible:ring-offset-2",a),children:i}))})),y=a(49047),f=a(66492),v=a(76875);function j(e){var r=e.className,a=(0,x.Z)(e,["className"]);return(0,t.jsx)("div",(0,h.Z)({className:(0,g.Z)("animate-shimmer bg-[#f6f7f8]",r),style:{backgroundImage:"linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%)",backgroundSize:"700px 100%",backgroundRepeat:"no-repeat"}},a))}function k(){var e=(0,s.Z)(n.useState("light"),2),r=e[0],a=e[1],i=(0,s.Z)(n.useState("sky"),2),h=i[0],m=i[1],x="dark"===r?"text-gray-300":"text-gray-600";return(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(v.Z,{templateTitle:"Components",description:"Pre-built components with awesome default"}),(0,t.jsx)("main",{children:(0,t.jsx)("section",{className:(0,l.Z)("dark"===r?"bg-dark":"bg-gray-50",h),children:(0,t.jsxs)("div",{className:(0,l.Z)("layout min-h-screen py-20","dark"===r?"text-white":"text-black"),children:[(0,t.jsx)("h1",{children:"Built-in Components"}),(0,t.jsx)(o.Z,{direction:"left",className:"mt-2",href:"/",children:"Back to Home"}),(0,t.jsx)("div",{className:"mt-8 flex flex-wrap gap-2",children:(0,t.jsxs)(d.Z,{onClick:function(){return a("dark"===r?"light":"dark")}

1,variant:"dark"===r?"light":"dark",children:["Set to ","dark"===r?"light":"dark"]})}),(0,t.jsxs)("ol",{className:"mt-8 space-y-6",children:[(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"Customize Colors"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"You can change primary color to any Tailwind CSS colors. See globals.css to change your color."}),(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)("select",{name:"color",id:"color",value:h,className:(0,l.Z)("block max-w-xs rounded","dark"===r?"border border-gray-600 bg-dark":"border-gray-300 bg-white","focus:border-primary-400 focus:outline-none focus:ring focus:ring-primary-400"),onChange:function(e){return m(e.target.value)},children:N.map((function(e){return(0,t.jsx)("option",{value:e,children:e},e)}))}),(0,t.jsx)(b,{href:"https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/main/src/styles/colors.css",children:"Check list of colors"})]}),(0,t.jsxs)("div",{className:"flex flex-wrap gap-2 text-xs font-medium",children:[(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-50 text-black",children:"50"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-100 text-black",children:"100"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-200 text-black",children:"200"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-300 text-black",children:"300"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-400 text-black",children:"400"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-500 text-black",children:"500"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-600 text-white",children:"600"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-700 text-white",children:"700"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-800 text-white",children:"800"}),(0,t.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded bg-primary-900 text-white",children:"900"})]})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"UnstyledLink"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"No style applied, differentiate internal and outside links, give custom cursor for outside links."}),(0,t.jsxs)("div",{className:"space-x-2",children:[(0,t.jsx)(u.Z,{href:"/",children:"Internal Links"}),(0,t.jsx)(u.Z,{href:"https://theodorusclarence.com",children:"Outside Links"})]})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"PrimaryLink"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Add styling on top of UnstyledLink, giving a primary color to the link."}),(0,t.jsxs)("div",{className:"space-x-2",children:[(0,t.jsx)(p,{href:"/",children:"Internal Links"}),(0,t.jsx)(p,{href:"https://theodorusclarence.com",children:"Outside Links"})]})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"UnderlineLink"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Add styling on top of UnstyledLink, giving a dotted and animated underline."}),(0,t.jsxs)("div",{className:"space-x-2",children:[(0,t.jsx)(y.Z,{href:"/",children:"Internal Links"}),(0,t.jsx)(y.Z,{href:"https://theodorusclarence.com",children:"Outside Links"})]})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"ArrowLink"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Useful for indicating navigation, I use this quite a lot, so why not build a component with some whimsy touch?"}),(0,t.jsxs)("div",{className:"flex flex-wrap items-center gap-4",children:[(0,t.jsx)(o.Z,{href:"/",direction:"left",children:"Direction Left"}),(0,t.jsx)(o.Z,{href:"/",children:"Direction Right"}

1),(0,t.jsx)(o.Z,{as:u.Z,className:"inline-flex items-center",href:"/",children:"Polymorphic"}),(0,t.jsx)(o.Z,{as:b,variant:"light",className:"inline-flex items-center",href:"/",children:"Polymorphic"})]})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"ButtonLink"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Button styled link with 3 variants."}),(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)(b,{variant:"primary",href:"https://theodorusclarence.com",children:"Primary Variant"}),(0,t.jsx)(b,{variant:"outline",isDarkBg:"dark"===r,href:"https://theodorusclarence.com",children:"Outline Variant"}),(0,t.jsx)(b,{variant:"ghost",isDarkBg:"dark"===r,href:"https://theodorusclarence.com",children:"Ghost Variant"}),(0,t.jsx)(b,{variant:"dark",href:"https://theodorusclarence.com",children:"Dark Variant"}),(0,t.jsx)(b,{variant:"light",href:"https://theodorusclarence.com",children:"Light Variant"})]})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"Button"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Ordinary button with style."}),(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)(d.Z,{variant:"primary",children:"Primary Variant"}),(0,t.jsx)(d.Z,{variant:"outline",isDarkBg:"dark"===r,children:"Outline Variant"}),(0,t.jsx)(d.Z,{variant:"ghost",isDarkBg:"dark"===r,children:"Ghost Variant"}),(0,t.jsx)(d.Z,{variant:"dark",children:"Dark Variant"}),(0,t.jsx)(d.Z,{variant:"light",children:"Light Variant"})]}),(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)(d.Z,{disabled:!0,variant:"primary",children:"Disabled"}),(0,t.jsx)(d.Z,{disabled:!0,variant:"outline",isDarkBg:"dark"===r,children:"Disabled"}),(0,t.jsx)(d.Z,{disabled:!0,variant:"ghost",isDarkBg:"dark"===r,children:"Disabled"}),(0,t.jsx)(d.Z,{disabled:!0,variant:"dark",children:"Disabled"}),(0,t.jsx)(d.Z,{disabled:!0,variant:"light",children:"Disabled"})]}),(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)(d.Z,{isLoading:!0,variant:"primary",children:"Disabled"}),(0,t.jsx)(d.Z,{isLoading:!0,variant:"outline",isDarkBg:"dark"===r,children:"Disabled"}),(0,t.jsx)(d.Z,{isLoading:!0,variant:"ghost",isDarkBg:"dark"===r,children:"Disabled"}),(0,t.jsx)(d.Z,{isLoading:!0,variant:"dark",children:"Disabled"}),(0,t.jsx)(d.Z,{isLoading:!0,variant:"light",children:"Disabled"})]})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"Custom 404 Page"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Styled 404 page with some animation."}),(0,t.jsx)("div",{className:"flex flex-wrap gap-2",children:(0,t.jsx)(b,{href:"/404",children:"Visit the 404 page"})})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"Next Image"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Next Image with default props and skeleton animation"}),(0,t.jsx)(f.Z,{useSkeleton:!0,className:"w-32 md:w-40",src:"/favicon/apple-icon-180x180.png",width:"180",height:"180",alt:"Icon"})]}),(0,t.jsxs)("li",{className:"space-y-2",children:[(0,t.jsx)("h2",{className:"text-lg md:text-xl",children:"Skeleton"}),(0,t.jsx)("p",{className:(0,l.Z)("!mt-1 text-sm",x),children:"Skeleton with shimmer effect"}),(0,t.jsx)(j,{className:"h-72 w-72"})]})]})]})})})]})}var N=["rose","pink","fuchsia","purple","violet","indigo","blue","sky","cyan","teal","emerald","green","lime","yellow","amber","orange","red","slate","gray","zinc","neutral","stone"]}},function(e){e.O(0,[609,484,424,675,734,774,888,179],(function(){return r=41164,e(e.s=r);var r}));var r=e.O();_N_E=r}]);