Merge branch 'main' into refactor/match-homepage-styles-with-design

package.json

@@ -18,6 +18,7 @@
   },
   "prettier": "@solvro/config/prettier",
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-query": "^5.60.5",
     "class-variance-authority": "^0.7.0",

src/app/map/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 
-import { StaticMap } from "@/components/static-map";
+import { Button } from "@/components/button";
+import { StaticMap } from "@/components/map/static-map";
 
 const DynamicInteractiveMap = dynamic(
   async () =>
-    import("@/components/interactive-map").then(
+    import("@/components/map/interactive-map").then(
       (module_) => module_.InteractiveMap,
     ),
   {
@@ -16,12 +17,47 @@ const DynamicInteractiveMap = dynamic(
 );
 
 export default function Page() {
+  const [activeStaticMap, setActiveStaticMap] = useState(true);
+  const [activeInteractiveMap, setActiveInteractiveMap] = useState(false);
+
+  function switchMap() {
+    setActiveStaticMap(!activeStaticMap);
+    setActiveInteractiveMap(!activeInteractiveMap);
+  }
+
   return (
     <div>
-      <Suspense fallback={<div>Loading...</div>}>
-        <DynamicInteractiveMap />
-      </Suspense>
-      <StaticMap />
+      <div className="mx-auto mt-10 grid w-4/5 grid-cols-2 gap-10">
+        <Button
+          variant={activeStaticMap ? "levelSelected" : "levelUnselected"}
+          disabled={activeStaticMap}
+          onClick={() => {
+            switchMap();
+          }}
+          className="text-wrap p-6 text-[3vw] sm:text-base"
+        >
+          Mapa Wydarzenia
+        </Button>
+        <Button
+          variant={activeInteractiveMap ? "levelSelected" : "levelUnselected"}
+          disabled={activeInteractiveMap}
+          onClick={() => {
+            switchMap();
+          }}
+          className="text-wrap p-6 text-[3vw] sm:text-base"
+        >
+          Imprezy Towarzyszące
+        </Button>
+      </div>
+      <div>
+        {activeStaticMap ? (
+          <StaticMap />
+        ) : (
+          <Suspense fallback={<div>Loading...</div>}>
+            <DynamicInteractiveMap />
+          </Suspense>
+        )}
+      </div>
     </div>
   );
 }

src/components/button.tsx

@@ -21,6 +21,8 @@ const buttonVariants = cva(
         ghost:
           "border-0 bg-slate-500/0 transition-colors hover:bg-slate-500/10",
         link: "border-0 !py-1 !px-2",
+        levelSelected: "bg-gradient-main w-[90%] mx-auto border-0 rounded-2xl",
+        levelUnselected: "border-2 border-grey-300 w-[90%] mx-auto rounded-2xl",
       },
       variantColor: {
         default: "border-black",