https://yuhi-sa.github.io/devtoolbox/_next/static/chunks/9449.0853c41276223aab.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9449],{6972:(e,a,r)=>{r.d(a,{A:()=>l});var t=r(4568),n=r(7620);async function s(e){try{return await navigator.clipboard.writeText(e),!0}catch(r){let a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select();try{return document.execCommand("copy"),!0}catch(e){return!1}finally{document.body.removeChild(a)}}}function l(e){let{text:a,label:r="Copy"}=e,[l,c]=(0,n.useState)(!1),o=async()=>{await s(a)&&(c(!0),setTimeout(()=>c(!1),2e3))};return(0,t.jsx)("button",{onClick:o,disabled:!a,className:"px-3 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-600 transition disabled:opacity-50",children:l?"Copied!":r})}},9449:(e,a,r)=>{r.r(a),r.d(a,{default:()=>i});var t=r(4568),n=r(7620);let s={columns:3,rows:3,columnSize:"1fr",rowSize:"1fr",gap:8,columnGap:8,rowGap:8,useUniformGap:!0},l=["1fr","2fr","auto","100px","150px","200px","minmax(100px, 1fr)"],c=["1fr","2fr","auto","50px","100px","150px","minmax(50px, 1fr)"];var o=r(6972);let m=["bg-blue-500","bg-green-500","bg-yellow-500","bg-red-500","bg-purple-500","bg-pink-500","bg-indigo-500","bg-teal-500","bg-orange-500","bg-cyan-500","bg-emerald-500","bg-rose-500"];function i(){let[e,a]=(0,n.useState)(s),r=(e,r)=>{a(a=>({...a,[e]:r}))},i=function(e){var a,r,t,n;let s=["display: grid;"];return s.push("grid-template-columns: ".concat((a=e.columns,r=e.columnSize,"repeat(".concat(a,", ").concat(r,")")),";")),s.push("grid-template-rows: ".concat((t=e.rows,n=e.rowSize,"repeat(".concat(t,", ").concat(n,")")),";")),e.useUniformGap?e.gap>0&&s.push("gap: ".concat(e.gap,"px;")):(e.columnGap>0&&s.push("column-gap: ".concat(e.columnGap,"px;")),e.rowGap>0&&s.push("row-gap: ".concat(e.rowGap,"px;"))),s.join("\n")}(e),d=e.columns*e.rows;return(0,t.jsxs)("div",{className:"space-y-4",children:[(0,t.jsxs)("div",{className:"flex gap-4 items-center flex-wrap",children:[(0,t.jsxs)("label",{className:"flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400",children:["Columns:",(0,t.jsx)("input",{type:"number",min:1,max:12,value:e.columns,onChange:e=>r("columns",Math.max(1,Math.min(12,Number(e.target.value)))),className:"w-16 border rounded px-2 py-1 bg-white dark:bg-gray-800 dark:border-gray-600"})]}),(0,t.jsxs)("label",{className:"flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400",children:["Rows:",(0,t.jsx)("input",{type:"number",min:1,max:12,value:e.rows,onChange:e=>r("rows",Math.max(1,Math.min(12,Number(e.target.value)))),className:"w-16 border rounded px-2 py-1 bg-white dark:bg-gray-800 dark:border-gray-600"})]}),(0,t.jsxs)("label",{className:"flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400",children:["Column Size:",(0,t.jsx)("select",{value:e.columnSize,onChange:e=>r("columnSize",e.target.value),className:"border rounded px-2 py-1 bg-white dark:bg-gray-800 dark:border-gray-600",children:l.map(e=>(0,t.jsx)("option",{value:e,children:e},e))})]}),(0,t.jsxs)("label",{className:"flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400",children:["Row Size:",(0,t.jsx)("select",{value:e.rowSize,onChange:e=>r("rowSize",e.target.value),className:"border rounded px-2 py-1 bg-white dark:bg-gray-800 dark:border-gray-600",children:c.map(e=>(0,t.jsx)("option",{value:e,children:e},e))})]})]}),(0,t.jsxs)("div",{className:"flex gap-4 items-center flex-wrap",children:[(0,t.jsxs)("label",{className:"flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400",children:[(0,t.jsx)("input",{type:"checkbox",checked:e.useUniformGap,onChange:e=>r("useUniformGap",e.target.checked)}),"Uniform gap"]}),e.useUniformGap?(0,t.jsxs)("label",{className:"flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400",children:["Gap: ",e.gap,"px",(0,t.jsx)("input",{type:"range",min:0,max:40,value:e.gap,onChange:e=>r("gap",Number(e.target.value)),className:"w-32"})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("label",{className:"flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400",children:["Column Gap: ",e.columnGap,"px",(0,t.jsx)("input",{type:"range",min:0,max:40,value:e.columnGap,onChange:e=>r("columnGap",Number(e.target.value)),className:"w-32"})]}),(0,t.jsxs)("label",{className:"flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400",children:["Row Gap: ",e.rowGap,"px",(0,t.jsx)("input",{type:"range",min:0,max:40,value:e.rowGap,onChange:e=>r("rowGap",Number(e.target.value)),className:"w-32"})]})]})]}),(0,t.jsxs)("div",{children:[(0,t.jsxs)("label",{className:"block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300",children:["Preview (",d," cells)"]}),(0,t.jsx)("div",{className:"border rounded-lg p-4 bg-gray-100 dark:bg-gray-900 dark:border-gray-600 min-h-[200px]",children:(0,t.jsx)("div",{style:{display:"grid",gridTemplateColumns:"repeat(".concat(e.columns,", 1fr)"),gridTemplateRows:"repeat(".concat(e.rows,", 60px)"),gap:e.useUniformGap?"".concat(e.gap,"px"):"".concat(e.rowGap,"px ").concat(e.columnGap,"px")},children:Array.from({length:d},(e,a)=>(0,t.jsx)("div",{className:"".concat(m[a%m.length]," text-white font-bold rounded flex items-center justify-center text-sm"),children:a+1},a))})})]}),(0,t.jsxs)("div",{children:[(0,t.jsxs)("div",{className:"flex justify-between items-center mb-1",children:[(0,t.jsx)("label",{className:"text-sm font-medium text-gray-700 dark:text-gray-300",children:"Generated CSS"}),(0,t.jsx)(o.A,{text:i})]}),(0,t.jsx)("textarea",{readOnly:!0,value:i,className:"w-full h-40 p-3 font-mono text-sm border rounded-lg bg-gray-50 dark:bg-gray-900 dark:border-gray-600"})]})]})}}}]);