feat: add router for filters

components/HotelReservation/SelectHotel/HotelFilter/hotelFilter.module.css

@@ -5,13 +5,14 @@
 .facilities {
   flex-direction: column;
   font-family: var(--typography-Body-Bold-fontFamily);
-  margin: var(--Spacing-x3) 0;
+  margin-bottom: var(--Spacing-x3);
 }
 
 .filter {
   display: grid;
   grid-template-columns: repeat(2, minmax(min-content, max-content));
   gap: var(--Spacing-x-one-and-half);
+  margin-bottom: var(--Spacing-x-one-and-half);
   align-items: center;
 }
 

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -1,31 +1,56 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import { getIntl } from "@/i18n"
 
 import styles from "./hotelFilter.module.css"
 
 export default async function HotelFilter() {
   const { formatMessage } = await getIntl()
+
+  const filters = await serverClient().hotel.getFilters({
+    hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
+  })
+
+  const hotelFilters = filters.flatMap((filter) => filter.filter)
+
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {formatMessage({ id: "Room facilities" })}
-        <div className={styles.filter}>
-          <input id="balcony" name="balcony" type="checkbox" />
-          <label htmlFor="balcony">Balcony</label>
-        </div>
+        {hotelFilters.map((data) =>
+          data.roomFacilities.map((roomFilter) => (
+            <div key={roomFilter} className={styles.filter}>
+              <input id={roomFilter} name={roomFilter} type="checkbox" />
+              <label htmlFor={roomFilter}>{roomFilter}</label>
+            </div>
+          ))
+        )}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel facilities" })}
-        <div className={styles.filter}>
-          <input id="balcony" name="balcony" type="checkbox" />
-          <label htmlFor="balcony">Balcony</label>
-        </div>
+        {hotelFilters.map((data) =>
+          data.hotelFacilities.map((hotelFilter) => (
+            <div key={hotelFilter} className={styles.filter}>
+              <input id={hotelFilter} name={hotelFilter} type="checkbox" />
+              <label htmlFor={hotelFilter}>{hotelFilter}</label>
+            </div>
+          ))
+        )}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel surroundings" })}
-        <div className={styles.filter}>
-          <input id="balcony" name="balcony" type="checkbox" />
-          <label htmlFor="balcony">Balcony</label>
-        </div>
+        {hotelFilters.map((data) =>
+          data.hotelSurroundings.map((surroundingsFilter) => (
+            <div key={surroundingsFilter} className={styles.filter}>
+              <input
+                id={surroundingsFilter}
+                name={surroundingsFilter}
+                type="checkbox"
+              />
+              <label htmlFor={surroundingsFilter}>{surroundingsFilter}</label>
+            </div>
+          ))
+        )}
       </div>
     </aside>
   )