chore: create a IntroSectionProps type

components/ContentType/HotelPage/HotelPage.tsx

@@ -19,21 +19,22 @@ export default async function HotelPage({ lang }: LangParams) {
     hotelId: hotelPageIdentifierData.hotel_page_id,
     language: lang,
   })
+  const hotelAttributes = hotelPageData.data.attributes
 
   return (
     <main className={styles.pageContainer}>
       <div className={styles.introContainer}>
         <IntroSection
-          hotelName={hotelPageData.data.attributes.name}
+          hotelName={hotelAttributes.name}
           hotelDescription={
-            hotelPageData.data.attributes.hotelContent.texts.descriptions.short
+            hotelAttributes.hotelContent.texts.descriptions.short
           }
-          location={hotelPageData.data.attributes.location}
+          location={hotelAttributes.location}
-          address={hotelPageData.data.attributes.address}
+          address={hotelAttributes.address}
-          tripAdvisor={hotelPageData.data.attributes.ratings.tripAdvisor}
+          tripAdvisor={hotelAttributes.ratings.tripAdvisor}
         />
         <AmenitiesList
-          detailedFacilities={hotelPageData.data.attributes.detailedFacilities}
+          detailedFacilities={hotelAttributes.detailedFacilities}
         />
       </div>
     </main>

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -7,9 +7,9 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
-import styles from "./introSection.module.css"
+import { IntroSectionProps } from "./types"
 
-import { HotelAddress, HotelData, HotelLocation } from "@/types/hotel"
+import styles from "./introSection.module.css"
 
 export default async function IntroSection({
   hotelName,
@@ -17,13 +17,7 @@ export default async function IntroSection({
   location,
   address,
   tripAdvisor,
-}: {
+}: IntroSectionProps) {
-  hotelName: HotelData["data"]["attributes"]["name"]
-  hotelDescription: HotelData["data"]["attributes"]["hotelContent"]["texts"]["descriptions"]["short"]
-  location: HotelLocation
-  address: HotelAddress
-  tripAdvisor: HotelData["data"]["attributes"]["ratings"]["tripAdvisor"]
-}) {
   const intl = await getIntl()
   const { formatMessage } = intl
   const { streetAddress, city } = address

components/ContentType/HotelPage/IntroSection/types.ts

@@ -0,0 +1,14 @@
+import {
+  HotelAddress,
+  HotelData,
+  HotelLocation,
+  HotelTripAdvisor,
+} from "@/types/hotel"
+
+export type IntroSectionProps = {
+  hotelName: HotelData["data"]["attributes"]["name"]
+  hotelDescription: HotelData["data"]["attributes"]["hotelContent"]["texts"]["descriptions"]["short"]
+  location: HotelLocation
+  address: HotelAddress
+  tripAdvisor: HotelTripAdvisor
+}

types/hotel.ts

@@ -6,3 +6,5 @@ export type HotelData = z.infer<typeof getHotelDataSchema>
 
 export type HotelAddress = HotelData["data"]["attributes"]["address"]
 export type HotelLocation = HotelData["data"]["attributes"]["location"]
+export type HotelTripAdvisor =
+  HotelData["data"]["attributes"]["ratings"]["tripAdvisor"]