scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pass filters as prop

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-05 14:36:27 +02:00
parent ebfe4d45dc
commit a48019a6a0
6 changed files with 35 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -1,6 +1,6 @@
.card {
display: grid;
background-color: var(--Base-Surface-Primary-Normal);
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small);
min-height: 460px;
@@ -56,12 +56,14 @@
@media screen and (min-width: 850px) {
.card {
grid-template-columns: 1fr min(480px);
min-height: 270px;
height: 285px;
min-height: 285px;
width: 850px;
max-width: 850px;
}
.image {
min-height: 270px;
min-height: 285px;
}
.booking {

56
components/HotelReservation/SelectHotel/HotelFilter/index.tsx
View File

@@ -4,53 +4,39 @@ import { getIntl } from "@/i18n"
import styles from "./hotelFilter.module.css"
export default async function HotelFilter() {
import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
export default async function HotelFilter({ filter }: HotelFilterProps) {
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" })}
{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>
))
)}
{filter[0].filter.roomFacilities.map((filter, index) => (
<div key={index} className={styles.filter}>
<input id={filter} name={filter} type="checkbox" />
<label htmlFor={filter}>{filter}</label>
</div>
))}
</div>
<div className={styles.facilities}>
{formatMessage({ id: "Hotel facilities" })}
{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>
))
)}
{filter[0].filter.hotelFacilities.map((filter, index) => (
<div key={index} className={styles.filter}>
<input id={filter} name={filter} type="checkbox" />
<label htmlFor={filter}>{filter}</label>
</div>
))}
</div>
<div className={styles.facilities}>
{formatMessage({ id: "Hotel surroundings" })}
{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>
))
)}
{filter[0].filter.hotelSurroundings.map((filter, index) => (
<div key={index} className={styles.filter}>
<input id={filter} name={filter} type="checkbox" />
<label htmlFor={filter}>{filter}</label>
</div>
))}
</div>
</aside>
)