diff --git a/public/images/Infra/InfraOrto.jpg b/public/images/Infra/InfraOrto.jpg new file mode 100644 index 0000000..4983ba2 Binary files /dev/null and b/public/images/Infra/InfraOrto.jpg differ diff --git a/src/components/DistanceCircle.tsx b/src/components/DistanceCircle.tsx index 97f6776..8943950 100644 --- a/src/components/DistanceCircle.tsx +++ b/src/components/DistanceCircle.tsx @@ -5,10 +5,8 @@ interface DistanceCircleProps { const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => { return ( { fill="url(#paint0_radial_193_12559)" fillOpacity="0.6" stroke="white" - strokeWidth={(3 * 800) / selectedRange} + strokeWidth={(3 * 850) / selectedRange} /> >; + setFilteredMarks: React.Dispatch>; selectedRange: number; + marks: Mark[]; } const InfrastructureFilters = ({ setSelectedRange, + setFilteredMarks, selectedRange, + marks, }: IInfrastructureFiltersProps) => { const [filter, setFilter] = useState(""); function handleOnFilterClick( event: React.MouseEvent ): void { - const infrastructureId = event.currentTarget.dataset.set; - if (!infrastructureId) return; + const infrastructureFilter = event.currentTarget.dataset.set; + if (!infrastructureFilter) return; - setFilter(infrastructureId); + const filteredMarks = marks.filter( + (mark) => mark.icon === infrastructureFilter + ); + setFilteredMarks(filteredMarks); + setFilter(infrastructureFilter); } const handleOnInputRangeChange = ( event: React.ChangeEvent ) => setSelectedRange(Number(event.target.value)); - useEffect(() => { - const _distanceRange = (selectedRange - 150) / 50; - const filteredData = data.filter((d) => d.infrastructureId === filter && d.distanceStage === _distanceRange); - - console.log("filteredData", filteredData); - }, [filter]); - return ( <>
@@ -64,11 +42,11 @@ const InfrastructureFilters = ({
{environments.map((env) => (
+
+
+
+ +
+ +
+
); diff --git a/src/pages/InfrastructurePage.tsx b/src/pages/InfrastructurePage.tsx deleted file mode 100644 index b96fe0c..0000000 --- a/src/pages/InfrastructurePage.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useEffect, useState } from "react"; -import ImageMarker from "react-image-marker"; -import Button from "../components/Button"; -import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; -import CrossIcon from "../icons/CrossIcon"; -import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters"; -import Mark from "../components/Mark"; -import DistanceCircle from "../components/DistanceCircle"; - -const markers = [ - { - top: 40, - left: 40, - }, -]; - -function InfrastructurePage() { - const [selectedRange, setSelectedRange] = useState(800); - const [width, setWidth] = useState(); - const [top, setTop] = useState(); - - function handleResize() { - setWidth(window.innerWidth); - setTop(window.innerWidth / 2 - window.innerHeight / 2); - } - - useEffect(() => { - handleResize(); - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); - - return ( -
- {/*
*/} - {/* */} - {/* */} - {/*
*/} -
-
-
- -
- -
-
-
- {/* */} - -
- -
-
- -
-
- {/*
- - - - - - - - - - - - - -
- - */} -
- ); -} - -export default InfrastructurePage; diff --git a/src/types/Infrastructure.ts b/src/types/Infrastructure.ts index af4ad55..8221fbd 100644 --- a/src/types/Infrastructure.ts +++ b/src/types/Infrastructure.ts @@ -2,6 +2,7 @@ interface IInfrastructure { id: string; icon: React.ReactNode; label: string; + type: string; } export type { IInfrastructure }; diff --git a/src/types/Mark.ts b/src/types/Mark.ts new file mode 100644 index 0000000..15cb496 --- /dev/null +++ b/src/types/Mark.ts @@ -0,0 +1,10 @@ +interface Mark { + id: string; + icon: string; + x: number; + y: number; + width?: number; + heigth?: number; +} + +export type { Mark };