feat(SW-914): add button

components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}

components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx

@@ -1,5 +1,19 @@
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./amenity.module.css"
+
 import type { AmenityProps } from "@/types/components/hotelPage/sidepeek/amenity"
 
-export default function Amenity({ title }: AmenityProps) {
+export default function Amenity({ name, buttonUrl }: AmenityProps) {
-  return <div>{title}</div>
+  return (
+    <div className={styles.wrapper}>
+      <div>{name}</div>
+      {buttonUrl && (
+        <Button theme="base" intent="primary" fullWidth asChild>
+          <Link href={buttonUrl}>{name}</Link>
+        </Button>
+      )}
+    </div>
+  )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx

@@ -25,14 +25,14 @@ export default async function AmenitiesSidepeek({
       <>
         <Accordion>
           {amenitiesList.map((amenity) => {
-            const iconName = mapFacilityToIconName(amenity.id)
+            const name = mapFacilityToIconName(amenity.id)
             return (
               <AccordionItem
                 key={amenity.name}
                 title={amenity.name}
-                icon={IconName[iconName]}
+                icon={IconName[name]}
               >
-                <Amenity title={amenity.name} />
+                <Amenity name={amenity.name} buttonUrl="#" />
               </AccordionItem>
             )
           })}

types/components/hotelPage/sidepeek/amenity.ts

@@ -1,3 +1,4 @@
 export type AmenityProps = {
-  title: string
+  name: string
+  buttonUrl?: string
 }