feat: merge stores, fix auto navigation, split summary

2024-11-12 15:30:59 +01:00
parent a69d14ff61
commit ccb15593ea
82 changed files with 2149 additions and 1842 deletions
@@ -0,0 +1,15 @@
+.actions {
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  grid-area: actions;
+}
+
+@media screen and (min-width: 768px) {
+  .actions {
+    gap: var(--Spacing-x3);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    justify-content: flex-start;
+  }
+}
@@ -0,0 +1,25 @@
+import { CalendarAddIcon, DownloadIcon, EditIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import { getIntl } from "@/i18n"
+
+import styles from "./actions.module.css"
+
+export default async function Actions() {
+  const intl = await getIntl()
+  return (
+    <div className={styles.actions}>
+      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+        <CalendarAddIcon />
+        {intl.formatMessage({ id: "Add to calendar" })}
+      </Button>
+      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+        <EditIcon />
+        {intl.formatMessage({ id: "Manage booking" })}
+      </Button>
+      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
+        <DownloadIcon />
+        {intl.formatMessage({ id: "Download invoice" })}
+      </Button>
+    </div>
+  )
+}
@@ -1,12 +1,12 @@
 .header,
 .hgroup {
-  align-items: center;
  display: flex;
  flex-direction: column;
 }

 .header {
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
+  grid-area: header;
 }

 .hgroup {
@@ -14,5 +14,5 @@
 }

 .body {
-  max-width: 560px;
+  max-width: 720px;
 }
@@ -1,11 +1,12 @@
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"

 import Link from "@/components/TempDesignSystem/Link"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"

+import Actions from "./Actions"
+
 import styles from "./header.module.css"

 import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
@@ -30,31 +31,15 @@ export default async function Header({
  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
-        <BiroScript color="red" tilted="small" type="two">
-          {intl.formatMessage({ id: "See you soon!" })}
-        </BiroScript>
-        <Title
-          as="h4"
-          color="red"
-          textAlign="center"
-          textTransform="regular"
-          type="h2"
-        >
+        <Title as="h2" color="red" textTransform="uppercase" type="h2">
          {intl.formatMessage({ id: "booking.confirmation.title" })}
        </Title>
-        <Title
-          as="h4"
-          color="burgundy"
-          textAlign="center"
-          textTransform="regular"
-          type="h1"
-        >
+        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
          {hotel.name}
        </Title>
      </hgroup>
-      <Body className={styles.body} textAlign="center">
-        {text}
-      </Body>
+      <Body className={styles.body}>{text}</Body>
+      <Actions />
    </header>
  )
 }