add interior

app/_components/ColorSelector.tsx

@@ -32,8 +32,8 @@ export default function ColorSelector({
   }
 
   return (
-    <div className='mt-2 ml-3 flex space-x-[3px] items-center'>
-      <span className='text-xs lg:text-sm text-whiteBG'>Couleurs</span>
+    <div className='mt-1 ml-3 flex space-x-[3px] items-center'>
+      <span className='text-xs lg:text-sm text-whiteBG mr-1'>Couleurs</span>
       {Object.entries(colorHexMap).map(([colorKey, hex]) => (
         <div
           key={colorKey}

app/_components/MultiSelector.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+export default function MultiSelectList({
+  items,
+  selectedItems,
+  setSelectedItems
+}: {
+  items: string[]
+  selectedItems: string[]
+  setSelectedItems: (items: any[]) => void
+}) {
+  const toggleItemSelection = (item: string) => {
+    if (selectedItems.includes(item)) {
+      // Remove item if it is already selected
+      setSelectedItems(selectedItems.filter((i) => i !== item))
+    } else {
+      // Add item if it is not selected
+      setSelectedItems([...selectedItems, item])
+    }
+  }
+
+  return (
+    <div className='mt-1 ml-3 flex space-x-[3px] items-center'>
+      <span className='text-xs lg:text-sm text-whiteBG mr-1'>Intérieur</span>
+      {items
+        .filter((item) => item !== 'Tissu')
+        .map((item) => (
+          <label key={item} className='flex items-center cursor-pointer'>
+            <input
+              type='checkbox'
+              checked={selectedItems.includes(item)}
+              onChange={() => toggleItemSelection(item)}
+              className='rounded cursor-pointer ml-1'
+            />
+            <span className='text-sm'>{item}</span>
+          </label>
+        ))}
+    </div>
+  )
+}

app/_components/car-posts/CarPosts.tsx

@@ -7,10 +7,11 @@ import {
   generateCarPostsQueryParams,
   GetCarPostsFilters
 } from '../../../api/services/car-posts.service'
-import { regionsSelect } from '../../types'
+import { InteriorType, regionsSelect } from '../../types'
 import { reactSelectFilterStyle } from '../customStyles'
 import CarPostModal from './CarPostModal'
 import ColorSelector from '../ColorSelector'
+import MultiSelectList from '../MultiSelector'
 
 const API_PAGE_SIZE = 20
 
@@ -32,9 +33,11 @@ export default function CarPostsFeed({
   const [make, setMake] = useState(initialFilters?.make)
   const [model, setModel] = useState(initialFilters?.model)
   const [regions, setRegions] = useState<{ value: string; label: string }[]>([])
-  const [fuel, setFuel] = useState(initialFilters?.fuel)
+  const [fuel, setFuel] = useState(initialFilters?.fuel || [])
   const [colors, setColors] = useState(initialFilters?.color || [])
-  const [interiorType, setInteriorType] = useState(initialFilters?.interiorType)
+  const [interiorTypes, setInteriorTypes] = useState(
+    initialFilters?.interiorType || []
+  )
   const [maxPrice, setMaxPrice] = useState(initialFilters?.maxPrice)
   const [minPrice, setMinPrice] = useState(initialFilters?.minPrice)
   const [maxYear, setMaxYear] = useState(initialFilters?.maxYear)
@@ -56,7 +59,13 @@ export default function CarPostsFeed({
   // Relative search bar
   const [showFilters, setShowFilters] = useState(false)
   const [showMoreFilters, setShowMoreFilters] = useState(
-    alarm || keyless || camera || leasing || exchange || colors
+    alarm ||
+      keyless ||
+      camera ||
+      leasing ||
+      exchange ||
+      colors.length > 0 ||
+      interiorTypes.length > 0
   )
 
   const searchDivRef = useRef<HTMLDivElement | null>(null)
@@ -70,7 +79,7 @@ export default function CarPostsFeed({
       regionIds: regions.map((region) => region.value),
       fuel,
       color: colors,
-      interiorType,
+      interiorType: interiorTypes,
       maxPrice,
       minPrice,
       maxCV,
@@ -278,6 +287,11 @@ export default function CarPostsFeed({
                   />
                   <span className='text-xs lg:text-sm'>Leasing</span>
                 </label>
+                <MultiSelectList
+                  items={Object.values(InteriorType)}
+                  selectedItems={interiorTypes}
+                  setSelectedItems={setInteriorTypes}
+                />
                 <ColorSelector
                   selectedColors={colors}
                   setSelectedColors={setColors}