feat: add URL copy feature

frontend/src/components/Common/AffixBtn.tsx

@@ -1,34 +1,40 @@
-import { Affix } from "@mantine/core";
+import { Affix, Flex } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
 
 export function AffixBtn({
   children,
   position = { bottom: 20, right: 20 },
   widePosition = { top: 20, right: 20 },
-  defaultToPlain = false
+  defaultToPlain = false,
+  leftSection,
+  rightSection,
 }: {
   children: React.ReactNode;
   position?: { bottom?: number; right?: number; top?: number; left?: number; };
   widePosition?: { bottom?: number; right?: number; top?: number; left?: number; };
   defaultToPlain?: boolean;
+  leftSection?: React.ReactNode;
+  rightSection?: React.ReactNode;
 }) {
   const { width } = useViewportSize();
 
   return (
     <>
     {
-      defaultToPlain
-        ? width < 768
-          ? <Affix position={position}>
-            {children}
-          </Affix>
-          : children
-        : width < 768
-          ? <Affix position={position}>
-            {children}
-          </Affix>
+      width < 768
+        ? <Affix position={position}>
+          <Flex gap="sm" className="w-screen" justify={
+            position.right ? "end" : "start"
+          }>
+            { leftSection }
+            { children }
+            { rightSection }
+          </Flex>
+        </Affix>
+        : defaultToPlain
+          ? children
           : <Affix position={widePosition}>
-            {children}
+            { children }
           </Affix>
     }
     </>

frontend/src/components/Map/MapWrapper.tsx

@@ -7,7 +7,7 @@ import { MapContainer, TileLayer } from 'react-leaflet';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 import { useEffect, useState } from 'react';
 import { Property } from '../../types/property';
-import { PropertyPanel } from './PropertyPanel';
+import { PropertyPanel } from '../PropertyPanel/PropertyPanel';
 import { MapMarkers } from './MapMarkers';
 import { MapEvents } from './MapEvents';
 import { selectedLatLng, selectedZoom } from '../../store/urlQuery/urlQuery.selector';

frontend/src/components/PropertyPanel/PropertyCarousel.tsx

@@ -0,0 +1,32 @@
+import { Carousel } from "@mantine/carousel";
+import { Grid, Image } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+
+export function PropertyCarousel({
+  imageLink,
+  fullName,
+}: {
+  imageLink: string[];
+  fullName: string;
+}) {
+  const { ref, height } = useElementSize();
+
+  return (
+    <>
+      {
+        imageLink.length > 0 &&
+        <Grid.Col span={12}>
+          <Carousel height={height ?? 290}>
+            {
+              imageLink.map((link, index) => (
+                <Carousel.Slide key={index}>
+                  <Image fit="contain" src={link} alt={`${fullName} [picture ${index}]`} ref={index === 0 ? ref : undefined} />
+                </Carousel.Slide>
+              ))
+            }
+          </Carousel>
+        </Grid.Col>
+      }
+    </>
+  )
+}