From a43c72fd9e7d4cedea9163a94781e45dbf97f610 Mon Sep 17 00:00:00 2001 From: KartoffelChips Date: Sat, 26 Oct 2024 17:53:08 +0200 Subject: [PATCH] added legend filters --- src/components/common/LegendCheckbox.scss | 31 ++++++++++++++ src/components/common/LegendCheckbox.tsx | 35 ++++++++++++++++ src/components/icons/CityIcon.tsx | 17 ++++++++ src/components/icons/StarIcon.tsx | 17 ++++++++ src/components/layout/Legend.scss | 24 +++++++++++ src/components/layout/Legend.tsx | 51 ++++++++++++++++++++++- src/pages/Main.tsx | 24 +++++++++-- 7 files changed, 193 insertions(+), 6 deletions(-) create mode 100644 src/components/common/LegendCheckbox.scss create mode 100644 src/components/common/LegendCheckbox.tsx create mode 100644 src/components/icons/CityIcon.tsx create mode 100644 src/components/icons/StarIcon.tsx diff --git a/src/components/common/LegendCheckbox.scss b/src/components/common/LegendCheckbox.scss new file mode 100644 index 0000000..23429fc --- /dev/null +++ b/src/components/common/LegendCheckbox.scss @@ -0,0 +1,31 @@ +.checkbox { + display: flex; + align-items: center; + gap: 10px; + + cursor: pointer; + filter: brightness(0.8); + + &.checked { + filter: brightness(1); + } + + span { + color: white; + font-size: 1.1rem; + } + + img,svg { + display: flex; + align-items: center; + justify-content: center; + --hw: 27px; + height: var(--hw); + width: var(--hw); + min-width: var(--hw); + } + + input { + //display: none; + } +} \ No newline at end of file diff --git a/src/components/common/LegendCheckbox.tsx b/src/components/common/LegendCheckbox.tsx new file mode 100644 index 0000000..62896b1 --- /dev/null +++ b/src/components/common/LegendCheckbox.tsx @@ -0,0 +1,35 @@ +import React, { useEffect, useState } from "react"; +import "./LegendCheckbox.scss"; + +interface LegendCheckboxProps { + label: string; + icon: JSX.Element; + onUpdated?: (checked: boolean) => void; + checked?: boolean; +} + +const LegendCheckbox: React.FC = ({ label, icon, onUpdated, checked }) => { + const [isChecked, setIsChecked] = useState(checked || false); + + useEffect(() => { + if (checked !== undefined) { + setIsChecked(checked); + } + }, [checked]); + + const handleCheckboxChange: React.ChangeEventHandler = (e) => { + const isChecked = e.target.checked; + setIsChecked(isChecked); + if (onUpdated) onUpdated(isChecked); + }; + + return ( + + ); +} + +export default LegendCheckbox; \ No newline at end of file diff --git a/src/components/icons/CityIcon.tsx b/src/components/icons/CityIcon.tsx new file mode 100644 index 0000000..66492f5 --- /dev/null +++ b/src/components/icons/CityIcon.tsx @@ -0,0 +1,17 @@ +const CityIcon = () => ( + + + + + + + +); + +export default CityIcon; \ No newline at end of file diff --git a/src/components/icons/StarIcon.tsx b/src/components/icons/StarIcon.tsx new file mode 100644 index 0000000..43fcd03 --- /dev/null +++ b/src/components/icons/StarIcon.tsx @@ -0,0 +1,17 @@ +const StarIcon = () => ( + + + + + + + +); + +export default StarIcon; \ No newline at end of file diff --git a/src/components/layout/Legend.scss b/src/components/layout/Legend.scss index 1407d21..f10c374 100644 --- a/src/components/layout/Legend.scss +++ b/src/components/layout/Legend.scss @@ -16,9 +16,33 @@ } } + h2 { + font-size: 1.8rem; + font-weight: 700; + margin-bottom: 15px; + margin-top: 20px; + color: white; + width: fit-content; + + border-bottom: 1px solid #a8a8a8; + + @media (max-width: 768px) { + font-size: 1rem; + } + } + .border { width: 100%; height: 1px; background-color: #d78453; + margin-bottom: 20px; + } + + .form { + display: flex; + flex-direction: column; + gap: 15px; + + padding-left: 7px; } } \ No newline at end of file diff --git a/src/components/layout/Legend.tsx b/src/components/layout/Legend.tsx index 777b0de..360688f 100644 --- a/src/components/layout/Legend.tsx +++ b/src/components/layout/Legend.tsx @@ -1,13 +1,60 @@ +import React from "react"; import "./Legend.scss"; +import CityIcon from "../icons/CityIcon.tsx"; +import StarIcon from "../icons/StarIcon.tsx"; +import LegendCheckbox from "../common/LegendCheckbox.tsx"; +import CapitalIcon from "../icons/CapitalIcon.tsx"; -const Legend = () => { +interface LegendProps { + showCapitals: boolean; + showSettlements: boolean; + showPOIs: boolean; + onUpdated: (showCapitals: boolean, showSettlements: boolean, showPOIs: boolean) => void; +} + +const Legend: React.FC = ({ showCapitals, showSettlements, showPOIs, onUpdated }) => { + const onCheckboxUpdate = (type: "capitals" | "settlements" | "pois", checked: boolean) => { + onUpdated( + type === "capitals" ? checked : showCapitals, + type === "settlements" ? checked : showSettlements, + type === "pois" ? checked : showPOIs + ); + }; return (

Interactive Map of the Magic Continent

+ +

Filters

+ +
+ } + checked={showCapitals} + onUpdated={(checked) => onCheckboxUpdate("capitals", checked)} + /> + + } + checked={showSettlements} + onUpdated={(checked) => onCheckboxUpdate("settlements", checked)} + /> + + } + checked={showPOIs} + onUpdated={(checked) => onCheckboxUpdate("pois", checked)} + /> +
- ) + ); } export default Legend; \ No newline at end of file diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 0b4bde0..c18e2fc 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -4,18 +4,34 @@ import nations from "../data/nations.ts"; import cities from "../data/cities.ts"; import capitals from "../data/capitals.ts"; import pois from "../data/pois.ts"; +import {useState} from "react"; const Main = () => { + const [showCapitals, setShowCapitals] = useState(true); + const [showSettlements, setShowSettlements] = useState(true); + const [showPOIs, setShowPOIs] = useState(true); + + const onUpdated = (showCapitals: boolean, showSettlements: boolean, showPOIs: boolean) => { + setShowCapitals(showCapitals); + setShowSettlements(showSettlements); + setShowPOIs(showPOIs); + }; + return ( <> + - ); }