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

feat(SW-252): wrap image for layout

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-27 09:38:01 +02:00
parent bb820afd0e
commit 8c4ade719f
4 changed files with 55 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/HotelReservation/HotelCard/index.tsx
View File

@@ -4,6 +4,7 @@ import {
PriceTagIcon,
ScandicLogoIcon,
} from "@/components/Icons"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
@@ -26,20 +27,32 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
return (
<article className={styles.card}>
<Image
src={hotel.hotelContent.images.imageSizes.large}
alt={hotel.hotelContent.images.metaData.altText}
width={300}
height={200}
className={styles.image}
/>
<div className={styles.imageContainer}>
<Image
src={hotel.hotelContent.images.imageSizes.large}
alt={hotel.hotelContent.images.metaData.altText}
width={300}
height={200}
className={styles.image}
/>
<div className={styles.tripAdvisor}>
<Chip intent="primary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="white" />
{hotel.ratings?.tripAdvisor.rating}
</Chip>
</div>
</div>
<header className={styles.header}>
<ScandicLogoIcon color="red" className={styles.logo} />
<ScandicLogoIcon color="red" />
<Title as="h4" textTransform="capitalize">
{hotel.name}
</Title>
<Footnote color="textMediumContrast">{`${hotel.address.streetAddress}, ${hotel.address.city}`}</Footnote>
<Footnote color="textMediumContrast">{`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}</Footnote>
<Footnote color="textMediumContrast" className={styles.adress}>
{`${hotel.address.streetAddress}, ${hotel.address.city}`}
</Footnote>
<Footnote color="textMediumContrast">
{`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
</Footnote>
</header>
<section className={styles.hotel}>
<div className={styles.facilities}>
@@ -60,28 +73,31 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
</section>
<section className={styles.prices}>
<div>
<Chip intent="sublte" className={styles.public}>
<PriceTagIcon width={15} height={15} />
<Chip intent="primary" className={styles.public}>
<PriceTagIcon color="white" width={15} height={15} />
{intl.formatMessage({ id: "Public price from" })}
</Chip>
<Caption color="textMediumContrast">2820 SEK / night</Caption>
<Footnote color="textMediumContrast">approx 280 eur</Footnote>
</div>
<div>
<Chip intent="pale" className={styles.member}>
<PriceTagIcon width={15} height={15} />
<Chip intent="primary" className={styles.member}>
<PriceTagIcon color="white" width={15} height={15} />
{intl.formatMessage({ id: "Member price from" })}
</Chip>
<Caption color="textMediumContrast">2820 SEK / night</Caption>
<Footnote color="textMediumContrast">approx 280 eur</Footnote>
</div>
<Button
asChild
theme="base"
intent="tertiary"
size="small"
className={styles.button}
>
{intl.formatMessage({ id: "See rooms" })}
<Link href="#" color="none">
{intl.formatMessage({ id: "See rooms" })}
</Link>
</Button>
</section>
</article>