Implement fullscreen control feature

Co-authored-by: antontranelis <31516529+antontranelis@users.noreply.github.com>

lib/src/Components/Map/Subcomponents/Controls/FullscreenControl.tsx

@@ -0,0 +1,41 @@
+import ArrowsPointingInIcon from '@heroicons/react/24/outline/ArrowsPointingInIcon'
+import ArrowsPointingOutIcon from '@heroicons/react/24/outline/ArrowsPointingOutIcon'
+import { useEffect, useState } from 'react'
+
+export const FullscreenControl = () => {
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement != null)
+    }
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange)
+    }
+  }, [])
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      void document.documentElement.requestFullscreen()
+    } else {
+      void document.exitFullscreen()
+    }
+  }
+
+  return (
+    <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
+      <div
+        className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
+        onClick={toggleFullscreen}
+      >
+        {isFullscreen ? (
+          <ArrowsPointingInIcon className='tw:stroke-[2.5]' />
+        ) : (
+          <ArrowsPointingOutIcon className='tw:stroke-[2.5]' />
+        )}
+      </div>
+    </div>
+  )
+}

lib/src/Components/Map/UtopiaMap.tsx

@@ -53,6 +53,7 @@ function UtopiaMap({
   showLayerControl = true,
   showZoomControl = false,
   showThemeControl = false,
+  showFullscreenControl = false,
   defaultTheme,
   donationWidget,
   expandLayerControl,
@@ -81,6 +82,8 @@ function UtopiaMap({
   showZoomControl?: boolean
   /** show a widget to switch the theme */
   showThemeControl?: boolean
+  /** show fullscreen control widget (default false) */
+  showFullscreenControl?: boolean
   /** the defaut theme */
   defaultTheme?: string
   /** ask to donate to the Utopia Project OpenCollective campaign (default false) */
@@ -106,6 +109,7 @@ function UtopiaMap({
           showFilterControl={showFilterControl}
           showGratitudeControl={showGratitudeControl}
           showLayerControl={showLayerControl}
+          showFullscreenControl={showFullscreenControl}
           donationWidget={donationWidget}
           showThemeControl={showThemeControl}
           defaultTheme={defaultTheme}

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -36,6 +36,7 @@ import { useTags } from './hooks/useTags'
 import AddButton from './Subcomponents/AddButton'
 import { Control } from './Subcomponents/Controls/Control'
 import { FilterControl } from './Subcomponents/Controls/FilterControl'
+import { FullscreenControl } from './Subcomponents/Controls/FullscreenControl'
 import { GratitudeControl } from './Subcomponents/Controls/GratitudeControl'
 import { LayerControl } from './Subcomponents/Controls/LayerControl'
 import { SearchControl } from './Subcomponents/Controls/SearchControl'
@@ -51,6 +52,7 @@ export function UtopiaMapInner({
   showFilterControl = false,
   showGratitudeControl = false,
   showLayerControl = true,
+  showFullscreenControl = false,
   showThemeControl = false,
   defaultTheme = '',
   donationWidget,
@@ -63,6 +65,7 @@ export function UtopiaMapInner({
   showFilterControl?: boolean
   showLayerControl?: boolean
   showGratitudeControl?: boolean
+  showFullscreenControl?: boolean
   donationWidget?: boolean
   showThemeControl?: boolean
   defaultTheme?: string
@@ -279,6 +282,7 @@ export function UtopiaMapInner({
         {showFilterControl && <FilterControl />}
         {showLayerControl && <LayerControl expandLayerControl={expandLayerControl ?? false} />}
         {showGratitudeControl && <GratitudeControl />}
+        {showFullscreenControl && <FullscreenControl />}
       </Control>
       <TileLayer
         maxZoom={19}