https://corporate.gwp-cdn.elanco.com/08bddf7d35eb0fd4effa35dc7e547…/chunks/pages/colors-06090bae66941585.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[196],{3045:(e,s,t)=>{"use strict";t.r(s),t.d(s,{__N_SSP:()=>d,default:()=>i});var l=t(74429),r=t(10032),a=t.n(r),o=t(71041),n=t(27410),d=!0;function i(e){let{colors:s,brands:t,cssVariables:r,totalColors:d,analytics:i,user:c}=e,[x,u]=(0,o.useState)(""),[g,h]=(0,o.useState)("colors"),[b,p]=(0,o.useState)(null),[y,f]=(0,o.useState)(1),[j,N]=(0,o.useState)([]),[C,w]=(0,o.useState)(!1),[v,k]=(0,o.useState)(!1),[D,S]=(0,o.useState)(!1),[L,A]=(0,o.useState)(null),[T,I]=(0,o.useState)(""),[_,F]=(0,o.useState)(50),E=(0,o.useRef)(null);(0,o.useEffect)(()=>{let e=e=>{E.current&&!E.current.contains(e.target)&&w(!1)};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}},[]);let M=(0,o.useMemo)(()=>s.filter(e=>{let s=x.toLowerCase(),t=e.brands.map(e=>e.toLowerCase()),l=!s||e.id.toLowerCase().includes(s)||e.name.toLowerCase().includes(s)||e.hexCode.toLowerCase().includes(s)||e.aliases.some(e=>e.toLowerCase().includes(s))||t.some(e=>e.includes(s)),r=j.every(e=>t.some(s=>s.includes(e.toLowerCase())));return l&&r}),[s,x,j]),P=Math.ceil(M.length/48),B=(0,o.useMemo)(()=>{let e=(y-1)*48;return M.slice(e,e+48)},[M,y]),R=(0,o.useMemo)(()=>{if(!x||x.length<1)return{brands:[],colors:[]};let e=x.toLowerCase();return{brands:t.filter(s=>s.toLowerCase().includes(e)&&!j.map(e=>e.toLowerCase()).includes(s.toLowerCase())).slice(0,6),colors:s.filter(s=>s.name.toLowerCase().includes(e)||s.id.toLowerCase().includes(e)||s.hexCode.toLowerCase().includes(e)||s.aliases.some(s=>s.toLowerCase().includes(e))).slice(0,6)}},[x,t,s,j]),U=(0,o.useCallback)(e=>{u(e),f(1),w(!0)},[]),G=(0,o.useCallback)(e=>{N(s=>[...s,e]),u(""),f(1),w(!1)},[]),O=(0,o.useCallback)(e=>{N(s=>s.filter(s=>s.toLowerCase()!==e.toLowerCase())),f(1)},[]),V=(0,o.useCallback)(()=>{u(""),N([]),f(1),w(!1)},[]),z=async(e,s)=>{await navigator.clipboard.writeText(e),p(s),setTimeout(()=>{p(null)},2e3)};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(a(),{children:[(0,l.jsx)("title",{children:"Color Admin | Elanco"}),(0,l.jsx)("meta",{content:"Color Registry Administration Dashboard",name:"description"})]}),(0,l.jsxs)("div",{className:"bg-gray-50 min-h-screen",children:[(0,l.jsx)("header",{className:"border-b border-gray-200 bg-white shadow-sm",children:(0,l.jsx)("div",{className:"mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8",children:(0,l.jsxs)("div",{className:"flex items-center justify-between",children:[(0,l.jsxs)("div",{children:[(0,l.jsx)("h1",{className:"text-gray-900 text-2xl font-bold",children:"\uD83C\uDFA8 Color Admin"}),(0,l.jsxs)("p",{className:"text-sm text-gray-500",children:[d," colors in registry"]})]}),c.email?(0,l.jsxs)("div",{className:"text-sm text-gray-600",children:["Logged in as: ",c.email]}):null]})})}),(0,l.jsx)("nav",{className:"border-b border-gray-200 bg-white",children:(0,l.jsx)("div",{className:"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8",children:(0,l.jsx)("div",{className:"flex space-x-8",children:[{id:"colors",label:"\uD83C\uDFA8 Colors"},{id:"brands",label:"\uD83C\uDFF7️ Brands"},{id:"analytics",label:"\uD83D\uDCCA Analytics"},{id:"css",label:"\uD83D\uDC85 CSS Variables"},{id:"tools",label:"\uD83D\uDEE0️ Tools"}].map(e=>(0,l.jsx)("button",{className:"border-b-2 px-1 py-4 text-sm font-medium ".concat(g===e.id?"text-blue-600 border-blue-500":"border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"),onClick:()=>{h(e.id)},type:"button",children:e.label},e.id))})})}),(0,l.jsxs)("main",{className:"mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8",children:["colors"===g&&(0,l.jsxs)("div",{children:[(0,l.jsxs)("div",{className:"mb-6 flex flex-wrap items-start gap-4",children:[(0,l.jsxs)("div",{className:"relative w-full max-w-md",ref:E,children:[(0,l.jsx)("input",{className:"w-full rounded-lg border-2 border-gray-200 px-4 py-3 transition-colors focus:border-blue-500 focus:outline-none",onChange:e=>{U(e.target.value)},onFocus:()=>{w(!0)},placeholder:"\uD83D\uDD0D Search colors, aliases, or brand names...",type:"text",value:x}),x||j.length>0?(0,l.jsx)("button",{className:"absolute right-3 top-1/2 -translate-y-1/2 roun

