From fbcc0385a4aa19875201ff66749d22c477e72441 Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Mon, 18 Mar 2024 19:45:15 -0700
Subject: [PATCH] center header:

---
 src/web/src/components/header.jsx | 50 ++++++++++++++++---------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/web/src/components/header.jsx b/src/web/src/components/header.jsx
index b1fc97a..07d9c01 100644
--- a/src/web/src/components/header.jsx
+++ b/src/web/src/components/header.jsx
@@ -35,30 +35,32 @@ function Header() {
   }
 
   return (
-    <div className="flex space-x-1">
-      {tabs.map((tab) => (
-        <Link key={tab.id} href={`/${tab.id}`} passHref>
-          <motion.a
-            onClick={() => setActiveTab(tab.id)}
-            className={`${
-              activeTab === tab.id ? "" : "hover:text-white/60"
-            } relative rounded-full px-3 py-1.5 text-sm font-medium text-white outline-sky-400 transition focus-visible:outline-2`}
-            style={{
-              WebkitTapHighlightColor: "transparent",
-            }}
-          >
-            {activeTab === tab.id && (
-              <motion.span
-                layoutId="bubble"
-                className="absolute inset-0 z-10 bg-white mix-blend-difference"
-                style={{ borderRadius: 9999 }}
-                transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
-              />
-            )}
-            {tab.label}
-          </motion.a>
-        </Link>
-      ))}
+    <div className="flex justify-center items-center">
+      <div className="flex space-x-1">
+        {tabs.map((tab) => (
+          <Link key={tab.id} href={`/${tab.id}`} passHref>
+            <motion.a
+              onClick={() => setActiveTab(tab.id)}
+              className={`${
+                activeTab === tab.id ? "" : "hover:text-white/60"
+              } relative rounded-full px-3 py-1.5 text-sm font-medium text-white outline-sky-400 transition focus-visible:outline-2`}
+              style={{
+                WebkitTapHighlightColor: "transparent",
+              }}
+            >
+              {activeTab === tab.id && (
+                <motion.span
+                  layoutId="bubble"
+                  className="absolute inset-0 z-10 bg-white mix-blend-difference"
+                  style={{ borderRadius: 9999 }}
+                  transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                />
+              )}
+              {tab.label}
+            </motion.a>
+          </Link>
+        ))}
+      </div>
     </div>
   );
 }