add about modal

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.18",
     "@chakra-ui/react": "^2.5.5",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",

src/components/Controls.tsx

@@ -1,35 +1,117 @@
-import { Card, Heading, Radio, RadioGroup, Stack } from '@chakra-ui/react';
+import {
+  Button,
+  Card,
+  Heading,
+  Link,
+  ListItem,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Radio,
+  RadioGroup,
+  Stack,
+  Stat,
+  StatHelpText,
+  StatLabel,
+  StatNumber,
+  UnorderedList,
+  useDisclosure,
+} from '@chakra-ui/react';
 import { type FC } from 'react';
 import { useData } from './DataProvider';
 import { useAppState } from './StateManager';
+import { InfoIcon } from '@chakra-ui/icons';
 
 export const Controls: FC = () => {
   const data = useData();
   const [{ selectedView }, setAppState] = useAppState();
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
-    <Card p={7} m={5} bg={'gray.200'}>
-      <Stack align={'center'}>
-        <Heading textAlign={'center'} fontSize={'lg'}>
-          Wybierz widok
-        </Heading>
-        <RadioGroup value={selectedView.toString()}>
-          <Stack>
-            {data?.mapViews.map(({ name }, i) => (
-              <Radio
-                onChange={() => {
-                  setAppState((p) => ({ ...p, selectedView: i }));
-                }}
-                bg={'white'}
-                key={i}
-                value={`${i}`}
-              >
-                {name}
-              </Radio>
-            ))}
-          </Stack>
-        </RadioGroup>
-      </Stack>
-    </Card>
+    <>
+      <Card p={7} m={5} bg={'gray.200'}>
+        <Stack align={'center'}>
+          <Heading textAlign={'center'} fontSize={'lg'}>
+            Wybierz widok
+          </Heading>
+          <RadioGroup value={selectedView.toString()}>
+            <Stack>
+              {data?.mapViews.map(({ name }, i) => (
+                <Radio
+                  onChange={() => {
+                    setAppState((p) => ({ ...p, selectedView: i }));
+                  }}
+                  bg={'white'}
+                  key={i}
+                  value={`${i}`}
+                >
+                  {name}
+                </Radio>
+              ))}
+            </Stack>
+          </RadioGroup>
+          <Button onClick={onOpen} leftIcon={<InfoIcon />}>
+            O projekcie
+          </Button>
+        </Stack>
+      </Card>
+
+      <Modal isOpen={isOpen} onClose={onClose} closeOnEsc closeOnOverlayClick>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>O projekcie</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Stack gap={1} marginBottom={5}>
+              <Heading fontSize={'lg'}>Twórcy strony</Heading>
+              <Stat>
+                <StatLabel>Tworzenie strony i przetwarzanie danych</StatLabel>
+                <StatNumber>Marcin Macierzanka</StatNumber>
+                <StatHelpText>4aSP</StatHelpText>
+              </Stat>
+              <Stat>
+                <StatLabel>Zbieranie i zestawianie statystyk</StatLabel>
+                <StatNumber>Bartosz Hospodura</StatNumber>
+                <StatHelpText>4aSP</StatHelpText>
+              </Stat>
+              <Heading fontSize={'lg'}>Źródła danych</Heading>
+              <UnorderedList listStylePosition={'inside'}>
+                <ListItem>
+                  <Link target='_blank' href='https://pl.wikipedia.org'>
+                    Wikipedia
+                  </Link>
+                </ListItem>
+                <ListItem>
+                  <Link target='_blank' href='https://eregion.wzp.pl'>
+                    Pomorze Zachodnie - eRegion
+                  </Link>
+                </ListItem>
+                <ListItem>
+                  <Link target='_blank' href='https://stat.gov.pl/'>
+                    Główny Urząd Statystyczny
+                  </Link>
+                </ListItem>
+                <ListItem>
+                  <Link target='_blank' href='https://zpe.gov.pl'>
+                    Zintegrowana Platforma Edukacyjna
+                  </Link>
+                </ListItem>
+                <ListItem>
+                  <Link
+                    target='_blank'
+                    href='https://www.nowaera.pl/oblicza-geografii-3-podrecznik-dla-liceum-ogolnoksztalcacego-i-technikum-zakres-podstawowy,sku-067022'
+                  >
+                    {`Podręcznik "Oblicza Geografii 3" (wydawnictwo "Nowa Era")`}
+                  </Link>
+                </ListItem>
+              </UnorderedList>
+            </Stack>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };

yarn.lock

@@ -415,6 +415,13 @@
   dependencies:
     "@chakra-ui/shared-utils" "2.0.5"
 
+"@chakra-ui/icons@^2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.18.tgz#6f859d2e0d8f31fea9cb2e6507d65eb65cb95cf5"
+  integrity sha512-E/+DF/jw7kdN4/XxCZRnr4FdMXhkl50Q34MVwN9rADWMwPK9uSZPGyC7HOx6rilo7q4bFjYDH3yRj9g+VfbVkg==
+  dependencies:
+    "@chakra-ui/icon" "3.0.16"
+
 "@chakra-ui/image@2.0.15":
   version "2.0.15"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.15.tgz#7f275f8f3edbb420e0613afd5023ad9cf442d09d"