1ded-full bg-gray-200 px-2 py-1 text-xs text-gray-600 hover:bg-gray-300",onClick:V,type:"button",children:"✕ Clear"}):null,C&&(R.brands.length>0||R.colors.length>0)?(0,l.jsxs)("div",{className:"absolute left-0 right-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border-2 border-gray-200 bg-white shadow-lg",children:[R.brands.length>0&&(0,l.jsxs)("div",{className:"border-b border-gray-100 py-2",children:[(0,l.jsx)("div",{className:"px-3 py-1 text-xs font-semibold uppercase text-gray-400",children:"Filter by Brand"}),R.brands.map(e=>(0,l.jsxs)("button",{className:"hover:bg-gray-50 flex w-full items-center gap-2 px-3 py-2 text-left",onClick:()=>{G(e)},type:"button",children:[(0,l.jsx)("span",{className:"text-purple-600",children:"\uD83C\uDFF7️"}),(0,l.jsx)("span",{className:"font-medium",children:e})]},e))]}),R.colors.length>0&&(0,l.jsxs)("div",{className:"py-2",children:[(0,l.jsx)("div",{className:"px-3 py-1 text-xs font-semibold uppercase text-gray-400",children:"Colors"}),R.colors.map(e=>{let s=x.toLowerCase(),t=e.aliases.find(e=>e.toLowerCase().includes(s));return(0,l.jsxs)("button",{className:"hover:bg-gray-50 flex w-full items-center gap-3 px-3 py-2 text-left",onClick:()=>{U(null!=t?t:e.id),w(!1)},type:"button",children:[(0,l.jsx)("div",{className:"h-5 w-5 flex-shrink-0 rounded border border-gray-300",style:{backgroundColor:e.hexCode}}),(0,l.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,l.jsx)("div",{className:"font-medium",children:e.name}),(0,l.jsx)("div",{className:"text-xs text-gray-500",children:t?"Alias: ".concat(t):e.hexCode})]})]},e.id)})]})]}):null]}),j.length>0&&(0,l.jsx)("div",{className:"flex flex-wrap gap-2",children:j.map(e=>(0,l.jsxs)("span",{className:"inline-flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800",children:["\uD83C\uDFF7️ ",e,(0,l.jsx)("button",{className:"text-blue-600 ml-1 hover:text-red-600",onClick:()=>{O(e)},type:"button",children:"\xd7"})]},e))})]}),(0,l.jsxs)("div",{className:"mb-4 text-sm text-gray-500",children:["Showing"," ",Math.min((y-1)*48+1,M.length),"-",Math.min(48*y,M.length)," ","of ",M.length," colors",x||j.length>0?" (filtered)":null]}),(0,l.jsx)("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",children:B.map(e=>(0,l.jsx)(m,{color:e,copiedId:b,onCopy:z},e.id))}),0===M.length&&(0,l.jsxs)("div",{className:"py-12 text-center text-gray-500",children:["No colors found matching “",x,"”"]}),P>1&&(0,l.jsx)(n.d,{activeIndex:y,amountOfPages:P,nextButtonText:(0,l.jsx)("span",{children:"Next"}),onPageChange:e=>{f(e)},pagesToShow:5,prevButtonText:(0,l.jsx)("span",{children:"Prev"}),showLastPage:!0})]}),"brands"===g&&(0,l.jsxs)("div",{children:[(0,l.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,l.jsxs)("h2",{className:"text-xl font-semibold",children:["All Brands (",t.length,")"]}),(0,l.jsx)("input",{className:"w-64 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",onChange:e=>{I(e.target.value),F(50)},placeholder:"Search brands...",type:"text",value:T})]}),(()=>{let e=t.filter(e=>e.toLowerCase().includes(T.toLowerCase())),s=e.slice(0,_),r=e.length>_;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{className:"flex flex-wrap gap-2",children:s.map(e=>(0,l.jsx)("span",{className:"hover:bg-blue-200 rounded-full bg-blue-100 px-3 py-1.5 text-sm font-medium text-blue-800 transition-colors",children:e},e))}),r?(0,l.jsxs)("button",{className:"hover:bg-blue-600 mt-4 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white transition-colors",onClick:()=>{F(e=>e+50)},type:"button",children:["Load more (",e.length-_," ","remaining)"]}):null,T&&0===e.length?(0,l.jsxs)("p",{className:"py-8 text-center text-gray-500",children:['No brands found matching "',T,'"']}):null]})})()]}),"analytics"===g&&(0,l.jsxs)("div",{children:[(0,l.jsx)("h2",{className:"mb-2 text-xl font-semibold",children:"\uD83D\uDCCA Color Usage Analytics"}),(0,l.jsxs)("p",{className:"mb-6 text-gray-600",children:["Real-time analysis of color usage across the codebase. Scanned ",i.totalFilesScanned," ","files."]}),(0,l.jsxs)("div",{className:"mb-8 grid grid-cols-2 gap-4 md:grid-cols-4",children:[(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-4 text-center shadow-sm",children:[(0,l.jsx)("div",{className:"text-gray-900 text-3xl font-bold",children:d}),(0,l.jsx)("div",{className:"mt-1 text-sm text-gray-500",children:"Total Colors"})]}),(0,l.jsxs)("div",{className:"border-green-200 from-green-50 to-green-100 rounded-lg border bg-gradient-to-br p-4 text-center shadow-sm",children:[(0,l.jsx)("div",{className:"text-green-700 text-3xl font-bold",children:i.usedColors.length}),(0,l.jsx)("div",{className:"mt-1 text-sm text-green-600",children:"Colors In Use"})]}),(0,l.jsxs)("div",{className:"border-amber-200 from-amber-50 to-amber-100 rounded-lg border bg-gradient-to-br p-4 text-center shadow-sm",children:[(0,l.jsx)("div",{className:"text-amber-700 text-3xl font-bold",children:i.unusedColors.length}),(0,l.jsx)("div",{className:"text-amber-600 mt-1 text-sm",children:"Unused Colors"})]}),(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-4 text-center shadow-sm",children:[(0,l.jsx)("div",{className:"text-gray-900 text-3xl font-bold",children:i.totalColorReferences}),(0,l.jsx)("div",{className:"mt-1 text-sm text-gray-500",children:"Total References"})]})]}),(0,l.jsxs)("div",{className:"grid gap-6 md:grid-cols-2",children:[(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[(0,l.jsxs)("h3",{className:"mb-4 text-lg font-semibold",children:["\uD83D\uDCC8 Most Used Colors"," ",D?"(All ".concat(i.usedColors.length,")"):"(Top 15 of ".concat(i.usedColors.length,")")]}),(0,l.jsx)("div",{className:"max-h-[600px] space-y-2 overflow-y-auto",children:i.usedColors.slice(0,D?i.usedColors.length:15).map((e,t)=>{var r;let a=s.find(s=>s.id===e.colorId),o=L===e.colorId;return(0,l.jsxs)("div",{children:[(0,l.jsxs)("button",{className:"bg-gray-50 flex w-full items-center gap-3 rounded-lg p-2 text-left transition-colors hover:bg-gray-100",onClick:()=>{A(o?null:e.colorId)},type:"button",children:[(0,l.jsx)("span",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold text-gray-700",children:t+1}),(0,l.jsx)("div",{className:"h-6 w-6 flex-shrink-0 rounded border border-gray-200",style:{backgroundColor:null!=(r=null==a?void 0:a.hexCode)?r:"#ccc"}}),(0,l.jsx)("span",{className:"flex-1 truncate text-sm font-medium",children:e.colorId}),(0,l.jsxs)("span",{className:"text-xs text-gray-500",children:[e.count," ","refs"]}),(0,l.jsxs)("span",{className:"text-xs text-gray-400",children:[e.fileCount," ","files"]}),(0,l.jsx)("span",{className:"text-xs text-gray-400",children:o?"▲":"▼"})]}),o&&e.files&&e.files.length>0?(0,l.jsxs)("div",{className:"ml-8 mt-1 max-h-48 overflow-y-auto rounded border border-gray-200 bg-white p-2",children:[(0,l.jsx)("div",{className:"mb-1 text-xs font-medium text-gray-600",children:"Files using this color:"}),e.files.map(e=>(0,l.jsx)("div",{className:"truncate py-0.5 font-mono text-xs text-gray-500",title:e,children:e},e))]}):null]},e.colorId)})}),i.usedColors.length>15&&(0,l.jsx)("button",{className:"border-blue-200 bg-blue-50 mt-4 w-full rounded-lg border px-4 py-2 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100",onClick:()=>{S(!D)},type:"button",children:D?"← Show Less":"Show More (".concat(i.usedColors.length-15," more colors)")})]}),(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[(0,l.jsxs)("h3",{className:"mb-2 text-lg font-semibold",children:["⚠️ Unused Colors (",i.unusedColors.length,")"]}),(0,l.jsx)("p",{className:"mb-4 text-xs text-gray-500",children:"These colors are defined but not referenced in code. They may be used in CMS content."}),(0,l.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(v?i.unusedColors:i.unusedColors.slice(0,30)).map(e=>{var t;let r=s.find(s=>s.id===e);return(0,l.jsxs)("div",{className:"flex items-center gap-1.5 rounded-full bg-gray-100 px-2 py-1",children:[(0,l.jsx)("div",{className:"h-4 w-4 roun

1ded-full border border-gray-200",style:{backgroundColor:null!=(t=null==r?void 0:r.hexCode)?t:"#ccc"}}),(0,l.jsx)("span",{className:"text-xs text-gray-600",children:e})]},e)}),i.unusedColors.length>30&&!v&&(0,l.jsxs)("button",{className:"text-blue-600 hover:bg-blue-200 rounded-full bg-blue-100 px-3 py-1 text-xs transition-colors",onClick:()=>{k(!0)},type:"button",children:["... and"," ",i.unusedColors.length-30," ","more →"]}),v&&i.unusedColors.length>30?(0,l.jsx)("button",{className:"rounded-full bg-gray-200 px-3 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-300",onClick:()=>{k(!1)},type:"button",children:"Show less ↑"}):null]})]})]}),(0,l.jsxs)("p",{className:"mt-6 text-right text-xs text-gray-400",children:["Last scanned:"," ",new Date(i.scanTime).toLocaleString("en-GB",{day:"numeric",month:"short",year:"numeric",hour:"2-digit",minute:"2-digit",hour12:!0,timeZone:"UTC"})]})]}),"css"===g&&(0,l.jsxs)("div",{children:[(0,l.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,l.jsx)("h2",{className:"text-xl font-semibold",children:"CSS Variables"}),(0,l.jsx)("button",{className:"bg-blue-600 rounded-lg px-4 py-2 text-white hover:bg-blue-700",onClick:()=>{z(r,"css")},type:"button",children:"css"===b?"✓ Copied!":"\uD83D\uDCCB Copy CSS"})]}),(0,l.jsx)("pre",{className:"bg-gray-900 overflow-x-auto rounded-lg p-4 text-sm text-green-400",children:r})]}),"tools"===g&&(0,l.jsxs)("div",{className:"space-y-6",children:[(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-6 shadow-sm",children:[(0,l.jsx)("h3",{className:"mb-2 text-lg font-semibold",children:"\uD83D\uDDA5️ CLI: Add New Color"}),(0,l.jsx)("p",{className:"mb-3 text-gray-600",children:"Interactive command to add colors with validation:"}),(0,l.jsx)("pre",{className:"bg-gray-900 rounded-lg p-4 text-sm text-green-400",children:"pnpm run add-color\n\n# Prompts for:\n# → Color ID (validated format)\n# → Display Name\n# → Hex Code (duplicate check)\n# → Aliases, Brands, Towers\n\n# ✅ Auto-adds to registry.ts\n# ✅ Validates naming & duplicates"})]}),(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-6 shadow-sm",children:[(0,l.jsx)("h3",{className:"mb-2 text-lg font-semibold",children:"\uD83D\uDCCA CLI: Color Usage Analytics"}),(0,l.jsx)("p",{className:"mb-3 text-gray-600",children:"Analyze which colors are used in the codebase and generate usage data for the Analytics tab:"}),(0,l.jsx)("pre",{className:"bg-gray-900 rounded-lg p-4 text-sm text-green-400",children:"pnpm run color-analytics\n\n# Scans all source files for color usage\n# → Shows most used colors (Top 10)\n# → Shows unused colors\n# → Generates JSON file for Analytics tab\n\n# Output: src/products/flexible-web-toolkit/\n#         colors/color-usage-analytics.json"}),(0,l.jsx)("p",{className:"mt-3 text-sm text-gray-500",children:"\uD83D\uDCA1 Run this before deploying to update the Analytics tab data."})]}),(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-6 shadow-sm",children:[(0,l.jsx)("h3",{className:"mb-2 text-lg font-semibold",children:"✏️ Manual: Edit Registry"}),(0,l.jsx)("p",{className:"mb-3 text-gray-600",children:"Registry file location:"}),(0,l.jsx)("code",{className:"block rounded bg-gray-100 p-3 text-sm",children:"src/products/flexible-web-toolkit/colors/registry.ts"})]}),(0,l.jsxs)("div",{className:"rounded-lg border border-gray-200 bg-white p-6 shadow-sm",children:[(0,l.jsx)("h3",{className:"mb-2 text-lg font-semibold",children:"\uD83D\uDCE6 Import in Code"}),(0,l.jsx)("pre",{className:"bg-gray-900 rounded-lg p-4 text-sm text-green-400",children:"import { getColor, getColorByAlias } from\n  '@/products/flexible-web-toolkit/colors'\n\n// Get color by ID\nconst seresto = getColor('seresto')\n\n// Get color by alias\nconst color = getColorByAlias('my_alias')"})]})]})]}),(0,l.jsx)("footer",{className:"bg-gray-50 mt-12 border-t border-gray-200 py-8",children:(0,l.jsxs)("div",{className:"text-center",children:[(0,l.jsxs)("p",{className:"text-sm text-gray-600",children:["Made with ",(0,l.jsx)("span",{className:"text-red-500",children:"❤️"})," ","by the"," ",(0,l.jsx)("span",{className:"text-green-700 font-semibold",children:"Global Web Platform \uD83C\uDF0E (Team Portfolio)"})]}),(0,l.jsx)("p",{className:"mt-1 text-xs text-gray-400",children:"Color Registry & Dashboard — Keeping our brands beautiful and consistent"})]})})]})]})}let c="max-h-24";function x(e){let{buttonClassName:s,items:t,listClassName:r,listId:a,onToggle:o,open:n,prefix:d,tagClassName:i,label:c}=e;return 0===t.length?null:(0,l.jsxs)("div",{className:"mt-1.5",children:[(0,l.jsxs)("button",{"aria-controls":a,"aria-expanded":n,className:s,onClick:o,type:"button",children:[t.length," ",c,t.length>

11?"s":""," ",n?"▲":"▼"]}),n?(0,l.jsx)("div",{className:r,id:a,children:t.map(e=>(0,l.jsxs)("span",{className:i,title:e,children:[d," ",e]},e))}):null]})}function m(e){let{color:s,onCopy:t,copiedId:r}=e,[a,n]=(0,o.useState)(!1),[d,i]=(0,o.useState)(!1),m="dark"===s.textContrast?"text-gray-900":"text-white";return(0,l.jsxs)("div",{className:"group overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md",children:[(0,l.jsx)("div",{className:"relative flex h-20 items-center justify-center ".concat(m),style:{backgroundColor:s.hexCode||"#cccccc"},children:(0,l.jsx)("span",{className:"font-mono text-sm font-bold drop-shadow-sm",children:s.hexCode})}),(0,l.jsxs)("div",{className:"p-3",children:[(0,l.jsx)("h3",{className:"text-gray-900 break-words text-sm font-semibold",children:s.name}),(0,l.jsx)("p",{className:"break-all font-mono text-xs text-gray-500",children:s.id}),(0,l.jsx)(x,{buttonClassName:"bg-amber-50 text-amber-700 hover:bg-amber-100 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium transition-colors",items:s.aliases,label:"alias",listClassName:"border-amber-200 bg-amber-50 ".concat(c," mt-1 flex flex-wrap gap-1 overflow-y-auto rounded border p-1.5"),listId:"aliases-".concat(s.id),onToggle:()=>{n(!a)},open:a,prefix:"",tagClassName:"bg-amber-100 text-amber-800 inline-block max-w-full break-words rounded px-1.5 py-0.5 font-mono text-xs"}),(0,l.jsx)(x,{buttonClassName:"bg-purple-100 text-purple-700 hover:bg-purple-200 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium transition-colors",items:s.brands,label:"brand",listClassName:"border-purple-200 bg-purple-50 ".concat(c," mt-1 flex flex-wrap gap-1 overflow-y-auto rounded border p-1.5"),listId:"brands-".concat(s.id),onToggle:()=>{i(!d)},open:d,prefix:"\uD83C\uDFF7️",tagClassName:"bg-purple-200 text-purple-800 inline-block max-w-full break-words rounded px-1.5 py-0.5 text-xs font-medium"}),(0,l.jsxs)("div",{className:"mt-2 flex gap-1",children:[(0,l.jsx)("button",{className:"flex-1 rounded bg-gray-100 px-2 py-1 text-xs hover:bg-gray-200",onClick:()=>{t(s.id,"id-".concat(s.id))},type:"button",children:r==="id-".concat(s.id)?"✓ Copied":"ID"}),(0,l.jsx)("button",{className:"flex-1 rounded bg-gray-100 px-2 py-1 text-xs hover:bg-gray-200",onClick:()=>{t(s.hexCode,"hex-".concat(s.id))},type:"button",children:r==="hex-".concat(s.id)?"✓ Copied":"Hex"})]})]})]})}},14652:(e,s,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/colors",function(){return t(3045)}])}},e=>{e.O(0,[410,728,636,988,792],()=>e(e.s=14652)),_N_E=e.O()}]);
2//# sourceMappingURL=colors-06090bae66941585.js.map