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

feat: add scandic icon

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-07-04 14:43:31 +02:00
parent 85232401c8
commit 81034c8f2f
4 changed files with 138 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css
View File

@@ -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;
}

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

@@ -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 (
<div className={styles.card}>
<Image src="" alt="hotel image" className={styles.image} />
<div className={styles.information}>
<Title as="h5" color="red">
Scandic
</Title>
<Title as="h4">Helsinki Hub</Title>
<div className={styles.title}>
<ScandicLogoIcon color="red" />
<Title as="h4">Helsinki Hub</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>
</div>
<div className={styles.labels}>
{chipValues.map((value) => (
<Chip key={value}>{value}</Chip>
))}
</div>
<div className={styles.button}>
<Body color="burgundy">
<span>Only 4 rooms left</span>
</Body>
<Button theme="base" intent="primary" size="small">
Book from 1549 SEK/night
</Button>
</div>
</div>
</div>
)