From d6565f8e03f1a48105854a59179495d05c163b7d Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Mon, 30 Mar 2026 21:59:07 +0200
Subject: [PATCH] Refactored checkbox into its own component

---
 src/components/BikeFilters.vue    | 49 +++++++------------------------
 src/components/forms/Checkbox.vue | 25 ++++++++++++++++
 2 files changed, 36 insertions(+), 38 deletions(-)
 create mode 100644 src/components/forms/Checkbox.vue

diff --git a/src/components/BikeFilters.vue b/src/components/BikeFilters.vue
index 598bfa3..6571493 100644
--- a/src/components/BikeFilters.vue
+++ b/src/components/BikeFilters.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useMap } from '@/stores/map';
-import { PhCheck, PhMinus, PhPlus } from '@phosphor-icons/vue';
 import { storeToRefs } from 'pinia';
-import { CheckboxIndicator, CheckboxRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
 import { ref, watch } from 'vue';
+import Checkbox from './forms/Checkbox.vue';
 
 const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
 
@@ -43,48 +43,21 @@ watch(maxSpots, (val) => {
     <form>
       <div class="grid grid-cols-2 gap-1.5">
         <div class="col-span-2">
-          <label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
-            <CheckboxRoot v-model="filterUncovered"
-              class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
-              <CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
-                <PhCheck :size="10" weight="bold" />
-              </CheckboxIndicator>
-            </CheckboxRoot>
-            <span class="select-none">
-              Non-abrités
-              <small v-if="nbUncovered">({{ nbUncovered }})</small>
-            </span>
-          </label>
+          <Checkbox v-model="filterUncovered" :count="nbUncovered">
+            Non-abrités
+          </Checkbox>
         </div>
 
         <div class="col-span-2">
-          <label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
-            <CheckboxRoot v-model="filterCovered"
-              class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
-              <CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
-                <PhCheck :size="10" weight="bold" />
-              </CheckboxIndicator>
-            </CheckboxRoot>
-            <span class="select-none">
-              Abrités
-              <small v-if="nbCovered">({{ nbCovered }})</small>
-            </span>
-          </label>
+          <Checkbox v-model="filterCovered" :count="nbCovered">
+            Abrités
+          </Checkbox>
         </div>
 
         <div class="col-span-2">
-          <label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
-            <CheckboxRoot v-model="filterKorrigo"
-              class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
-              <CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
-                <PhCheck :size="10" weight="bold" />
-              </CheckboxIndicator>
-            </CheckboxRoot>
-            <span class="select-none">
-              Abonnement Korrigo
-              <small v-if="nbKorrigo">({{ nbKorrigo }})</small>
-            </span>
-          </label>
+          <Checkbox v-model="filterKorrigo" :count="nbKorrigo">
+            Abonnement Korrigo
+          </Checkbox>
         </div>
 
         <div class="mt-1 col-span-2">
diff --git a/src/components/forms/Checkbox.vue b/src/components/forms/Checkbox.vue
new file mode 100644
index 0000000..ce97769
--- /dev/null
+++ b/src/components/forms/Checkbox.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { PhCheck } from '@phosphor-icons/vue'
+import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
+
+defineProps<{
+  count?: number
+}>()
+
+const checked = defineModel<boolean>()
+</script>
+
+<template>
+  <label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
+    <CheckboxRoot v-model="checked"
+      class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
+      <CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
+        <PhCheck :size="10" weight="bold" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+    <span class="select-none">
+      <slot />
+      <small v-if="count">({{ count }})</small>
+    </span>
+  </label>
+</template>