From 3dea32828f3f9c8f4004aa62a8a539600241640a Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Thu, 15 Jun 2023 23:17:11 +0200
Subject: [PATCH] refactor: simplify tailwind breakpoint indicator

---
 components/tailwind-indicator.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/tailwind-indicator.tsx b/components/tailwind-indicator.tsx
index 5644c1b..5d2e150 100644
--- a/components/tailwind-indicator.tsx
+++ b/components/tailwind-indicator.tsx
@@ -1,16 +1,25 @@
 export function TailwindIndicator() {
   if (process.env.NODE_ENV === "production") return null;
 
+  const breakpoints = [
+    { name: "xs", css: "block sm:hidden" },
+    {
+      name: "sm",
+      css: "hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden",
+    },
+    { name: "md", css: "hidden md:block lg:hidden xl:hidden 2xl:hidden" },
+    { name: "lg", css: "hidden lg:block xl:hidden 2xl:hidden" },
+    { name: "xl", css: "hidden xl:block 2xl:hidden" },
+    { name: "2xl", css: "hidden 2xl:block" },
+  ];
+
   return (
     <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
-      <div className="block sm:hidden">xs</div>
-      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
-        sm
-      </div>
-      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
-      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
-      <div className="hidden xl:block 2xl:hidden">xl</div>
-      <div className="hidden 2xl:block">2xl</div>
+      {breakpoints.map((breakpoint) => (
+        <div key={breakpoint.name} className={breakpoint.css}>
+          {breakpoint.name}
+        </div>
+      ))}
     </div>
   );
 }