feat(SW-1012): Started implementing restaurant data
This commit is contained in:
Erik Tiekstra
committed by
Fredrik Thorsson
Fredrik Thorsson
parent
05006506f0
commit
63a77b215d
@@ -0,0 +1,40 @@
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import { RestaurantBarOpeningHoursProps } from "@/types/components/hotelPage/sidepeek/restaurantBar"
|
||||
import { RestaurantOpeningHoursDay } from "@/types/hotel"
|
||||
|
||||
export default function OpeningHours({
|
||||
openingHours,
|
||||
alternateOpeningHours,
|
||||
}: RestaurantBarOpeningHoursProps) {
|
||||
const days: (keyof typeof openingHours)[] = [
|
||||
"monday",
|
||||
"tuesday",
|
||||
"wednesday",
|
||||
"thursday",
|
||||
"friday",
|
||||
"saturday",
|
||||
"sunday",
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Body textTransform="bold" asChild>
|
||||
<h5>{openingHours.name}</h5>
|
||||
</Body>
|
||||
{days.map((day) => {
|
||||
const today = openingHours[day] as RestaurantOpeningHoursDay
|
||||
return today ? (
|
||||
<Body color="uiTextHighContrast">
|
||||
{day}:{" "}
|
||||
{today.isClosed
|
||||
? "Closed"
|
||||
: today.alwaysOpen
|
||||
? "Always open"
|
||||
: `${today.openingTime}-${today.closingTime}`}
|
||||
</Body>
|
||||
) : null
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export default function RestaurantSidepeek() {}
|
||||
@@ -0,0 +1,101 @@
|
||||
import NextLink from "next/link"
|
||||
|
||||
import { OpenInNewSmallIcon } from "@/components/Icons"
|
||||
import Image from "@/components/Image"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
import Link from "@/components/TempDesignSystem/Link"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
|
||||
import OpeningHours from "../OpeningHours"
|
||||
|
||||
import styles from "./restaurantBarItem.module.css"
|
||||
|
||||
import { RestaurantBarItemProps } from "@/types/components/hotelPage/sidepeek/restaurantBar"
|
||||
|
||||
export default function RestaurantBarItem({
|
||||
restaurant,
|
||||
}: RestaurantBarItemProps) {
|
||||
const { name, openingDetails, menus } = restaurant
|
||||
const { images, bookTableUrl } = restaurant.content
|
||||
const visibleImages = restaurant.content.images.slice(0, 2)
|
||||
const imageWidth = images.length === 2 ? 240 : 496
|
||||
// TODO: Not defined where this should lead.
|
||||
const ctaUrl = ""
|
||||
|
||||
console.log({ bookTableUrl: bookTableUrl })
|
||||
return (
|
||||
<div className={styles.restaurantBarItem}>
|
||||
<div className={styles.stickyHeading}>
|
||||
<Subtitle type="one" color="burgundy" asChild>
|
||||
<h3>{name}</h3>
|
||||
</Subtitle>
|
||||
</div>
|
||||
<div className={styles.imageWrapper}>
|
||||
{visibleImages.map(({ metaData, imageSizes }) => (
|
||||
<Image
|
||||
key={imageSizes.tiny}
|
||||
src={imageSizes.tiny}
|
||||
alt={metaData.altText}
|
||||
width={imageWidth}
|
||||
height={240}
|
||||
className={styles.image}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{openingDetails.length ? (
|
||||
<div className={styles.content}>
|
||||
<Subtitle type="two" asChild>
|
||||
<h4>Opening Hours</h4>
|
||||
</Subtitle>
|
||||
{openingDetails.map((details) => (
|
||||
<OpeningHours
|
||||
key={details.openingHours.name}
|
||||
openingHours={details.openingHours}
|
||||
alternateOpeningHours={details.alternateOpeningHours}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{menus.length ? (
|
||||
<div className={styles.content}>
|
||||
<Subtitle type="two" asChild>
|
||||
<h4>Menus</h4>
|
||||
</Subtitle>
|
||||
<ul className={styles.menuList}>
|
||||
{menus.map(({ name, url }) => (
|
||||
<li key={name}>
|
||||
<Link
|
||||
href={url}
|
||||
target="_blank"
|
||||
textDecoration="underline"
|
||||
variant="icon"
|
||||
color="baseTextMediumContrast"
|
||||
className={styles.menuLink}
|
||||
>
|
||||
{name}
|
||||
<OpenInNewSmallIcon />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
) : null}
|
||||
{bookTableUrl || ctaUrl ? (
|
||||
<div className={styles.ctaWrapper}>
|
||||
{bookTableUrl ? (
|
||||
<Button fullWidth theme="base" intent="primary" asChild>
|
||||
<a href={bookTableUrl} target="_blank">
|
||||
Book a table online
|
||||
</a>
|
||||
</Button>
|
||||
) : null}
|
||||
{ctaUrl ? (
|
||||
<Button fullWidth theme="base" intent="secondary" asChild>
|
||||
<NextLink href={ctaUrl}>Discover {name}</NextLink>
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.restaurantBarItem {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.stickyHeading {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
/* Hack to make it look like the heading has a background which covers the top of the sidepeek */
|
||||
.stickyHeading::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin-top: calc(-1 * var(--Spacing-x4));
|
||||
background-color: var(--Base-Background-Primary-Normal);
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: -16px;
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.menuList {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.ctaWrapper {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
@@ -4,6 +4,8 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
||||
import { getIntl } from "@/i18n"
|
||||
import { getLang } from "@/i18n/serverContext"
|
||||
|
||||
import RestaurantBarItem from "./RestaurantBarItem"
|
||||
|
||||
import styles from "./restaurantBar.module.css"
|
||||
|
||||
import type { RestaurantBarSidePeekProps } from "@/types/components/hotelPage/sidepeek/restaurantBar"
|
||||
@@ -12,7 +14,6 @@ export default async function RestaurantBarSidePeek({
|
||||
restaurants,
|
||||
}: RestaurantBarSidePeekProps) {
|
||||
const lang = getLang()
|
||||
|
||||
const intl = await getIntl()
|
||||
|
||||
return (
|
||||
@@ -22,8 +23,8 @@ export default async function RestaurantBarSidePeek({
|
||||
>
|
||||
<div className={styles.content}>
|
||||
{restaurants.map((restaurant) => (
|
||||
<div key={restaurant.id}>
|
||||
<h3>{restaurant.name}</h3>
|
||||
<div key={restaurant.id} className={styles.item}>
|
||||
<RestaurantBarItem restaurant={restaurant} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x4);
|
||||
}
|
||||
|
||||
.item:not(:last-child) {
|
||||
border-bottom: 1px solid var(--Base-Border-Subtle);
|
||||
padding-bottom: var(--Spacing-x4);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user