feat: display hundreds of buttons with verbose classNames

acd02 · Dec 21, 2022 · 85e1847 · 85e1847
1 parent 642b0c2
commit 85e1847
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 6 deletions.
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -5,8 +5,58 @@ type Props = {
   className?: string
 }
 
+const classesBloat = [
+  'ZNCaTA7Drz5gnsCBSEfW',
+  'MLR8BwJBSCwHDj4HrjWi',
+  'cZ0nU5LiyRWWrKCEj7Al',
+  'LeL0e3Hu5tipcdCGvHiy',
+  '40fHAZ2595Lb8RArh2nl',
+  'Pn6tEwxTEfhTBRxGmQMR',
+  'Ph3EvZQTwgQnaCRdkg59',
+  'NOClgrxJLJqje9waUYUs',
+  'akOIUF33gk9K50wfj8AX',
+  'P0Or33K2HU1uu5X3qqEY',
+  'Hr2VARQIKRjQQuPrBcNS',
+  'N0aZcIeDUzRiSoRPqXav',
+  'x3bTVa8ow4DKQtUQx4Mv',
+  'Cx73t0I5oxvLFltN2nbE',
+  'tJ3kHEqkdpH6DV4Y64nU',
+  'w9rtGMhAUu2j6bTolspv',
+  'eMnJtDtCalZzNGH1yaiP',
+  'ksgpRGy5TCMjZ38ZRmLW',
+  'LMqGgAqqjUKizuqG0zH0',
+  'mgGD0oHpYLlSLfabnIrn',
+  'X2RKuk58UbghRmSKalc0',
+  'FkrkosAy2xvu1qztR1Bj',
+  'qZZ9i94v5aFrJNLjr8Kc',
+  'Wy8V9n5NGx87s9miwdqS',
+  'Wpz5KuIt8tMsdgf0yf2q',
+  'vQedEze0e20dYjzVh4Ot',
+  '4jI9GOAT4GYi2vcwAXm3',
+  'pFgpvoY8kgdRd7HnNty3',
+  'd2kvfDyRzbdj7EkZA3ns',
+  'GDEoj5HR2yuQRqPpQUMi',
+  'B0j2BxOVQFQuJD2zLTtv',
+  'Vuxnbe9QAdm2VNZYkdWv',
+  'ZrWeZ4WNoJa2zRcd14QA',
+  'nB4k8Fd10Zv18sjDU6fY',
+  'lKmE5mcM1F3zm7mdmXwt',
+  'jLoRoW6KAZ17HtDbmUSD',
+  '8X7336hvjUkdj2SJVGle',
+  'NHu8e3xDVoKmRevAqI6D',
+  'Da5SbAMKSnQ8eaggLTIg',
+  'iHlcCVY435g7EEltwjRG',
+]
+
 const button = cva(
-  ['font-semibold', 'border', 'rounded', 'hover:transition-colors', 'hover:duration-100'],
+  [
+    'font-semibold',
+    'border',
+    'rounded',
+    'hover:transition-colors',
+    'hover:duration-100',
+    ...classesBloat,
+  ],
   {
     variants: {
       disabled: {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,14 +4,18 @@ import { MainLayout } from 'components/layouts/Main'
 import type { NextPageWithLayout } from 'global-next'
 import type { PropsWithChildren } from 'react'
 
+const arr = Array.from({ length: 500 }).map((_, index) => index)
+
 function Home() {
   return (
     <div className="mx-auto grid max-w-5xl justify-center gap-y-10">
-      <Components.Section label="Primary buttons:">
-        <Button>small button</Button>
-        <Button size="medium">medium button</Button>
-        <Button size="large">large button</Button>
-      </Components.Section>
+      {arr.map(index => (
+        <Components.Section key={index} label={`Primary buttons: ${index}`}>
+          <Button>small button</Button>
+          <Button size="medium">medium button</Button>
+          <Button size="large">large button</Button>
+        </Components.Section>
+      ))}
 
       <Components.Section label="Secondary buttons:">
         <Button intent="secondary">small button</Button>