fix: moved typings to typings folder and removed fallback variable values. Also fixed so only RoomCard is client component
This commit is contained in:
Erik Tiekstra
committed by
Chuma McPhoy
Chuma McPhoy
parent
7eea7aa400
commit
ea8165bec9
@@ -1,39 +1,54 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { ImageIcon } from "@/components/Icons"
|
||||
import Image from "@/components/Image"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
|
||||
import { RoomCardProps } from "./roomCard"
|
||||
|
||||
import styles from "./roomCard.module.css"
|
||||
|
||||
import { RoomCardProps } from "@/types/components/hotelPage/roomCard"
|
||||
|
||||
export function RoomCard({
|
||||
badgeText,
|
||||
title,
|
||||
badgeTextTransKey,
|
||||
id,
|
||||
images,
|
||||
subtitle,
|
||||
cta,
|
||||
image,
|
||||
imageCount,
|
||||
imageClick,
|
||||
title,
|
||||
}: RoomCardProps) {
|
||||
const { formatMessage } = useIntl()
|
||||
const mainImage = images[0]
|
||||
|
||||
function handleImageClick() {
|
||||
// TODO: Implement opening of a model with carousel
|
||||
console.log("Image clicked: ", id)
|
||||
}
|
||||
|
||||
function handleRoomCtaClick() {
|
||||
// TODO: Implement opening side-peek component with room details
|
||||
console.log("Room CTA clicked: ", id)
|
||||
}
|
||||
|
||||
return (
|
||||
<article className={styles.roomCard}>
|
||||
<button className={styles.imageWrapper} onClick={imageClick}>
|
||||
{badgeText && <span className={styles.badge}>{badgeText}</span>}
|
||||
{imageCount && (
|
||||
<span className={styles.imageCount}>
|
||||
<ImageIcon color="white" />
|
||||
{imageCount}
|
||||
<button className={styles.imageWrapper} onClick={handleImageClick}>
|
||||
{badgeTextTransKey && (
|
||||
<span className={styles.badge}>
|
||||
{formatMessage({ id: badgeTextTransKey })}
|
||||
</span>
|
||||
)}
|
||||
<span className={styles.imageCount}>
|
||||
<ImageIcon color="white" />
|
||||
{images.length}
|
||||
</span>
|
||||
<Image
|
||||
className={styles.image}
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
height={image.height}
|
||||
width={image.width}
|
||||
src={mainImage.src}
|
||||
alt={mainImage.alt}
|
||||
height={mainImage.height}
|
||||
width={mainImage.width}
|
||||
/>
|
||||
</button>
|
||||
<div className={styles.content}>
|
||||
@@ -43,8 +58,8 @@ export function RoomCard({
|
||||
</Title>
|
||||
<Body color="grey">{subtitle}</Body>
|
||||
</div>
|
||||
<button className={styles.cta} onClick={cta.callback}>
|
||||
{cta.text}
|
||||
<button className={styles.cta} onClick={handleRoomCtaClick}>
|
||||
{formatMessage({ id: "View room" })}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
background-color: var(--Scandic-Blue-100);
|
||||
padding: var(--Spacing-x-half) var(--Spacing-x1);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
color: var(--Tertiary-Dark-On-Surface-Text, #fff0c2);
|
||||
color: var(--Tertiary-Dark-On-Surface-Text);
|
||||
text-transform: uppercase;
|
||||
font-family: var(--typography-Title-5-fontFamily);
|
||||
font-size: var(--typography-Footnote-Regular-fontSize);
|
||||
@@ -26,12 +26,8 @@
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
align-items: center;
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--Scandic-Beige-80) 80%,
|
||||
transparent
|
||||
);
|
||||
color: white;
|
||||
background-color: var(--Scandic-Opacity-Almost-Black-60);
|
||||
color: var(--Scandic-Opacity-White-100);
|
||||
padding: var(--Spacing-x-half) var(--Spacing-x1);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
}
|
||||
@@ -67,7 +63,7 @@
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--UI-Text-Placeholder, #787472);
|
||||
color: var(--UI-Text-Placeholder);
|
||||
}
|
||||
|
||||
.cta {
|
||||
@@ -79,12 +75,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
color: var(--Base-Text-Medium-contrast, #8f4350);
|
||||
color: var(--Base-Text-Medium-contrast);
|
||||
font-family: var(--typography-Body-Bold-fontFamily);
|
||||
font-size: var(--typography-Body-Bold-fontSize);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.cta:hover {
|
||||
color: var(--Base-Text-High-contrast, #4d001b);
|
||||
color: var(--Base-Text-High-contrast);
|
||||
}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import { ImageProps } from "next/image"
|
||||
|
||||
interface RoomCardCtaProps {
|
||||
text: string
|
||||
callback: () => void
|
||||
}
|
||||
|
||||
export interface RoomCardProps {
|
||||
image: ImageProps
|
||||
imageCount: number
|
||||
imageClick: () => void
|
||||
title: string
|
||||
subtitle: string
|
||||
cta: RoomCardCtaProps
|
||||
badgeText?: string | null
|
||||
}
|
||||
@@ -1,56 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { RoomCard } from "./RoomCard"
|
||||
import { RoomsProps } from "./rooms"
|
||||
|
||||
import styles from "./rooms.module.css"
|
||||
|
||||
export function Rooms({ rooms }: RoomsProps) {
|
||||
const { formatMessage } = useIntl()
|
||||
import { RoomsProps } from "@/types/components/hotelPage/rooms"
|
||||
|
||||
export function Rooms({ rooms }: RoomsProps) {
|
||||
// TODO: Typings should be adjusted to match the actual data structure
|
||||
const mappedRooms = rooms.map((room) => ({
|
||||
id: room.id,
|
||||
image: room.images[0],
|
||||
imageCount: room.images.length,
|
||||
images: room.images,
|
||||
title: room.title,
|
||||
subtitle: room.subtitle,
|
||||
popularChoice: room.popularChoice,
|
||||
}))
|
||||
|
||||
function handleImageClick(id: string) {
|
||||
// TODO: Implement opening of a model with carousel
|
||||
console.log("Image clicked: ", id)
|
||||
}
|
||||
|
||||
function handleRoomCtaClick(id: string) {
|
||||
// TODO: Implement opening side-peek component with room details
|
||||
console.log("Room CTA clicked: ", id)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={styles.cardContainer}>
|
||||
{mappedRooms.map(
|
||||
({ id, image, imageCount, title, subtitle, popularChoice }) => (
|
||||
<RoomCard
|
||||
key={id}
|
||||
image={image}
|
||||
imageCount={imageCount}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
badgeText={
|
||||
popularChoice ? formatMessage({ id: "Popular choice" }) : null
|
||||
}
|
||||
imageClick={() => handleImageClick(id)}
|
||||
cta={{
|
||||
text: formatMessage({ id: "See room details" }),
|
||||
callback: () => handleRoomCtaClick(id),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
{mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
|
||||
<RoomCard
|
||||
key={id}
|
||||
id={id}
|
||||
images={images}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
badgeTextTransKey={popularChoice ? "Popular choice" : null}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { RoomsProps } from "./Rooms/rooms"
|
||||
import { RoomsProps } from "../../../types/components/hotelPage/rooms"
|
||||
|
||||
export const MOCK_ROOMS: RoomsProps["rooms"] = [
|
||||
{
|
||||
|
||||
9
types/components/hotelPage/roomCard.ts
Normal file
9
types/components/hotelPage/roomCard.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { ImageProps } from "next/image"
|
||||
|
||||
export interface RoomCardProps {
|
||||
id: string
|
||||
images: ImageProps[]
|
||||
title: string
|
||||
subtitle: string
|
||||
badgeTextTransKey?: string | null
|
||||
}
|
||||
Reference in New Issue
Block a user