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

feat: add placeholder data

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-07-05 14:20:51 +02:00
parent c21fa39fe5
commit 2f1f81530a
4 changed files with 80 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/HotelReservation/SelectHotel/HotelCard/data.ts Normal file
View File

@@ -0,0 +1,10 @@
export interface HotelCardData {
hotel: {
name: string
address: string
description: string
rooms: string
button: string
label: string[]
}
}

28
components/HotelReservation/SelectHotel/HotelCard/index.tsx
View File

@@ -5,34 +5,26 @@ import Chip from "@/components/TempDesignSystem/Chip"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { HotelCardData } from "./data"
import styles from "./hotelCard.module.css"
const chipValues = [
"Free cancellation until 18:00",
"Breakfast included",
"Free WiFi",
"Pay at the hotel",
]
export default function HotelCard() {
export default function HotelCard({ hotel }: HotelCardData) {
return (
<div className={styles.card}>
<Image src="" alt="hotel image" className={styles.image} />
<div className={styles.information}>
<div className={styles.title}>
<ScandicLogoIcon color="red" />
<Title as="h4">Helsinki Hub</Title>
<Title as="h4">{hotel.name}</Title>
</div>
<div className={styles.description}>
<span>Kaisaniemenkatu 7, Helsinki</span>
<span>
Modern urban hotel in a impressive 1920s printing house in Helsinki
city centre.
</span>
<span>{hotel.address}</span>
<span>{hotel.description}</span>
</div>
<div className={styles.labels}>
{chipValues.map((value) => (
<Chip key={value}>{value}</Chip>
{hotel.label.map((chip, index) => (
<Chip key={`chip-${index}`}>{chip}</Chip>
))}
</div>
<div className={styles.book}>
@@ -42,10 +34,10 @@ export default function HotelCard() {
size="small"
className={styles.button}
>
Book from 1549 SEK/night
{hotel.button}
</Button>
<Body color="burgundy">
<span>Only 4 rooms left</span>
<span>{hotel.rooms}</span>
</Body>
</div>
</div>