diff --git a/package-lock.json b/package-lock.json
index d2146a9d1e33426db12ead0084cc306d7c819024..045ed8555582c6a6ee453ad4f643aa2db915e8f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,14 +12,14 @@
"heroicons-react": "^1.4.1",
"react-map-gl": "^7.0.19",
"react-router-dom": "^5.2.0",
- "react-select": "^5.5.0",
+ "react-select": "^5.7.1",
"tailwindcss": "^3.1.8",
"usehooks-ts": "^2.9.1",
"zustand": "^4.1.2"
},
"devDependencies": {
"@carbon/icons-react": "^11.9.0",
- "@fchh/fcos-suite-ui": "^0.1.13",
+ "@fchh/fcos-suite-ui": "^0.1.14",
"@types/carbon__icons-react": "^11.15.0",
"@types/mapbox-gl": "^2.7.6",
"@types/react": "^18.0.21",
@@ -709,9 +709,9 @@
}
},
"node_modules/@fchh/fcos-suite-ui": {
- "version": "0.1.13",
- "resolved": "https://registry.npmjs.org/@fchh/fcos-suite-ui/-/fcos-suite-ui-0.1.13.tgz",
- "integrity": "sha512-Ln1+6kKcDBKRga4kU2NNfNuXtjC1adgUc89WJli3RIzOUZv9pOdzG52qogG2iFg2Q/ea36VCIsccIIxn9bBLAw==",
+ "version": "0.1.14",
+ "resolved": "https://registry.npmjs.org/@fchh/fcos-suite-ui/-/fcos-suite-ui-0.1.14.tgz",
+ "integrity": "sha512-npw+MRdDhFmu8lDJ47AqzXoYuDbRdblBqJV4PzN9reTLAuCej7AzlaeLdqBXVhsj2R2cMac/I9+vDZ7jftKBLQ==",
"dev": true
},
"node_modules/@floating-ui/core": {
@@ -4312,9 +4312,9 @@
}
},
"node_modules/react-select": {
- "version": "5.7.0",
- "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.0.tgz",
- "integrity": "sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==",
+ "version": "5.7.1",
+ "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.1.tgz",
+ "integrity": "sha512-u/brzm3B6vgI+PtxNyE4/18kXgaf6bn5sOAjKhaQ54EItBfW41SRLH1AJC5fefPnGM4JmMcM51t/HAVCi5GrpQ==",
"dependencies": {
"@babel/runtime": "^7.12.0",
"@emotion/cache": "^11.4.0",
diff --git a/package.json b/package.json
index 04685f038ab76d50aabad83e4df348538d3d6d26..6ba6639af744da61c4b224f501fbc77f0edade25 100644
--- a/package.json
+++ b/package.json
@@ -35,14 +35,14 @@
"heroicons-react": "^1.4.1",
"react-map-gl": "^7.0.19",
"react-router-dom": "^5.2.0",
- "react-select": "^5.5.0",
+ "react-select": "^5.7.1",
"tailwindcss": "^3.1.8",
"usehooks-ts": "^2.9.1",
"zustand": "^4.1.2"
},
"devDependencies": {
"@carbon/icons-react": "^11.9.0",
- "@fchh/fcos-suite-ui": "^0.1.13",
+ "@fchh/fcos-suite-ui": "^0.1.14",
"@types/carbon__icons-react": "^11.15.0",
"@types/mapbox-gl": "^2.7.6",
"@types/react": "^18.0.21",
diff --git a/src/components/FabCityMap.tsx b/src/components/FabCityMap.tsx
index f0637d737152a331ebd44c579c7b2baa9c52bc1a..f0ff7822c4ace1a26ac7842d40f5031fbaafea21 100644
--- a/src/components/FabCityMap.tsx
+++ b/src/components/FabCityMap.tsx
@@ -1,27 +1,27 @@
import { useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
import { useStore } from '../hooks';
import ErrorModal from './ErrorModal';
import Notification from './Notification';
import Map from './Map/Map';
import PoiLoader from './PoiLoader';
-import { BrowserRouter as Router } from 'react-router-dom';
import { MapProvider } from 'react-map-gl';
-import '../index.css';
import MapLayerControl from './Map/MapLayerControl';
-import Sidebar from "./Sidebar/Sidebar"
+import FilterSelect from './FilterSelect';
+import type { PointOfInterest } from 'src/types/PointOfInterest';
+import Sidebar from './Sidebar/Sidebar';
+import '../index.css';
interface Props {
- data: any;
+ data: PointOfInterest[] | null;
mapboxToken: string;
className?: string;
baseUrl?: string;
mapStyle?: string;
}
-const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl, mapStyle }) => {
+const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl, mapStyle }: Props) => {
const setPoiData = useStore((state) => state.setPoiData);
-
useEffect(() => {
setPoiData(data);
}, []);
@@ -43,15 +43,18 @@ const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl, ma
<Route exact path="/">
<PoiLoader poiId={null} />
</Route>
- <div className="fcmap-absolute fcmap-w-full fcmap-h-full fcmap-top-0 fcmap-left-0 fcmap-flex fcmap-flex-col md:fcmap-flex-row fcmap-justify-end fcmap-px-5 fcmap-pt-7 fcmap-gap-4 fcmap-pointer-events-none">
+ <div className="fcmap-absolute fcmap-w-full fcmap-h-full fcmap-top-0 fcmap-left-0 fcmap-px-5 fcmap-pt-7 fcmap-flex fcmap-flex-col fcmap-items-end fcmap-gap-4 fcmap-pointer-events-none fcmap-overflow-hidden">
<Route exact path="/">
- <div className="fcmap-flex fcmap-justify-end fcmap-items-start md:fcmap-flex-1 fcmap-pointer-events-none">
+ <div className="fcmap-flex fcmap-flex-col md:fcmap-flex-row fcmap-justify-end fcmap-items-center fcmap-pointer-events-none fcmap-gap-4 md:fcmap-h-10">
<MapLayerControl />
+ <FilterSelect />
</div>
</Route>
<Switch>
<Route>
- <Sidebar />
+ <div className="fcmap-relative fcmap-h-full fcmap-w-full">
+ <Sidebar />
+ </div>
</Route>
</Switch>
</div>
diff --git a/src/components/FilterSelect.tsx b/src/components/FilterSelect.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5241dfd8e8cfa0113f0390387483c10492a1413b
--- /dev/null
+++ b/src/components/FilterSelect.tsx
@@ -0,0 +1,107 @@
+import ReactSelect, { components } from 'react-select';
+import type { Theme } from 'react-select';
+import { Search as SearchIcon, OfficeBuilding as BuildingIcon, X as CloseIcon } from 'heroicons-react';
+import { Pill } from '@fchh/fcos-suite-ui';
+import { useStore, useFilteredPoiData } from '../hooks';
+import { removeDuplicateObjects } from '../util/array';
+import type { Tag as TagType } from '../types/PointOfInterest';
+
+interface SelectOption {
+ label: string;
+ value: TagType;
+}
+
+const CustomOption = ({ children, data, ...rest }: any) => {
+ return (
+ <components.Option {...rest}>
+ <Pill size="lg" title={children} rounded className="fcmap-text-indigo-800" customBgColor={data.value.color} />
+ </components.Option>
+ );
+};
+
+const CustomControl = ({ children, ...props }: any) => {
+ return (
+ <components.Control {...props}>
+ <SearchIcon className="fcmap-w-5 fcmap-h-5" />
+ {children}
+ <BuildingIcon className="fcmap-w-4 fcmap-h-4" />
+ </components.Control>
+ );
+};
+
+const CustomMultiValue = ({ children, data, getValue, setValue, ...rest }: any) => {
+ return (
+ <components.MultiValueContainer {...rest}>
+ <Pill
+ size="sm"
+ title={children}
+ rounded
+ className="fcmap-mr-0.5 fcmap-text-indigo-800"
+ icon={
+ <CloseIcon className="fcmap-w-3 fcmap-h-3 fcmap-text-indigo-400 hover:fcmap-text-gray-800 fcmap-cursor-pointer" />
+ }
+ iconRight
+ onIconClick={() => {
+ const oldValue = getValue();
+ // @ts-expect-error Not documented
+ const newValue = oldValue.filter((item) => !(data.value.id === item.value.id));
+ setValue(newValue);
+ }}
+ customBgColor={data.value.color}
+ />
+ </components.MultiValueContainer>
+ );
+};
+
+const FilterSelect = (): JSX.Element => {
+ const { filterTags, setFilterTags } = useFilteredPoiData();
+
+ const tagsToSelectOptions = (tags?: TagType[] | null): SelectOption[] =>
+ tags?.map((tag) => ({ label: tag.displayName, value: tag })) || [];
+
+ const tagsData = useStore((state) => state.poiData);
+
+ const tags =
+ tagsData &&
+ removeDuplicateObjects(
+ tagsData?.flatMap((poi) => poi.tags),
+ 'id',
+ );
+ const options = tagsToSelectOptions(tags);
+
+ return (
+ <ReactSelect
+ isMulti
+ theme={(theme): Theme => ({
+ ...theme,
+ borderRadius: 0,
+ colors: {
+ ...theme.colors,
+ primary25: '#C7D2FE',
+ },
+ })}
+ classNames={{
+ control: (provided) => provided && '!fcmap-border-0 !fcmap-text-gray-400 !fcmap-w-full !fcmap-px-4',
+ indicatorSeparator: (provided) => provided && 'fcmap-hidden',
+ indicatorsContainer: (provided) => provided && '!fcmap-hidden',
+ multiValue: ({ isMulti }) => (isMulti ? '' : ''),
+ }}
+ components={{
+ Option: CustomOption,
+ Control: CustomControl,
+ MultiValue: CustomMultiValue,
+ }}
+ placeholder={'Filter'}
+ name="pois"
+ className="fcmap-w-full fcmap-z-20 fcmap-order-1 md:fcmap-order-2 md:fcmap-w-[336px] fcmap-shadow-lg fcmap-bg-white fcmap-flex fcmap-justify-between fcmap-items-center fcmap-pointer-events-auto fcmap-shrink-0"
+ options={options}
+ value={tagsToSelectOptions(filterTags)}
+ //@ts-expect-error Not documented
+ onChange={(selectedOptions: SelectOption[]) => {
+ setFilterTags(selectedOptions.map((opt) => opt.value));
+ }}
+ />
+ );
+};
+
+export default FilterSelect;
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 2ec7f729dc92fd676ad3c866b8158a5191ee469c..a36744d57b01ab265655b99d51980129d21ce429 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -74,6 +74,7 @@ const Map: React.FC<Props> = ({ mapboxToken, mapStyle }) => {
fcmap?.easeTo(options);
} else if (!selectedPoi && bounds) {
const options = {
+ duration: 1000,
padding: calculateMapPadding(isSidebarHidden, isDesktop),
};
fcmap?.fitBounds(bounds, options);
diff --git a/src/components/Map/MapLayerControl.tsx b/src/components/Map/MapLayerControl.tsx
index 67e6d79ef49a6c345411d7651313fe0938820815..a447fec2e4090b7f32114ec551f5e0b91f593163 100644
--- a/src/components/Map/MapLayerControl.tsx
+++ b/src/components/Map/MapLayerControl.tsx
@@ -18,7 +18,7 @@ const MapLayerControl: React.FC = () => {
};
return (
- <div className="fcmap-flex fcmap-items-start fcmap-justify-center md:fcmap-justify-end fcmap-flex-wrap fcmap-gap-[9px] fcmap-pointer-events-auto">
+ <div className="fcmap-order-2 md:fcmap-order-1 fcmap-flex fcmap-items-start fcmap-justify-center md:fcmap-justify-end fcmap-flex-wrap fcmap-gap-[9px] fcmap-pointer-events-auto">
{layers.map((layer) => {
return (
<Pill
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
deleted file mode 100644
index 94d0f1942e0b386804e57bcbda1e5187b1e16c71..0000000000000000000000000000000000000000
--- a/src/components/Select.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Theme } from 'react-select';
-import ReactSelect, { NamedProps, StylesConfig, components } from 'react-select';
-import Tag from './Tag';
-
-const Option = ({ children, data, ...rest }: { children: any; data: any }) => {
- return (
- // @ts-expect-error: Not typed yet
- <components.Option {...rest}>
- <Tag color={data.value.color}>{children}</Tag>
- </components.Option>
- );
-};
-
-const Select = <OptionType, isMulti extends boolean>(props: NamedProps<OptionType, isMulti>): JSX.Element => {
- const customStyles: StylesConfig<OptionType, isMulti> = {
- control: (provided) => ({ ...provided, border: '0', borderRadius: '0.5em' }),
- multiValue: (provided, state) => ({
- ...provided,
- // @ts-expect-error: Not typed yet
- backgroundColor: state?.data?.value?.color || 'grey',
- borderRadius: '999px',
- padding: '0 3px',
- }),
- multiValueRemove: (provided) => ({
- ...provided,
- color: 'hsl(0, 0%, 50%)',
- '&:hover': { backgroundColor: 'initial', color: 'black' },
- }),
- };
-
- return (
- <ReactSelect
- components={{
- Option,
- }}
- theme={(theme): Theme => ({
- ...theme,
- // @ts-expect-error: ThemeConfig type from definitely-typed is not complete
- borderRadius: '0.5em',
- colors: {
- ...theme.colors,
- primary25: '#C7D2FE',
- },
- })}
- placeholder={'Tags auswählen...'}
- styles={customStyles}
- name="pois"
- className="hover:fcmap-border-opacity-40 fcmap-rounded-lg fcmap-w-full fcmap-border-2 fcmap-border-black fcmap-border-opacity-20 focus-within:fcmap-border-indigo-300 focus-within:fcmap-ring focus-within:fcmap-ring-indigo-200 focus-within:fcmap-ring-opacity-50 fcmap-mt-1"
- {...props}
- />
- );
-};
-
-export default Select;
diff --git a/src/components/Sidebar/CloseButton.tsx b/src/components/Sidebar/CloseButton.tsx
index 78e02171f7292c058d7da4880bba323deb1415cc..2b9230b1ca9be98e21da93e1bf727dad1c36cc88 100644
--- a/src/components/Sidebar/CloseButton.tsx
+++ b/src/components/Sidebar/CloseButton.tsx
@@ -2,12 +2,18 @@ import type { SyntheticEvent } from 'react';
import { X as CloseIcon } from 'heroicons-react';
interface Props {
onClick: (event: SyntheticEvent) => void;
+ className?: string;
}
-const CloseButton: React.FC<Props> = ({ onClick }) => {
+const CloseButton: React.FC<Props> = ({ onClick, className }) => {
return (
- <div className="fcmap-p-1 fcmap-flex fcmap-items-center fcmap-justify-center">
- <CloseIcon size={24} className="fcmap-text-gray-400 fcmap-inline-block fcmap-cursor-pointer" onClick={onClick} />
+ <div
+ className={
+ 'fcmap-p-1 fcmap-flex fcmap-items-center fcmap-justify-center fcmap-text-gray-400 hover:fcmap-text-gray-900 ' +
+ className
+ }
+ >
+ <CloseIcon size={24} className="fcmap-inline-block fcmap-cursor-pointer" onClick={onClick} />
</div>
);
};
diff --git a/src/components/Sidebar/MinimizeButton.tsx b/src/components/Sidebar/MinimizeButton.tsx
index e1265531f6c0bd01e1a8b731a804b1e770525e86..539eeccad67e940cb2d15ea711a572e8d6de06da 100644
--- a/src/components/Sidebar/MinimizeButton.tsx
+++ b/src/components/Sidebar/MinimizeButton.tsx
@@ -8,8 +8,8 @@ interface Props {
const MinimizeButton: React.FC<Props> = ({ onClick, isMinimized = false, className }) => {
return (
- <button type="button" onClick={onClick} className={className}>
- <ChevronDown size={24} className={`${isMinimized ? 'fcmap-rotate-180' : ''} fcmap-text-gray-400`} />
+ <button type="button" onClick={onClick} className={"fcmap-text-gray-400 hover:fcmap-text-gray-900 fcmap-flex fcmap-items-center fcmap-justify-center fcmap-p-1 " + className}>
+ <ChevronDown size={24} className={`${isMinimized ? 'fcmap-rotate-180' : ''} `} />
</button>
);
};
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index ae4efcf52be5ad975254586f6947d901fec09929..4f6f721e28f3cce1af525b7441d980bdd5f53784 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -11,23 +11,20 @@ const Sidebar: React.FC<Props> = ({ className }) => {
const selectedPoi = useStore((state) => state.selectedPoi);
const isSidebarHidden = useStore((state) => state.isSidebarHidden);
- const getPositionClasses = (isSidebarHidden: boolean, isSingleView: boolean) => {
- if (isSidebarHidden && isSingleView) {
- return '-fcmap-bottom-[calc(100%-70px)]';
- } else if (isSidebarHidden && !isSingleView) {
- return '-fcmap-bottom-[calc(100%-150px)] md:fcmap-top-[calc(100vh-108px)]';
- } else if (!isSidebarHidden) {
- return 'fcmap-bottom-0 md:fcmap-top-0';
+ const getPositionClasses = (isSidebarHidden: boolean) => {
+ if (isSidebarHidden) {
+ return 'fcmap-absolute fcmap-right-0 fcmap-translate-y-full fcmap-bottom-[55px]';
+ } else {
+ return 'fcmap-absolute fcmap-right-0 fcmap-translate-y-full fcmap-bottom-[100%]';
}
};
return (
<SidebarContainer
- className={`fcmap-absolute fcmap-overflow-hidden fcmap-transition-[bottom] md:fcmap-transition-[top] fcmap-duration-700 fcmap-ease-in-out ${getPositionClasses(
+ className={`fcmap-overflow-hidden fcmap-transition-all fcmap-duration-700 fcmap-ease-in-out ${getPositionClasses(
isSidebarHidden,
- Boolean(selectedPoi),
)} ${className || ''}`}
- clickable={!isSidebarHidden}
+ clickable={true}
>
{selectedPoi ? <SidebarSingleView /> : <SidebarListView />}
</SidebarContainer>
diff --git a/src/components/Sidebar/SidebarContainer.tsx b/src/components/Sidebar/SidebarContainer.tsx
index 21262a1b2534e911b01bb133dad7edac18578a8f..585f54f0f7b835d30462e110c4890d0d1e486392 100644
--- a/src/components/Sidebar/SidebarContainer.tsx
+++ b/src/components/Sidebar/SidebarContainer.tsx
@@ -7,7 +7,7 @@ interface Props {
const SidebarContainer: React.FC<Props> = ({ className, children, clickable = true }) => {
return (
<aside
- className={`fcmap-relative fcmap-w-full md:fcmap-w-[336px] fcmap-h-full md:fcmap-h-auto fcmap-overflow-y-hidden fcmap-z-10 fcmap-shadow-lg ${
+ className={`fcmap-w-full md:fcmap-w-[336px] fcmap-h-auto fcmap-overflow-y-hidden fcmap-z-10 fcmap-shadow-lg ${
clickable ? 'fcmap-pointer-events-auto' : 'fcmap-pointer-events-none'
} ${className ?? ''}`}
>
diff --git a/src/components/Sidebar/SidebarHeader.tsx b/src/components/Sidebar/SidebarHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c9a92abb45dd8be0a5fc3195a4f29954d8e2a44
--- /dev/null
+++ b/src/components/Sidebar/SidebarHeader.tsx
@@ -0,0 +1,19 @@
+interface Props {
+ className?: string;
+ children: React.ReactNode;
+}
+
+const SidebarHeader: React.FC<Props> = ({ className, children }) => {
+ return (
+ <div
+ className={
+ 'fcmap-flex fcmap-justify-between fcmap-m-4 fcmap-mb-0 fcmap-pb-2 fcmap-gap-2 fcmap-pointer-events-auto' +
+ className
+ }
+ >
+ {children}
+ </div>
+ );
+};
+
+export default SidebarHeader;
diff --git a/src/components/Sidebar/SidebarListView.tsx b/src/components/Sidebar/SidebarListView.tsx
index 86179e9921cf753cde9993bf100dd055b95a6096..54423a7b3191ec315ca6b1277946b4fbaa5be586 100644
--- a/src/components/Sidebar/SidebarListView.tsx
+++ b/src/components/Sidebar/SidebarListView.tsx
@@ -1,37 +1,24 @@
-import { useState } from 'react';
import { useStore } from '../../hooks';
import ListElement from './ListElement';
-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';
import MinimizeButton from './MinimizeButton';
+import SidebarHeader from './SidebarHeader';
const SidebarListView: React.FC = () => {
- const tagsToSelectOptions = (tags?: Tag[]) => tags?.map((tag) => ({ label: tag.displayName, value: tag }));
const history = useHistory();
-
- const data = useStore((state) => state.poiData);
- const { data: filteredData, filterTags, setFilterTags } = useFilteredPoiData();
+ const { data: filteredData } = useFilteredPoiData();
const hoveredPoi = useStore((state) => state.hoveredPoi);
const setHoveredPoi = useStore((state) => state.setHoveredPoi);
- const [filterInputIsOpen, setFilterInputIsOpen] = useState(false);
const isSidebarHidden = useStore((state) => state.isSidebarHidden);
const setIsSidebarHidden = useStore((state) => state.setIsSidebarHidden);
- const tags =
- data &&
- removeDuplicateObjects(
- data?.flatMap((poi) => poi.tags),
- 'id',
- );
- const options = tagsToSelectOptions(tags);
-
return (
<>
- <div className="fcmap-flex fcmap-flex-col fcmap-m-4 fcmap-mb-2 fcmap-pb-2 fcmap-gap-2 fcmap-pointer-events-auto">
+ <SidebarHeader>
+ <h1 className="fcmap-text-lg fcmap-font-medium fcmap-font-plex fcmap-text-gray-900">
+ {filteredData?.length} Orte:
+ </h1>
<div className="fcmap-flex fcmap-justify-end">
<MinimizeButton
isMinimized={isSidebarHidden}
@@ -40,26 +27,7 @@ const SidebarListView: React.FC = () => {
}}
/>
</div>
- <div className="fcmap-flex fcmap-justify-between fcmap-items-center">
- <h1 className="fcmap-text-lg fcmap-font-medium fcmap-font-plex fcmap-text-gray-900">
- {filteredData?.length} Orte:
- </h1>
- <FilterIcon
- onClick={() => setFilterInputIsOpen(!filterInputIsOpen)}
- className="fcmap-text-gray-400 fcmap-w-5 fcmap-h-5 fcmap-cursor-pointer"
- />
- </div>
- {filterInputIsOpen && (
- <div className="fcmap-py-2">
- <Select
- options={options}
- isMulti={true}
- value={filterTags && tagsToSelectOptions(filterTags)}
- onChange={(selectedOptions) => setFilterTags(selectedOptions.map((opt) => opt.value))}
- />
- </div>
- )}
- </div>
+ </SidebarHeader>
<div className="fcmap-overflow-y-auto fcmap-flex fcmap-flex-col fcmap-gap-6 fcmap-m-4 fcmap-mr-2 fcmap-pr-2">
{filteredData?.map((poi) => (
<ListElement
diff --git a/src/components/Sidebar/SidebarSingleView.tsx b/src/components/Sidebar/SidebarSingleView.tsx
index 703856992137896036ec5667c4019990bf412124..030f009e6009ba5e5ad106c9b174811c1e765842 100644
--- a/src/components/Sidebar/SidebarSingleView.tsx
+++ b/src/components/Sidebar/SidebarSingleView.tsx
@@ -1,8 +1,9 @@
import { useStore } from '../../hooks';
-import Tag from '../Tag';
import CloseButton from './CloseButton';
import MinimizeButton from './MinimizeButton';
import { useHistory } from 'react-router-dom';
+import { Pill } from '@fchh/fcos-suite-ui';
+import SidebarHeader from './SidebarHeader';
const SidebarSingleView: React.FC = () => {
const selectedPoi = useStore((state) => state.selectedPoi);
@@ -13,11 +14,10 @@ const SidebarSingleView: React.FC = () => {
return (
<>
- <div className="fcmap-flex fcmap-justify-between fcmap-items-center fcmap-px-4 fcmap-py-6">
+ <SidebarHeader>
<h1 className="fcmap-text-lg fcmap-font-medium fcmap-font-plex fcmap-text-gray-900">Profil</h1>
- <div className="fcmap-flex fcmap-pointer-events-auto">
+ <div className="fcmap-flex">
<MinimizeButton
- className="fcmap-p-1"
isMinimized={isSidebarHidden}
onClick={() => {
setIsSidebarHidden(!isSidebarHidden);
@@ -29,7 +29,7 @@ const SidebarSingleView: React.FC = () => {
}}
/>
</div>
- </div>
+ </SidebarHeader>
<div className={`${selectedPoi?.image ? '' : 'fcmap-pl-5 fcmap-pt-5 '}`}></div>
{selectedPoi?.image && (
<img
@@ -69,9 +69,14 @@ const SidebarSingleView: React.FC = () => {
{!!selectedPoi?.tags?.length && (
<div className={'fcmap-flex fcmap-items-center fcmap-mt-3 fcmap-flex-wrap'}>
{selectedPoi?.tags.map((tag) => (
- <Tag key={tag.id} color={tag.color}>
- {tag.displayName}
- </Tag>
+ <Pill
+ key={tag.id}
+ size="lg"
+ title={tag.displayName}
+ customBgColor={tag.color}
+ rounded
+ className="fcmap-text-indigo-800 fcmap-px-2 fcmap-py-0.5 fcmap-m-0.5 fcmap-mr-1.5 "
+ />
))}
</div>
)}
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
deleted file mode 100644
index b272e2fa5e0b163a85b425fcf671a326dfdeb78a..0000000000000000000000000000000000000000
--- a/src/components/Tag.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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 ? 'fcmap-cursor-pointer ' : ''
- }fcmap-inline-flex fcmap-flex-nowrap fcmap-items-center fcmap-px-2 fcmap-py-0.5 fcmap-m-0.5 fcmap-rounded-full fcmap-text-sm fcmap-font-medium fcmap-bg-indigo-100 fcmap-text-indigo-800 fcmap-mr-2 fcmap-whitespace-nowrap`}
- style={color ? { backgroundColor: color } : {}}
- >
- {children}
- {onClickDelete && (
- <CloseIcon
- onClick={onClickDelete}
- className="fcmap-ml-0.5 fcmap-inline-block fcmap-cursor-pointer fcmap-text-gray-600 hover:fcmap-text-gray-800"
- size={12}
- />
- )}
- </div>
- );
-};
-
-export default Tag;
diff --git a/src/index.tsx b/src/index.tsx
index ad51816745384597b6559409ff06e1f47cd1b645..66780db99bbb63bae3facfa5e01fa0b2f67b45a7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -95,7 +95,7 @@ const exampleData = [
website: 'http://www.fabcity.hamburg',
address: 'Stockmeyerstr. 43, Halle 4K, Eingang von der Wasserseite, 20457 Hamburg',
lat: 53.541994386894,
- lng: 10.010334958155,
+ lng: 10.210334958155,
image: 'https://picsum.photos/id/862/800/600',
category: 'Fab Lab / Offene Werkstatt',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',