feat: add basic styling to checkbox

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

@@ -0,0 +1,39 @@
+.container {
+  min-width: 272px;
+}
+
+.facilities {
+  flex-direction: column;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  margin: var(--Spacing-x3) 0;
+}
+
+.filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(min-content, max-content));
+  gap: var(--Spacing-x-one-and-half);
+  align-items: center;
+}
+
+.filter:first-child {
+  margin-top: var(--Spacing-x1);
+}
+
+.filter input[type="checkbox"] {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+  background-color: var(--Base-Surface-Primary-Normal);
+  border: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
+}
+
+.filter input[type="checkbox"]::before {
+  visibility: hidden;
+}
+
+.filter input[type="checkbox"]:checked::before {
+  visibility: visible;
+}

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -0,0 +1,22 @@
+import { getIntl } from "@/i18n"
+
+import styles from "./hotelFilter.module.css"
+
+export default async function HotelFilter() {
+  const { formatMessage } = await getIntl()
+  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>
+      </div>
+      <div className={styles.facilities}>
+        {formatMessage({ id: "Hotel facilities" })}
+        <div className={styles.filter}></div>
+      </div>
+    </aside>
+  )
+}