diff --git a/package-lock.json b/package-lock.json index 1848ed1..eb7ea32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "juwenalia-web", "version": "0.1.0", "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", @@ -1543,11 +1544,152 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz", + "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==", + "license": "MIT" + }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.2.tgz", + "integrity": "sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-collapsible": "1.1.2", + "@radix-ui/react-collection": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.1", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.2.tgz", + "integrity": "sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.1", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collection": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.1.tgz", + "integrity": "sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-primitive": "2.0.1", + "@radix-ui/react-slot": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz", + "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-direction": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", + "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-id": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", - "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", "license": "MIT", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" @@ -1558,13 +1700,93 @@ } } }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz", + "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz", + "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz", + "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", - "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", "license": "MIT", "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0" + "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", @@ -1576,6 +1798,21 @@ } } }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@react-leaflet/core": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", @@ -1942,7 +2179,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@types/react": "*" diff --git a/package.json b/package.json index 933df33..5f61ddd 100644 --- a/package.json +++ b/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", diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx old mode 100644 new mode 100755 index 6b89e58..5792985 --- a/src/app/map/page.tsx +++ b/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 (
- Loading...
}> - - - +
+ + +
+
+ {activeStaticMap ? ( + + ) : ( + Loading...
}> + + + )} + ); } diff --git a/src/components/button.tsx b/src/components/button.tsx index a798634..3f16df3 100644 --- a/src/components/button.tsx +++ b/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", diff --git a/src/components/interactive-map.tsx b/src/components/map/interactive-map.tsx similarity index 100% rename from src/components/interactive-map.tsx rename to src/components/map/interactive-map.tsx diff --git a/src/components/map/map-floors-button.tsx b/src/components/map/map-floors-button.tsx new file mode 100644 index 0000000..84ddf96 --- /dev/null +++ b/src/components/map/map-floors-button.tsx @@ -0,0 +1,32 @@ +import type { MapFloorsButtonProps } from "@/lib/types"; +import { cn } from "@/lib/utils"; + +export function MapFloorsButton({ + level, + active, + ...props +}: MapFloorsButtonProps) { + return ( + + ); +} diff --git a/src/components/map/static-legend.tsx b/src/components/map/static-legend.tsx new file mode 100644 index 0000000..4c24def --- /dev/null +++ b/src/components/map/static-legend.tsx @@ -0,0 +1,40 @@ +import type { StaticLegendProps } from "@/lib/types"; +import { cn } from "@/lib/utils"; + +import { NoDataInfo } from "../no-data-info"; + +export function StaticLegend({ + items, + activeView, + className, +}: StaticLegendProps) { + const activeLevel = items.find((level) => level.name === activeView); + + if (activeLevel === undefined) { + return ( + + ); + } + + return ( +
+ {activeLevel.nodes.map((node) => ( +
+
+

{node.name}

+
+ ))} +
+ ); +} diff --git a/src/components/map/static-map.tsx b/src/components/map/static-map.tsx new file mode 100644 index 0000000..d2b9a97 --- /dev/null +++ b/src/components/map/static-map.tsx @@ -0,0 +1,120 @@ +import Image from "next/image"; +import { useState } from "react"; + +import { mapItems } from "@/config/legend-items"; +import type { MapView } from "@/lib/types"; +import { cn } from "@/lib/utils"; + +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "../ui/accordion"; +import { MapFloorsButton } from "./map-floors-button"; +import { StaticLegend } from "./static-legend"; + +export function StaticMap() { + const [view, setView] = useState("Outside"); + + function switchMapView(switchTo: MapView) { + switch (switchTo) { + case "Outside": { + setView("Outside"); + break; + } + case "Ground Floor": { + setView("Ground Floor"); + break; + } + case "Floor 1": { + setView("Floor 1"); + break; + } + case "Floor -1": { + setView("Floor -1"); + break; + } + default: { + break; + } + } + } + + return ( +
+

Mapa Wydarzenia

+
+
+
+ {mapItems.map((level) => { + return ( + { + switchMapView(level.name); + }} + /> + ); + })} +
+
+ {mapItems.map((MapLevel) => ( + {MapLevel.image.alt} + ))} +
+ + + + Poziomy + + +
+ {mapItems.map((level) => { + return ( + { + switchMapView(level.name); + }} + /> + ); + })} +
+ + + + + Legenda + + + + + + +

+ Legenda +

