Added phosphor icons

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
+        "@phosphor-icons/vue": "^2.1.6",
         "@vueuse/core": "^10.9.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -888,6 +889,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@phosphor-icons/vue": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.1.6.tgz",
+      "integrity": "sha512-j4iVvNT4JbDR2udIVfakKZHd14i3jCvO4b24OC0W/1rasftU8qVg1Tnb3QDwAT0teNU+UxvaM+kCWxfGHC2dUg==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.39"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@phosphor-icons/vue": "^2.1.6",
     "@vueuse/core": "^10.9.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/assets/main.css

@@ -75,7 +75,4 @@
   body {
     @apply bg-background text-foreground;
   }
-  svg {
-    fill: hsl(var(--foreground));
-  }
 }

src/components/calendar/CalendarMenu.vue

@@ -3,6 +3,7 @@ import { useCalendar } from '@/stores/calendar'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
+import CalendarMenuSearch from './CalendarMenuSearch.vue'
 
 const { currentDate } = useCalendar()
 </script>
@@ -29,7 +30,9 @@ const { currentDate } = useCalendar()
             </h1>
           </div>
         </div>
-        <div class="md:col-span-3"></div>
+        <div class="md:col-span-3">
+          <CalendarMenuSearch />
+        </div>
       </div>
     </div>
   </header>

src/components/calendar/CalendarMenuNav.vue

@@ -2,6 +2,12 @@
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCalendar } from '@/stores/calendar'
 import Button from '../ui/button/Button.vue'
+import {
+  PhCaretDoubleLeft,
+  PhCaretDoubleRight,
+  PhCaretLeft,
+  PhCaretRight
+} from '@phosphor-icons/vue'
 
 const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCalendar()
 </script>
@@ -14,11 +20,7 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
       <Tooltip>
         <TooltipTrigger>
           <Button variant="outline" size="icon" @click="decrementYear()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+            <PhCaretDoubleLeft size="18" />
-              <path
-                d="M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z"
-              />
-            </svg>
           </Button>
         </TooltipTrigger>
         <TooltipContent>
@@ -31,11 +33,7 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
       <Tooltip>
         <TooltipTrigger>
           <Button variant="outline" size="icon" @click="decrementMonth()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+            <PhCaretLeft size="18" />
-              <path
-                d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
-              />
-            </svg>
           </Button>
         </TooltipTrigger>
         <TooltipContent>
@@ -48,11 +46,7 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
       <Tooltip>
         <TooltipTrigger>
           <Button variant="outline" size="icon" @click="incrementMonth()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+            <PhCaretRight size="18" />
-              <path
-                d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
-              />
-            </svg>
           </Button>
         </TooltipTrigger>
         <TooltipContent>
@@ -65,11 +59,8 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
       <Tooltip>
         <TooltipTrigger>
           <Button variant="outline" size="icon" @click="incrementYear()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+            <PhCaretDoubleRight size="18" />
-              <path
+          </Button>
-                d="M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
-              ></path></svg
-          ></Button>
         </TooltipTrigger>
         <TooltipContent>
           <p>Année suivante</p>

src/components/calendar/CalendarMenuSearch.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { Button } from '@/components/ui/button'
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+</script>
+
+<template>
+  <Button size="default">
+    <PhMagnifyingGlass size="18" weight="fill" />
+
+    Rechercher
+  </Button>
+</template>

src/components/calendar/CalendarSwitch.vue

@@ -10,6 +10,7 @@ import {
 import Button from '../ui/button/Button.vue'
 import { useCalendar } from '@/stores/calendar'
 import { computed } from 'vue'
+import { PhCalendarBlank } from '@phosphor-icons/vue'
 
 const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
 
@@ -20,11 +21,7 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
   <DropdownMenu>
     <DropdownMenuTrigger>
       <Button size="sm" variant="secondary">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
+        <PhCalendarBlank size="18" weight="fill" />
-          <path
-            d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
-          />
-        </svg>
 
         {{ viewTypeTitle }}
       </Button>