Merge pull request #88 from marcaufderheyde/develop

Develop

app/Components/ClubOpenStreetMap.tsx

@@ -5,9 +5,9 @@ import 'leaflet/dist/leaflet.css';
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
 import L, { icon, popup } from 'leaflet';
 import { useLocale, useTranslations } from 'next-intl';
-import styles from '@/app/[locale]/clubs/ClubCard.module.css';
+import styles from '@/app/styles/ClubCard.module.css';
 import Image from 'next/image';
-import { Club } from '../[locale]/clubs/clubsListContent';
+import { Club } from '@/app/helpers/clubsListContent';
 
 const customIcon = L.icon({
     iconUrl: '/leaf-weed.png',

app/Components/CustomMarker.tsx

@@ -0,0 +1,28 @@
+'use client';
+import React from 'react';
+import { Marker } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
+import { LeafletMouseEventHandlerFn } from 'leaflet';
+
+type Props = {
+    index: number;
+    location: number[];
+    customIcon: L.Icon<L.IconOptions>;
+    clickedOnMarker: LeafletMouseEventHandlerFn;
+};
+
+const CustomMarker = (props: Props) => {
+    return (
+        <Marker
+            key={props.index}
+            position={[props.location[0], props.location[1]]}
+            icon={props.customIcon}
+            eventHandlers={{
+                click: props.clickedOnMarker,
+            }}
+        />
+    );
+};
+
+export default CustomMarker;

app/Components/CustomPopup.tsx

@@ -0,0 +1,104 @@
+'use client';
+import React from 'react';
+import styles from '@/app/styles/ClubCard.module.css';
+import Image from 'next/image';
+import { useLocale } from 'next-intl';
+import Triangle from '../ui/Home/triangle';
+import ActionButton from '../ui/Home/actionbutton';
+import ArrowButton from '../ui/Home/arrowbutton';
+import Close from '../ui/Navigation/close';
+
+interface Club {
+    name: string;
+    slug: string;
+    imageUrl: string;
+    geoLocation: number[];
+    description?: string;
+    offerings?: string;
+    harm_reduction?: string;
+}
+
+interface CustomPopupProps {
+    club: Club;
+    clubIndex: string;
+    onClose: () => void;
+    switchNextClub: () => void;
+    switchPreviousClub: () => void;
+}
+
+const CustomPopup: React.FC<CustomPopupProps> = ({
+    club,
+    onClose,
+    switchNextClub,
+    switchPreviousClub,
+    clubIndex,
+}) => {
+    const localActive = useLocale();
+
+    return (
+        <div className={styles.customPopup}>
+            <div className={styles.mapCardContainer}>
+                <button className={styles.closeButton} onClick={onClose}>
+                    <Close color={'#828282'} />
+                </button>
+                <div className="flex flex-col items-center">
+                    <a
+                        href={`/${localActive}/clubs/${club.slug}`}
+                        className={styles.mapCardLink}
+                    >
+                        <div className={styles.mapCard}>
+                            <div className="flex justify-center items-center">
+                                <Image
+                                    src={club.imageUrl}
+                                    alt={`${club.name} Club Picture`}
+                                    width={300}
+                                    height={300}
+                                    className={styles.mapCardImage}
+                                />
+                            </div>
+                            <div className={styles.mapCardContent}>
+                                <h3 className={styles.mapCardTitle}>
+                                    {club.name}
+                                </h3>
+                                <p className={styles.mapCardDescription}>
+                                    {club.description}
+                                </p>
+                                <br />
+                                <p className={styles.mapCardOfferings}>
+                                    {club.offerings}
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+                    <div
+                        className={
+                            'absolute bottom-0 inline-flex py-2 px-4 md:py-3'
+                        }
+                    >
+                        <ArrowButton
+                            boxClassName={'rounded-l-full'}
+                            triangleClassName={'w-8 h-8 p-2 align-middle'}
+                            toggleRotate={true}
+                            backgroundColor={'bg-lime-500'}
+                            triangleColor={'white'}
+                            onClickFunction={switchPreviousClub}
+                        />
+                        <div className="bg-lime-500 flex text-white text-base p-2">
+                            {clubIndex}
+                        </div>
+                        <ArrowButton
+                            boxClassName={'rounded-r-full'}
+                            triangleClassName={'w-8 h-8 p-2 align-middle'}
+                            toggleRotate={false}
+                            backgroundColor={'bg-lime-500'}
+                            triangleColor={'white'}
+                            onClickFunction={switchNextClub}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CustomPopup;

app/Components/MapListViewSwitcher.tsx

@@ -0,0 +1,59 @@
+'use client';
+import React, { Dispatch, SetStateAction } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+
+type Props = {
+    showMap: boolean;
+    setShowMap: Dispatch<SetStateAction<boolean>>;
+};
+
+function MapListViewSwitcher({ showMap, setShowMap }: Props) {
+    const t = useTranslations('ClubsPage');
+    const localActive = useLocale();
+
+    const mapButtonBackground = showMap
+        ? 'bg-white text-black'
+        : 'bg-gray-200 text-neutral-400';
+    const listButtonBackground = showMap
+        ? 'bg-gray-200 text-neutral-400'
+        : 'bg-white text-black';
+    const mapListViewSwitcherPosition = showMap
+        ? 'absolute top-[var(--navbar-height)] right-0'
+        : 'relative';
+    return (
+        <div className='w-[100vw] flex align-middle justify-end'>
+            <div
+                className={
+                    'inline-flex ' +
+                    mapListViewSwitcherPosition +
+                    ' z-[998] lg:m-8 lg:ml-20 m-4 rounded-3xl shadow-md'
+                }
+            >
+                <div className={'z-[999] rounded-l-3xl ' + mapButtonBackground}>
+                    <button
+                        onClick={() => setShowMap(true)}
+                        className={
+                            'flex z-[999] cursor-pointer items-center p-2 lg:p-4'
+                        }
+                    >
+                        {t('clubs_menu_show_map')}
+                    </button>
+                </div>
+                <div
+                    className={'z-[999] rounded-r-3xl ' + listButtonBackground}
+                >
+                    <button
+                        onClick={() => setShowMap(false)}
+                        className={
+                            'flex z-[999] cursor-pointer items-center p-2 lg:p-4'
+                        }
+                    >
+                        {t('clubs_menu_show_list')}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default MapListViewSwitcher;