src/components/Sidebar/ListElement.tsx

+import React, { SyntheticEvent } from 'react';
+import type { PointOfInterest } from 'src/types/PointOfInterest';
+
+interface Props {
+  value: PointOfInterest;
+  hovered?: boolean;
+  onMouseEnter: (event: SyntheticEvent) => void;
+  onMouseLeave: (event: SyntheticEvent) => void;
+  onClick: (event: SyntheticEvent) => void;
+}
+
+const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
+  return (
+    value && (
+      <div
+        {...restProps}
+        className={`border-2 border-black border-opacity-20 ${
+          hovered ? 'border-opacity-40' : 'hover:border-opacity-40'
+        } cursor-pointer rounded-lg mx-4 my-2`}
+      >
+        <div className="p-3">
+          <h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">
+            {value.category}
+          </h2>
+          <h1 className="title-font text-lg font-medium text-gray-900">{value.name}</h1>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default ListElement;

src/components/Sidebar/SidebarContainer.tsx

+import React from 'react';
+
+interface Props {
+  className?: string;
+}
+
+const SidebarContainer: React.FC<Props> = ({ className, children }) => {
+  return (
+    <aside
+      className={`sidebar box-border flex flex-col shadow-2xl border-t-2 md:border-r-2 md:border-t-0 border-black border-opacity-20 ${
+        className ?? ''
+      }`}
+    >
+      {children}
+    </aside>
+  );
+};
+
+export default SidebarContainer;

src/components/Sidebar/SidebarCreateView.tsx

+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import AddPoiForm from '../Form/AddPoiForm';
+import CloseButton from './CloseButton';
+import SidebarContainer from './SidebarContainer';
+
+const SidebarCreateView: React.FC = () => {
+  const history = useHistory();
+  return (
+    <SidebarContainer className="p-5">
+      <CloseButton onClick={() => history.push('/')} />
+      <h1 className="text-xl font-medium title-font text-gray-900 mt-2 mb-4">Neuen Ort anlegen:</h1>
+      <AddPoiForm />
+    </SidebarContainer>
+  );
+};
+
+export default SidebarCreateView;

src/components/Sidebar/SidebarListView.tsx

+import React, { useState } from 'react';
+import { usePoiData, useStore } from '../../hooks';
+import ListElement from './ListElement';
+import SidebarContainer from './SidebarContainer';
+import { removeDuplicateObjects } from '../../util/array';
+import { useFilteredPoiData } from '../../hooks/useFilteredPoiData';
+import type { Tag } from '../../types/PointOfInterest';
+import { FilterOutline as FilterIcon } from 'heroicons-react';
+import { useHistory } from 'react-router-dom';
+import Select from '../Select';
+
+const SidebarListView: React.FC = () => {
+  const tagsToSelectOptions = (tags?: Tag[]) => tags?.map((tag) => ({ label: tag.displayName, value: tag }));
+  const history = useHistory();
+
+  const { data } = usePoiData();
+  const { data: filteredData, filterTags, setFilterTags } = useFilteredPoiData();
+  const hoveredPoi = useStore((state) => state.hoveredPoi);
+  const setHoveredPoi = useStore((state) => state.setHoveredPoi);
+  const [filterInputIsOpen, setFilterInputIsOpen] = useState(false);
+
+  const tags =
+    data &&
+    removeDuplicateObjects(
+      data?.flatMap((poi) => poi.tags),
+      'id',
+    );
+  const options = tagsToSelectOptions(tags);
+
+  return (
+    <SidebarContainer>
+      <div className="flex-col m-4 mb-2 pb-2 border-black border-opacity-20 border-b-2">
+        <div className="flex justify-between items-center">
+          <h1 className="text-xl font-medium title-font text-gray-900">{filteredData?.length} Orte:</h1>
+          <FilterIcon
+            onClick={() => setFilterInputIsOpen(!filterInputIsOpen)}
+            className="text-black text-opacity-20 hover:text-opacity-60 w-5 h-5 cursor-pointer"
+          />
+        </div>
+
+        {filterInputIsOpen && (
+          <div className="py-2">
+            <Select
+              options={options}
+              isMulti={true}
+              value={filterTags && tagsToSelectOptions(filterTags)}
+              onChange={(selectedOptions) => setFilterTags(selectedOptions.map((opt) => opt.value))}
+            />
+          </div>
+        )}
+      </div>
+
+      {filteredData?.map((poi) => (
+        <ListElement
+          key={poi.id}
+          onMouseEnter={() => setHoveredPoi(poi)}
+          onMouseLeave={() => setHoveredPoi(null)}
+          onClick={() => {
+            history.push(`/poi/${String(poi.id)}`);
+          }}
+          value={poi}
+          hovered={hoveredPoi?.id === poi.id}
+        />
+      ))}
+    </SidebarContainer>
+  );
+};
+
+export default SidebarListView;

src/components/Sidebar/SidebarSingleView.tsx

+import {
+  HomeOutline as HomeIcon,
+  LocationMarkerOutline as AddressIcon,
+  UserGroupOutline as RealtionStatusIcon,
+} from 'heroicons-react';
+import React from 'react';
+import { useStore } from '../../hooks';
+import SidebarContainer from './SidebarContainer';
+import Tag from '../Tag';
+import CloseButton from './CloseButton';
+import { useHistory } from 'react-router-dom';
+
+const SidebarSingleView: React.FC = () => {
+  const selectedPoi = useStore((state) => state.selectedPoi);
+  const strippedUrl = selectedPoi?.website?.replace(/(^\w+:|^)\/\//, '');
+  const history = useHistory();
+
+  return (
+    <SidebarContainer className={`relative p-0`}>
+      <div className={`${selectedPoi?.image ? '' : 'pl-5 pt-5 '}`}>
+        <CloseButton
+          absolute
+          onClick={() => {
+            history.push('/');
+          }}
+        />
+      </div>
+      {selectedPoi?.image && (
+        <img
+          className="lg:h-48 md:h-36 w-full object-cover object-center"
+          src={selectedPoi?.image}
+          alt={selectedPoi?.name}
+        />
+      )}
+      <div className="p-6">
+        <h2 className="tracking-widest uppercase text-xs title-font font-medium text-gray-400 mb-1">
+          {selectedPoi?.category}
+        </h2>
+        <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{selectedPoi?.name}</h1>
+        <p className="leading-relaxed mb-6">{selectedPoi?.description}</p>
+        {selectedPoi?.website && (
+          <div className={'flex items-center'}>
+            <HomeIcon size={18} className={'text-gray-500 mr-2'} />
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              className={'text-sm text-gray-500 hover:underline'}
+              href={selectedPoi?.website}
+            >
+              {strippedUrl}
+            </a>
+          </div>
+        )}
+        {selectedPoi?.address && (
+          <div className={'flex items-center mt-3'}>
+            <AddressIcon size={18} className={'text-gray-500 mr-2'} />
+            <div className="text-sm text-gray-500">{selectedPoi?.address}</div>
+          </div>
+        )}
+        {selectedPoi?.relationStatus && (
+          <div className={'flex items-center mt-3'}>
+            <RealtionStatusIcon size={18} className={'text-gray-500 mr-2'} />
+            <div className="text-sm text-gray-500">{selectedPoi?.relationStatus}</div>
+          </div>
+        )}
+        {!!selectedPoi?.tags?.length && (
+          <div className={'flex items-center mt-3 flex-wrap'}>
+            {selectedPoi?.tags.map((tag) => (
+              <Tag key={tag.id} color={tag.color}>
+                {tag.displayName}
+              </Tag>
+            ))}
+          </div>
+        )}
+      </div>
+    </SidebarContainer>
+  );
+};
+
+export default SidebarSingleView;

src/components/Spinner.tsx

+import React from 'react';
+
+const Spinner: React.FC = () => {
+  return (
+    <svg
+      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+};
+
+export default Spinner;

src/components/SwrWrapper.tsx

+import React from 'react';
+import { SWRConfig } from 'swr';
+import { useStore } from '../hooks';
+import fetcher from '../util/fetcher';
+
+const SwrWrapper: React.FC = ({ children }) => {
+  const setError = useStore((state) => state.setError);
+  const error = useStore((state) => state.error);
+  return (
+    <SWRConfig
+      value={{
+        fetcher,
+        onError: (error) => {
+          setError({
+            title: 'API nicht erreichbar',
+            message: 'Kann die API nicht erreichen. Bitte später erneut probieren.',
+            icon: 'alert',
+          });
+          console.error('Error while fetching', error);
+        },
+        onSuccess: () => {
+          // Reset error modal
+          if (error) setError(null);
+        },
+      }}
+    >
+      {children}
+    </SWRConfig>
+  );
+};
+
+export default SwrWrapper;

src/components/Tag.tsx

+import React from 'react';
+import { X as CloseIcon } from 'heroicons-react';
+
+interface Props {
+  children: string | JSX.Element;
+  color?: string;
+  onClick?: () => void;
+  onClickDelete?: () => void;
+}
+
+const Tag: React.FC<Props> = ({ children, onClick, onClickDelete, color = 'pink' }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={`${
+        onClick ? 'cursor-pointer ' : ''
+      }inline-flex flex-nowrap items-center px-2 py-0.5 m-0.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 mr-2 whitespace-nowrap`}
+      style={color ? { backgroundColor: color } : {}}
+    >
+      {children}
+      {onClickDelete && (
+        <CloseIcon
+          onClick={onClickDelete}
+          className="ml-0.5 inline-block cursor-pointer text-gray-600 hover:text-gray-800"
+          size={12}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Tag;

src/generated/graphql.ts

+import type { GraphQLClient } from 'graphql-request';
+import type * as Dom from 'graphql-request/dist/types.dom';
+import gql from 'graphql-tag';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  /** A date string with format `Y-m-d`, e.g. `2011-05-23`. */
+  Date: any;
+  /** A datetime string with format `Y-m-d H:i:s`, e.g. `2018-05-23 13:43:32`. */
+  DateTime: any;
+  /** Can be used as an argument to upload files using https://github.com/jaydenseric/graphql-multipart-request-spec */
+  Upload: any;
+};
+
+
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  createPoi?: Maybe<Scalars['Boolean']>;
+  createTags?: Maybe<Array<Maybe<Tag>>>;
+};
+
+
+export type MutationCreatePoiArgs = {
+  poi: PoiInput;
+};
+
+
+export type MutationCreateTagsArgs = {
+  tags: Array<TagInput>;
+};
+
+export type Poi = {
+  __typename?: 'POI';
+  id: Scalars['ID'];
+  lat: Scalars['Float'];
+  lng: Scalars['Float'];
+  name: Scalars['String'];
+  published: Scalars['Boolean'];
+  website?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+  address: Scalars['String'];
+  image: Scalars['String'];
+  category: Scalars['String'];
+  relationStatus: Scalars['String'];
+  tags?: Maybe<Array<Maybe<Tag>>>;
+  created_at?: Maybe<Scalars['DateTime']>;
+  updated_at?: Maybe<Scalars['DateTime']>;
+};
+
+export type PoiInput = {
+  name: Scalars['String'];
+  email: Scalars['String'];
+  lat: Scalars['Float'];
+  lng: Scalars['Float'];
+  website?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+  address: Scalars['String'];
+  category: Scalars['String'];
+  relationStatus: Scalars['String'];
+  image: Scalars['Upload'];
+  tagIds?: Maybe<Array<Maybe<Scalars['ID']>>>;
+};
+
+/** Pagination information about the corresponding list of items. */
+export type PageInfo = {
+  __typename?: 'PageInfo';
+  /** When paginating forwards, are there more items? */
+  hasNextPage: Scalars['Boolean'];
+  /** When paginating backwards, are there more items? */
+  hasPreviousPage: Scalars['Boolean'];
+  /** When paginating backwards, the cursor to continue. */
+  startCursor?: Maybe<Scalars['String']>;
+  /** When paginating forwards, the cursor to continue. */
+  endCursor?: Maybe<Scalars['String']>;
+  /** Total number of node in connection. */
+  total?: Maybe<Scalars['Int']>;
+  /** Count of nodes in current request. */
+  count?: Maybe<Scalars['Int']>;
+  /** Current page of request. */
+  currentPage?: Maybe<Scalars['Int']>;
+  /** Last page in connection. */
+  lastPage?: Maybe<Scalars['Int']>;
+};
+
+/** Pagination information about the corresponding list of items. */
+export type PaginatorInfo = {
+  __typename?: 'PaginatorInfo';
+  /** Total count of available items in the page. */
+  count: Scalars['Int'];
+  /** Current pagination page. */
+  currentPage: Scalars['Int'];
+  /** Index of first item in the current page. */
+  firstItem?: Maybe<Scalars['Int']>;
+  /** If collection has more pages. */
+  hasMorePages: Scalars['Boolean'];
+  /** Index of last item in the current page. */
+  lastItem?: Maybe<Scalars['Int']>;
+  /** Last page number of the collection. */
+  lastPage: Scalars['Int'];
+  /** Number of items per page in the collection. */
+  perPage: Scalars['Int'];
+  /** Total items available in the collection. */
+  total: Scalars['Int'];
+};
+
+export type Query = {
+  __typename?: 'Query';
+  pois?: Maybe<Array<Maybe<Poi>>>;
+  poi?: Maybe<Poi>;
+};
+
+
+export type QueryPoiArgs = {
+  id?: Maybe<Scalars['ID']>;
+};
+
+export type Tag = {
+  __typename?: 'Tag';
+  id: Scalars['ID'];
+  displayName: Scalars['String'];
+  color: Scalars['String'];
+  created_at?: Maybe<Scalars['DateTime']>;
+  updated_at?: Maybe<Scalars['DateTime']>;
+};
+
+export type TagInput = {
+  displayName: Scalars['String'];
+  color: Scalars['String'];
+};
+
+
+export type User = {
+  __typename?: 'User';
+  id: Scalars['ID'];
+  name: Scalars['String'];
+  email: Scalars['String'];
+  created_at: Scalars['DateTime'];
+  updated_at: Scalars['DateTime'];
+};
+
+export type CreatePoiMutationMutationVariables = Exact<{
+  name: Scalars['String'];
+  email: Scalars['String'];
+  lat: Scalars['Float'];
+  lng: Scalars['Float'];
+  website?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+  address: Scalars['String'];
+  category: Scalars['String'];
+  relationStatus: Scalars['String'];
+  image: Scalars['Upload'];
+  tagIds?: Maybe<Array<Maybe<Scalars['ID']>> | Maybe<Scalars['ID']>>;
+}>;
+
+
+export type CreatePoiMutationMutation = (
+  { __typename?: 'Mutation' }
+  & Pick<Mutation, 'createPoi'>
+);
+
+export type CreateTagsMutationMutationVariables = Exact<{
+  tags: Array<TagInput> | TagInput;
+}>;
+
+
+export type CreateTagsMutationMutation = (
+  { __typename?: 'Mutation' }
+  & { createTags?: Maybe<Array<Maybe<(
+    { __typename?: 'Tag' }
+    & Pick<Tag, 'id'>
+  )>>> }
+);
+
+
+export const CreatePoiMutationDocument = gql`
+    mutation createPoiMutation($name: String!, $email: String!, $lat: Float!, $lng: Float!, $website: String, $description: String, $address: String!, $category: String!, $relationStatus: String!, $image: Upload!, $tagIds: [ID]) {
+  createPoi(
+    poi: {name: $name, email: $email, lat: $lat, lng: $lng, website: $website, description: $description, address: $address, category: $category, relationStatus: $relationStatus, image: $image, tagIds: $tagIds}
+  )
+}
+    `;
+export const CreateTagsMutationDocument = gql`
+    mutation createTagsMutation($tags: [TagInput!]!) {
+  createTags(tags: $tags) {
+    id
+  }
+}
+    `;
+
+export type SdkFunctionWrapper = <T>(action: (requestHeaders?:Record<string, string>) => Promise<T>, operationName: string) => Promise<T>;
+
+
+const defaultWrapper: SdkFunctionWrapper = (action, _operationName) => action();
+
+export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
+  return {
+    createPoiMutation(variables: CreatePoiMutationMutationVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<CreatePoiMutationMutation> {
+      return withWrapper((wrappedRequestHeaders) => client.request<CreatePoiMutationMutation>(CreatePoiMutationDocument, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'createPoiMutation');
+    },
+    createTagsMutation(variables: CreateTagsMutationMutationVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<CreateTagsMutationMutation> {
+      return withWrapper((wrappedRequestHeaders) => client.request<CreateTagsMutationMutation>(CreateTagsMutationDocument, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'createTagsMutation');
+    }
+  };
+}
+export type Sdk = ReturnType<typeof getSdk>;
\ No newline at end of file

src/graphql/mutations.ts

+import { gql } from 'graphql-request';
+
+export const createPoi = gql`
+  mutation createPoiMutation(
+    $name: String!
+    $email: String!
+    $lat: Float!
+    $lng: Float!
+    $website: String
+    $description: String
+    $address: String!
+    $category: String!
+    $relationStatus: String!
+    $image: Upload!
+    $tagIds: [ID]
+  ) {
+    createPoi(
+      poi: {
+        name: $name
+        email: $email
+        lat: $lat
+        lng: $lng
+        website: $website
+        description: $description
+        address: $address
+        category: $category
+        relationStatus: $relationStatus
+        image: $image
+        tagIds: $tagIds
+      }
+    )
+  }
+`;
+
+export const createTags = gql`
+  mutation createTagsMutation($tags: [TagInput!]!) {
+    createTags(tags: $tags) {
+      id
+    }
+  }
+`;

src/hooks/index.ts

+export * from './usePoiData';
+export * from './useStore';

src/hooks/useFilteredPoiData.ts

+import type { poiData } from './usePoiData';
+import { usePoiData } from './usePoiData';
+import { useStore } from './useStore';
+import type { Tag } from '../types/PointOfInterest';
+
+export interface poiFilteredData extends poiData {
+  filterTags: Tag[] | null;
+  setFilterTags: (tags: Tag[]) => void;
+  filterCategories: string[];
+  setFilterCategories: (categories: string[]) => void;
+}
+
+export const useFilteredPoiData = (): poiFilteredData => {
+  const { data } = usePoiData();
+  const filterTags = useStore((store) => store.filterTags);
+  const setFilterTags = useStore((state) => state.setFilterTags);
+  const filterCategories = useStore((store) => store.filterCategories);
+  const setFilterCategories = useStore((state) => state.setFilterCategories);
+
+  let filteredData = data;
+  if (filterTags?.length) {
+    filteredData = filteredData?.filter(
+      (poi) => !filterTags.filter((fTag) => !poi.tags.find((tag) => tag.id === fTag.id)).length,
+    );
+  }
+  if (filterCategories?.length) {
+    filteredData = filteredData?.filter((poi) => !!filterCategories.find((category) => poi.category === category));
+  }
+
+  return {
+    data: filteredData,
+    filterTags,
+    setFilterTags,
+    filterCategories,
+    setFilterCategories,
+  };
+};

src/hooks/usePoiData.ts

+import type { PointOfInterest, PointsOfInterestDTO } from 'src/types/PointOfInterest';
+import useSWR from 'swr';
+
+export interface poiData {
+  data: PointOfInterest[] | undefined;
+}
+
+export const usePoiData = (): poiData => {
+  const { data } = useSWR<PointsOfInterestDTO>(
+    `{
+      pois {
+        id
+        name
+        description
+        website
+        address
+        lat
+        lng
+        image
+        category
+        relationStatus
+        tags {
+          id
+          displayName
+          displayName
+          color
+        }
+      }
+    }
+    `,
+  );
+
+  return { data: data?.pois };
+};

src/hooks/useStore.ts

+import type { Error } from 'src/types/Error';
+import type { PointOfInterest, Tag } from 'src/types/PointOfInterest';
+import type { Notification } from 'src/types/Notification';
+import type { LatLngTuple } from 'leaflet';
+import create, { State } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+interface Store extends State {
+  selectedPoi: PointOfInterest | null;
+  setSelectedPoi: (poi: PointOfInterest | null) => void;
+  hoveredPoi: PointOfInterest | null;
+  setHoveredPoi: (poi: PointOfInterest | null) => void;
+  error: Error | null;
+  setError: (error: Error | null) => void;
+  draftPoi: LatLngTuple | null;
+  setDraftPoi: (latLng: LatLngTuple | null) => void;
+  notification: Notification | null;
+  setNotification: (notification: Notification | null) => void;
+  filterTags: Tag[];
+  setFilterTags: (tags: Tag[]) => void;
+  filterCategories: string[];
+  setFilterCategories: (categories: string[]) => void;
+}
+
+// const log = (config: StateCreator<Store>) => (set: SetState<Store>, get: GetState<Store>, api: StoreApi<Store>) =>
+//   config(
+//     (args) => {
+//       console.group('Global state changed');
+//       console.log('%cAction:', 'color: #00A7F7; font-weight: 700;', args);
+//       set(args);
+//       console.log('%cNext State:', 'color: #47B04B; font-weight: 700;', get());
+//       console.groupEnd();
+//     },
+//     get,
+//     api,
+//   );
+
+export const useStore = create<Store>(
+  devtools((set) => ({
+    selectedPoi: null,
+    setSelectedPoi: (poi) => {
+      set({
+        selectedPoi: poi,
+      });
+    },
+    hoveredPoi: null,
+    setHoveredPoi: (poi) => {
+      set({
+        hoveredPoi: poi,
+      });
+    },
+    error: null,
+    setError: (error) => {
+      set({ error });
+    },
+    draftPoi: null,
+    setDraftPoi: (latLng) => {
+      set({
+        draftPoi: latLng,
+      });
+    },
+    notification: null,
+    setNotification: (notification) => {
+      set({ notification });
+    },
+    filterTags: [],
+    setFilterTags: (tags) => {
+      set({ filterTags: tags });
+    },
+    filterCategories: [],
+    setFilterCategories: (categories) => {
+      set({ filterCategories: categories });
+    },
+  })),
+);

src/index.css

@@ -2,16 +2,77 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --fabcity-red: #ee2f45;
+  --fabcity-green: #08aa64;
+  --fabcity-blue: #19459c;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
\ No newline at end of file
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.marker-red {
+  color: var(--fabcity-red);
+}
+
+.marker-green {
+  color: var(--fabcity-green);
+}
+
+.marker-blue {
+  color: var(--fabcity-blue);
+}
+
+.sidebar {
+  flex-basis: 40%;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.leaflet-control-container {
+  display: none;
+}
+
+@screen md {
+  .sidebar {
+    flex-basis: 30vw;
+    min-width: 300px;
+    max-width: 500px;
+    max-height: initial;
+  }
+
+  .leaflet-control-container {
+    display: initial;
+  }
+}
+
+.form-input-custom {
+  @apply mt-1 block w-full rounded-lg border-2 border-black border-opacity-20 hover:border-opacity-40 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
+}
+
+.form-label {
+  @apply leading-none text-sm text-gray-600;
+}
+
+.form-button {
+  @apply mt-2 flex justify-center items-center text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded-lg text-lg disabled:opacity-50 disabled:cursor-default disabled:hover:bg-indigo-500;
+}
+
+.input-chevron {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+}

src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import { BrowserRouter as Router } from 'react-router-dom';
+import App from './components/App';
+import SwrWrapper from './components/SwrWrapper';
 import './index.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <SwrWrapper>
+      <Router>
+        <App />
+      </Router>
+    </SwrWrapper>
   </React.StrictMode>,
   document.getElementById('root'),
 );

src/testData.json

-[
-  {
-    "id": 1,
-    "latlng": [53.550359, 9.986701],
-    "name": "Welcome Werkstatt e. V.",
-    "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.",
-    "address": "Bachstr. 98, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "website": "https://www.welcome-werkstatt.de/"
-  },
-  {
-    "id": 2,
-    "latlng": [53.560359, 9.976701],
-    "name": "Fabulous St. Pauli",
-    "description": "Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.",
-    "address": "Mozartstr. 8, 22081 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "website": "http://www.fablab-hamburg.org/"
-  },
-  {
-    "id": 3,
-    "latlng": [53.540359, 9.996701],
-    "name": "HoFaLab Wilhelmsburg",
-    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
-    "address": "Langer-Straßen-Name. 128, 22089 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "website": "https://hofalab.de/de/home-de/"
-  },
-  {
-    "id": 4,
-    "latlng": [53.550359, 9.986701],
-    "name": "Fab City Haus",
-    "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.",
-    "address": "Jungfernstieg 1, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT"
-  },
-  {
-    "id": 5,
-    "latlng": [53.530359, 9.966701],
-    "name": "Haus Drei e. V.",
-    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
-    "address": "Hein-Hoyer-Allee 36, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT"
-  }
-]

src/types/Error.ts

+export interface Error {
+  title: string;
+  message: string;
+  icon: string;
+}

src/types/Notification.ts

+export interface Notification {
+  title: string;
+  text: string;
+  type: 'alert' | 'success';
+}

src/types/PointOfInterest.ts

-import type { LatLngExpression } from 'leaflet';
-
-export interface PointOfInterest {
-  id: number;
-  latlng: LatLngExpression;
-  name: string;
-  description: string;
-  address: string;
-  category: string;
-  website?: string;
-}
-
-interface Map {
-  values: PointOfInterest[];
-  onSelect: (entry: PointOfInterest) => void;
-  selectedEntry: PointOfInterest;
-}
-
-interface Sidebar {
-  values: PointOfInterest[];
-  onSelect: (entry: PointOfInterest) => void;
-  selectedEntry: PointOfInterest;
-}
+export interface PointOfInterestBase {
+  lat: number;
+  lng: number;
+  name: string;
+  description: string;
+  address: string;
+  website: string;
+  category: string;
+  relationStatus: string;
+}
+export interface PointOfInterest extends PointOfInterestBase {
+  id: number;
+  image?: string;
+  tags: Tag[];
+}
+
+export interface PointOfInterestFormData extends PointOfInterestBase {
+  email: string;
+  image: File | null;
+  tags: number[];
+}
+
+export interface Tag {
+  id: string;
+  displayName: string;
+  color: string;
+}
+
+export interface PointsOfInterestDTO {
+  pois: PointOfInterest[];
+}