From adc77d2be0945ec02028b46d3b11584efa236771 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 31 Dec 2024 18:02:19 +0100
Subject: [PATCH] Added map switch cta

---
 .../maps/overlay/SearchMapSwitch.vue          | 48 +++++++++++++++++++
 src/components/maps/overlay/SearchMarkers.vue |  8 +++-
 2 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/components/maps/overlay/SearchMapSwitch.vue

diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue
new file mode 100644
index 00000000..fc3d08a1
--- /dev/null
+++ b/src/components/maps/overlay/SearchMapSwitch.vue
@@ -0,0 +1,48 @@
+<template>
+    <button class="btn-round">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M249.94,120.24l-27.05-6.76a95.86,95.86,0,0,0-80.37-80.37l-6.76-27a8,8,0,0,0-15.52,0l-6.76,27.05a95.86,95.86,0,0,0-80.37,80.37l-27,6.76a8,8,0,0,0,0,15.52l27.05,6.76a95.86,95.86,0,0,0,80.37,80.37l6.76,27.05a8,8,0,0,0,15.52,0l6.76-27.05a95.86,95.86,0,0,0,80.37-80.37l27.05-6.76a8,8,0,0,0,0-15.52Zm-44.17-11L158.6,97.4,146.8,50.23A79.88,79.88,0,0,1,205.77,109.2Zm-96.57-59L97.4,97.4,50.23,109.2A79.88,79.88,0,0,1,109.2,50.23Zm-59,96.57L97.4,158.6l11.8,47.17A79.88,79.88,0,0,1,50.23,146.8Zm96.57,59,11.8-47.17,47.17-11.8A79.88,79.88,0,0,1,146.8,205.77Z"/></svg>
+    </button>
+</template>
+
+<style lang="scss" scoped>
+button {
+    pointer-events: all;
+    cursor: pointer;
+}
+
+.btn-round {
+    display: grid;
+    place-items: center;
+    height: 45px;
+    aspect-ratio: 1;
+    background-color: var(--white);
+    border: 1px solid var(--slate-400);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+    border-radius: 100vmax;
+    pointer-events: all;
+    outline: .2rem solid transparent;
+    transition-property: color, background-color, border-color, outline-color;
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+
+    svg {
+        transition-property: fill;
+        transition-duration: .15s;
+        transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    }
+
+    &:hover,
+    &:focus-visible {
+        outline-color: color-mix(in srgb, var(--purple-500) 20%, transparent);
+        border-color: var(--purple-500);
+        
+        svg {
+            fill: var(--purple-500);
+        }
+    }
+}
+
+svg {
+    width: 1.15em;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 719dd4e2..8dbbf1af 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -4,6 +4,7 @@ import type { SearchMode } from '@/types/Search';
 import { onClickOutside, useFocus, useFocusWithin, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
 import { computed, onMounted, ref, onUpdated, watch } from 'vue';
 import SearchMarkersTags from './SearchMarkersTags.vue';
+import SearchMapSwitch from './SearchMapSwitch.vue';
 
 const props = defineProps<{
     markers: MapMarker[],
@@ -196,6 +197,8 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
 <template>
     <nav ref="searchBarWrapper" class="toolbar">
+        <SearchMapSwitch />
+
         <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
             <div class="input-w">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="search-icon"><rect width="256" height="256" fill="none"/><path d="M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z"/></svg>
@@ -264,7 +267,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
 .toolbar {
     @media screen and (width >= 900px) {
         display: flex;
-        gap: 1.5rem;
+        gap: .75rem;
         align-items: start;
     }
 
@@ -279,6 +282,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
         @media screen and (width >= 900px) {
             width: 25%;
+            margin-right: .75rem;
         }
 
         .input-w {
@@ -351,7 +355,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
             .player-btn {
                 margin-left: .25rem;
-                
+
                 .icon {
                     font-size: 1.5em;
                     fill: var(--red-500);