+ +
+
+ ); +} diff --git a/src/components/map/wr-map-legend.tsx b/src/components/map/wr-map-legend.tsx new file mode 100644 index 0000000..7dcac43 --- /dev/null +++ b/src/components/map/wr-map-legend.tsx @@ -0,0 +1,30 @@ +import { cn } from "@/lib/utils"; + +interface LegendProps { + items: { + text: string; + color: string; + }[]; + className?: string; +} + +export function Legend({ items, className }: LegendProps) { + return ( +
+ {items.map((item) => ( +
+
+ {item.text} +
+ ))} +
+ ); +} diff --git a/src/components/static-map.tsx b/src/components/static-map.tsx deleted file mode 100644 index 9fc70e0..0000000 --- a/src/components/static-map.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import Image from "next/image"; -import { useState } from "react"; - -import { cn } from "@/lib/utils"; - -import { Button } from "./button"; - -export function StaticMap() { - const [outside, setOutside] = useState(true); - const [floorZero, setFloorZero] = useState(false); - const [floorOne, setFloorOne] = useState(false); - const [floorMinusOne, setFloorMinusOne] = useState(false); - - function switchMapView(switchTo: string) { - switch (switchTo) { - case "Outside": { - setOutside(true); - setFloorZero(false); - setFloorOne(false); - setFloorMinusOne(false); - break; - } - case "Ground Floor": { - setOutside(false); - setFloorZero(true); - setFloorOne(false); - setFloorMinusOne(false); - break; - } - case "Floor 1": { - setOutside(false); - setFloorZero(false); - setFloorOne(true); - setFloorMinusOne(false); - break; - } - case "Floor -1": { - setOutside(false); - setFloorZero(false); - setFloorOne(false); - setFloorMinusOne(true); - break; - } - default: { - break; - } - } - } - - return ( -
-

Map Demo

-
-
- {"Hala - {"Hala - {"Hala - {"Hala -
-
- - - - -
-
-
- ); -} diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx new file mode 100644 index 0000000..0acdb8c --- /dev/null +++ b/src/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client"; + +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDown } from "lucide-react"; +import * as React from "react"; + +import { cn } from "@/lib/utils"; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = "AccordionItem"; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className, + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)); + +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/src/config/legend-items.tsx b/src/config/legend-items.tsx new file mode 100644 index 0000000..ef03ac7 --- /dev/null +++ b/src/config/legend-items.tsx @@ -0,0 +1,118 @@ +import { SunIcon } from "lucide-react"; + +import type { MapLevel } from "@/lib/types"; + +export const mapItems: MapLevel[] = [ + { + name: "Outside", + description: "Scena plenerowa, gastronomia, atrakcje", + icon: , + image: { + src: "/hala-stulecia-zewnatrz.png", + alt: "Hala Stulecia Widok Satelitarny", + }, + nodes: [ + { + name: "Strefa Wyłączona", + color: "#CD2E32", + }, + { + name: "Scena Plenerowa", + color: "#D2CBA3", + }, + { + name: "Zaplecze Techniczne", + color: "#5F6EB6", + }, + { + name: "Gastro", + color: "#BBE880", + }, + { + name: "Partnerzy/Atrakcje", + color: "#CB6BA9", + }, + ], + }, + { + name: "Ground Floor", + description: "Trybuna A, strefa dla gości", + icon:
1
, + image: { + src: "/hala-stulecia-poziom-0.png", + alt: "Hala Stulecia Parter", + }, + nodes: [ + { + name: "Coś ciekawego", + color: "#CD7E32", + }, + { + name: "Coś ciekawszego", + color: "#32CBA3", + }, + { + name: "Coś jeszcze ciekawszego", + color: "#5F6EB6", + }, + { + name: "Coś najciekawszego", + color: "#BBE880", + }, + ], + }, + { + name: "Floor 1", + description: "Strefa atrakcji, backstage", + icon:
0
, + image: { + src: "/hala-stulecia-poziom-1.png", + alt: "Hala Stulecia Piętro 1", + }, + nodes: [ + { + name: "Coś ciekawego 1", + color: "#CD7E32", + }, + { + name: "Coś ciekawszego 1", + color: "#32CBA3", + }, + { + name: "Coś jeszcze ciekawszego 1", + color: "#5F6EB6", + }, + { + name: "Coś najciekawszego 1", + color: "#BBE880", + }, + ], + }, + { + name: "Floor -1", + description: "Scena techno, gastronomia, strefa partnera", + icon:
-1
, + image: { + src: "/hala-stulecia-piwnica.png", + alt: "Hala Stulecia Piętro -1", + }, + nodes: [ + { + name: "Coś ciekawego 2", + color: "#CD7E32", + }, + { + name: "Coś ciekawszego 2", + color: "#32CBA3", + }, + { + name: "Coś jeszcze ciekawszego 2", + color: "#5F6EB6", + }, + { + name: "Coś najciekawszego 2", + color: "#BBE880", + }, + ], + }, +]; diff --git a/src/lib/types.ts b/src/lib/types.ts index 82080f5..559e660 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -112,3 +112,31 @@ export interface Person { image?: string; } // #endregion + +export type MapView = "Outside" | "Ground Floor" | "Floor 1" | "Floor -1"; + +export interface MapLevel { + name: MapView; + description: string; + icon: React.ReactNode; + image: { + src: string; + alt: string; + }; + nodes: { + name: string; + color: string; + }[]; +} + +export interface StaticLegendProps { + items: MapLevel[]; + activeView: MapView; + className?: string; +} + +export interface MapFloorsButtonProps { + level: MapLevel; + active: boolean; + onClick: () => void; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index e73cb5e..196a5ce 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -76,13 +76,35 @@ export default { }, keyframes: { "bouncy-arrow-reveal": { - "0%": { transform: "scale3d(0,0,1) rotate(45deg)" }, - "100%": { transform: "scaleX(1) rotate(0deg)" }, + "0%": { + transform: "scale3d(0,0,1) rotate(45deg)", + }, + "100%": { + transform: "scaleX(1) rotate(0deg)", + }, + }, + "accordion-down": { + from: { + height: "0", + }, + to: { + height: "var(--radix-accordion-content-height)", + }, + }, + "accordion-up": { + from: { + height: "var(--radix-accordion-content-height)", + }, + to: { + height: "0", + }, }, }, animation: { "reveal-arrow": "bouncy-arrow-reveal 0.17s cubic-bezier(.2, 1.2, .3, 1.4) forwards", + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", }, }, },