feat: server group

src/components/Footer.tsx

@@ -6,16 +6,21 @@ const Footer: React.FC = () => {
     <footer className="mx-auto w-full max-w-5xl px-4 lg:px-0 pb-4">
       <section className="flex flex-col">
         <section className="mt-1 flex items-center justify-between gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
-          <p>©2020-{new Date().getFullYear()}{" "}
+          <p>
+            ©2020-{new Date().getFullYear()}{" "}
             <a href={"https://github.com/naiba/nezha"} target="_blank">
               Nezha
-            </a></p>
-          <p>Theme by <a
-            href={"https://github.com/hamster1963/nezha-dash-react"}
-            target="_blank"
-          >
-            Nezha-Dash
-          </a></p>
+            </a>
+          </p>
+          <p>
+            Theme by{" "}
+            <a
+              href={"https://github.com/hamster1963/nezha-dash-react"}
+              target="_blank"
+            >
+              Nezha-Dash
+            </a>
+          </p>
         </section>
       </section>
     </footer>

src/components/GroupSwitch.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { m } from "framer-motion";
+
+export default function GroupSwitch({
+  tabs,
+  currentTab,
+  setCurrentTab,
+}: {
+  tabs: string[];
+  currentTab: string;
+  setCurrentTab: (tab: string) => void;
+}) {
+  return (
+    <div className="z-50 flex flex-col items-start rounded-[50px]">
+      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+        {tabs.map((tab: string) => (
+          <div
+            key={tab}
+            onClick={() => setCurrentTab(tab)}
+            className={cn(
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
+              currentTab === tab
+                ? "text-black dark:text-white"
+                : "text-stone-400 dark:text-stone-500",
+            )}
+          >
+            {currentTab === tab && (
+              <m.div
+                layoutId="tab-switch"
+                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+                style={{
+                  originY: "0px",
+                  borderRadius: 46,
+                }}
+              />
+            )}
+            <div className="relative z-20 flex items-center gap-1">
+              <p className="whitespace-nowrap">{tab}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/motion/framer-lazy-feature.ts

@@ -0,0 +1 @@
+export { domMax as default } from "framer-motion";

src/components/motion/motion-provider.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { LazyMotion } from "framer-motion";
+
+const loadFeatures = () =>
+  import("./framer-lazy-feature").then((res) => res.default);
+
+export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <LazyMotion features={loadFeatures} strict key="framer">
+      {children}
+    </LazyMotion>
+  );
+};