diff --git a/components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css b/components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css index 517b59388..2cc7756e0 100644 --- a/components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css +++ b/components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css @@ -1,15 +1,50 @@ .card { - margin-left: 50px; - margin-top: 50px; + display: grid; + grid-template-columns: 1fr min(480px); min-height: 270px; max-width: 850px; background-color: var(--Base-Surface-Primary-Normal); - border: 1px solid black; + border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Small); } +.image { + height: auto; + min-height: 270px; + object-fit: cover; + overflow: hidden; + width: 100%; +} + .information { display: flex; flex-direction: column; + gap: var(--Spacing-x2); padding: var(--Spacing-x2); } + +.title { + display: flex; + flex-direction: column; + gap: var(--Spacing-x1); +} + +.description { + display: flex; + flex-direction: column; + gap: var(--Spacing-x1); + font-family: var(--typography-Caption-Regular-fontFamily); + font-size: var(--typography-Caption-Regular-fontSize); +} + +.labels { + display: flex; + flex-wrap: wrap; + gap: var(--Spacing-x1); +} + +.button { + display: flex; + align-items: center; + justify-content: space-between; +} diff --git a/components/HotelReservation/SelectHotel/HotelCard/index.tsx b/components/HotelReservation/SelectHotel/HotelCard/index.tsx index 576ac1a00..3b9190b7e 100644 --- a/components/HotelReservation/SelectHotel/HotelCard/index.tsx +++ b/components/HotelReservation/SelectHotel/HotelCard/index.tsx @@ -1,17 +1,48 @@ +import { ScandicLogoIcon } from "@/components/Icons" +import Image from "@/components/Image" +import Button from "@/components/TempDesignSystem/Button" +import Chip from "@/components/TempDesignSystem/Chip" +import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./hotelCard.module.css" -import { LangParams } from "@/types/params" +const chipValues = [ + "Free cancellation until 18:00", + "Breakfast included", + "Free WiFi", + "Pay at the hotel", +] export default function HotelCard() { return (
+ hotel image
- - Scandic - - Helsinki Hub +
+ + Helsinki Hub +
+
+ Kaisaniemenkatu 7, Helsinki + + Modern urban hotel in a impressive 1920s printing house in Helsinki + city centre. + +
+
+ {chipValues.map((value) => ( + {value} + ))} +
+
+ + Only 4 rooms left + + +
) diff --git a/components/Icons/ScandicLogo.tsx b/components/Icons/ScandicLogo.tsx new file mode 100644 index 000000000..896eb367e --- /dev/null +++ b/components/Icons/ScandicLogo.tsx @@ -0,0 +1,63 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function ScandicLogoIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + + ) +} diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx index d9b405d28..f6824bd1b 100644 --- a/components/Icons/index.tsx +++ b/components/Icons/index.tsx @@ -27,6 +27,7 @@ export { default as PersonIcon } from "./Person" export { default as PetsIcon } from "./Pets" export { default as PhoneIcon } from "./Phone" export { default as PlusCircleIcon } from "./PlusCircle" +export { default as ScandicLogoIcon } from "./ScandicLogo" export { default as RestaurantIcon } from "./Restaurant" export { default as TshirtWashIcon } from "./TshirtWash" export { default as WifiIcon } from "./Wifi"