feat: refactor of my stay

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx

@@ -0,0 +1,43 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./priceContainer.module.css"
+
+interface PriceContainerProps {
+  adultsText: string
+  childrenText: string
+  nightsText: string
+  price: string
+  text: string
+  totalChildren?: number
+}
+
+export default function PriceContainer({
+  adultsText,
+  childrenText,
+  nightsText,
+  price,
+  text,
+  totalChildren = 0,
+}: PriceContainerProps) {
+  return (
+    <div className={styles.priceContainer}>
+      <div className={styles.info}>
+        <Caption color="uiTextHighContrast" type="bold">
+          {text}
+        </Caption>
+        <Caption color="uiTextHighContrast">
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          {nightsText}, {adultsText}
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          {totalChildren > 0 ? `, ${childrenText}` : ""}
+        </Caption>
+      </div>
+      <div className={styles.price}>
+        <Subtitle color="burgundy" type="one">
+          {price}
+        </Subtitle>
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css

@@ -0,0 +1,22 @@
+.priceContainer {
+  display: flex;
+  padding: var(--Spacing-x2);
+  background-color: var(--Base-Background-Primary-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.info {
+  border-right: 1px solid var(--Base-Border-Subtle);
+  padding-right: var(--Spacing-x2);
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+}
+
+.price {
+  padding-left: var(--Spacing-x2);
+  display: flex;
+  align-items: center;
+}