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

feat(SW-880): refactor facility component

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-18 11:23:34 +01:00
committed by Joakim Jäderberg
parent 3f73699e73
commit 706c305844
6 changed files with 72 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css → components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css
View File

@@ -17,6 +17,6 @@
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-one-and-half);
} }
.body { .openingHours {
margin-top: var(--Spacing-x1); margin-top: var(--Spacing-x1);
} }

64
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx Normal file
View File

@@ -0,0 +1,64 @@
import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./facility.module.css"
import { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"
export default async function Facility({ data }: FacilityProps) {
const intl = await getIntl()
const imgUrl = data.content.images[0]?.imageSizes.medium
const imgAltText = data.content.images[0]?.metaData.altText
const facilityType = data.type
const ordinaryOpeningTimes = {
alwaysOpen: data.openingDetails.openingHours.ordinary.alwaysOpen,
openingTime: data.openingDetails.openingHours.ordinary.openingTime,
closingTime: data.openingDetails.openingHours.ordinary.closingTime,
}
const weekendOpeningTimes = {
alwaysOpen: data.openingDetails.openingHours.weekends.alwaysOpen,
openingTime: data.openingDetails.openingHours.weekends.openingTime,
closingTime: data.openingDetails.openingHours.weekends.closingTime,
}
return (
<div className={styles.content}>
{imgUrl && (
<Image
src={imgUrl}
alt={imgAltText || ""}
className={styles.image}
height={400}
width={200}
/>
)}
<div className={styles.information}>
<Subtitle color="burgundy" asChild type="one">
<Title level="h3">
{intl.formatMessage({ id: `${facilityType}` })}
</Title>
</Subtitle>
<div>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: " Opening Hours" })}
</Subtitle>
<div className={styles.openingHours}>
<Body color="uiTextHighContrast">
{ordinaryOpeningTimes.alwaysOpen
? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Mon-Fri" })} ${ordinaryOpeningTimes.openingTime}-${ordinaryOpeningTimes.closingTime}`}
</Body>
<Body color="uiTextHighContrast">
{weekendOpeningTimes.alwaysOpen
? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Sat-Sun" })} ${weekendOpeningTimes.openingTime}-${weekendOpeningTimes.closingTime}`}
</Body>
</div>
</div>
</div>
</div>
)
}

54
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx
View File

@@ -1,54 +0,0 @@
import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./facilityCard.module.css"
import type { FacilityCardProps } from "@/types/components/hotelPage/sidepeek/facilityCard"
export default async function FacilityCard({
imgUrl,
imgAltText,
facilityType,
ordinaryOpeningTimes,
weekendOpeningTimes,
}: FacilityCardProps) {
const intl = await getIntl()
return (
<div className={styles.content}>
{imgUrl && (
<Image
src={imgUrl}
alt={imgAltText || ""}
className={styles.image}
height={400}
width={200}
/>
)}
<div className={styles.information}>
<Subtitle color="burgundy" asChild type="one">
<Title level="h3">
{intl.formatMessage({ id: `${facilityType}` })}
</Title>
</Subtitle>
<div>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: " Opening Hours" })}
</Subtitle>
<Body color="uiTextHighContrast" className={styles.body}>
{ordinaryOpeningTimes.alwaysOpen
? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Mon-Fri" })} ${ordinaryOpeningTimes.openingTime}-${ordinaryOpeningTimes.closingTime}`}
</Body>
<Body color="uiTextHighContrast">
{weekendOpeningTimes.alwaysOpen
? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
: `${intl.formatMessage({ id: "Sat-Sun" })} ${weekendOpeningTimes.openingTime}-${weekendOpeningTimes.closingTime}`}
</Body>
</div>
</div>
</div>
)
}

11
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
View File

@@ -6,7 +6,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import FacilityCard from "./FacilityCard" import Facility from "./Facility"
import styles from "./wellnessAndExercise.module.css" import styles from "./wellnessAndExercise.module.css"
@@ -26,14 +26,7 @@ export default async function WellnessAndExerciseSidePeek({
> >
<div className={styles.wrapper}> <div className={styles.wrapper}>
{healthFacilities.map((facility) => ( {healthFacilities.map((facility) => (
<FacilityCard <Facility key={facility.type} data={facility} />
key={facility.type}
imgUrl={facility.content.images[0]?.imageSizes.medium}
imgAltText={facility.content.images[0]?.metaData.altText}
facilityType={facility.type}
ordinaryOpeningTimes={facility.openingDetails.openingHours.ordinary}
weekendOpeningTimes={facility.openingDetails.openingHours.weekends}
/>
))} ))}
</div> </div>
{buttonUrl && ( {buttonUrl && (

5
types/components/hotelPage/sidepeek/facility.ts Normal file
View File

@@ -0,0 +1,5 @@
import type { Hotel } from "@/types/hotel"
export type FacilityProps = {
data: Hotel["healthFacilities"][number]
}

19
types/components/hotelPage/sidepeek/facilityCard.ts
View File

@@ -1,19 +0,0 @@
export type FacilityCardProps = {
imgUrl: string
imgAltText: string
facilityType: string
ordinaryOpeningTimes: {
alwaysOpen: boolean
isClosed: boolean
openingTime?: string
closingTime?: string
sortOrder?: number
}
weekendOpeningTimes: {
alwaysOpen: boolean
isClosed: boolean
openingTime?: string
closingTime?: string
sortOrder?: number
}
}