67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import FilledHeartIcon from "@/components/Icons/FilledHeart"
|
|
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./sidePeekAccordion.module.css"
|
|
|
|
import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
|
import { IconName } from "@/types/components/icon"
|
|
|
|
export default function Parking({ parking }: ParkingProps) {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<AccordionItem
|
|
title={intl.formatMessage({ id: "Parking" })}
|
|
icon={IconName.Parking}
|
|
className={styles.parking}
|
|
variant="sidepeek"
|
|
>
|
|
{parking.map((p) => {
|
|
const title = `${p.type}${p.name ? ` (${p.name})` : ""}`
|
|
|
|
return (
|
|
<div key={p.name}>
|
|
<Subtitle type="two">{title}</Subtitle>
|
|
<ul className={styles.list}>
|
|
{p.address !== undefined && (
|
|
<li>
|
|
<FilledHeartIcon color="baseIconLowContrast" />$
|
|
{intl.formatMessage(
|
|
{ id: "Address: {address}" },
|
|
{
|
|
address: p.address,
|
|
}
|
|
)}
|
|
</li>
|
|
)}
|
|
{p.numberOfParkingSpots !== undefined && (
|
|
<li>
|
|
<FilledHeartIcon color="baseIconLowContrast" />
|
|
{intl.formatMessage(
|
|
{ id: "Number of parking spots: {number}" },
|
|
{ number: p.numberOfParkingSpots }
|
|
)}
|
|
</li>
|
|
)}
|
|
{p.numberOfChargingSpaces !== undefined && (
|
|
<li>
|
|
<FilledHeartIcon color="baseIconLowContrast" />
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Number of charging points for electric cars: {number}",
|
|
},
|
|
{ number: p.numberOfChargingSpaces }
|
|
)}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
)
|
|
})}
|
|
</AccordionItem>
|
|
)
|
|
}
|