feat: Add tab navigation to hotel page

components/TempDesignSystem/Link/index.tsx

@@ -10,6 +10,7 @@ import { linkVariants } from "./variants"
 import type { LinkProps } from "./link"
 
 export default function Link({
+  active,
   className,
   color,
   href,
@@ -23,10 +24,12 @@ export default function Link({
   ...props
 }: LinkProps) {
   const currentPageSlug = usePathname()
-  let isActive = currentPageSlug === href
+  let isActive = active || currentPageSlug === href
+
   if (partialMatch && !isActive) {
     isActive = currentPageSlug === href
   }
+
   const classNames = linkVariants({
     active: isActive,
     className,

components/TempDesignSystem/Link/link.module.css

@@ -93,6 +93,17 @@
   background-color: var(--Scandic-Peach-20);
 }
 
+.tab {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  padding: var(--Spacing-x2) var(--Spacing-x0);
+  color: var(--Base-Text-High-contrast);
+  text-decoration: none;
+}
+
+.tab.active {
+  border-bottom: 2px solid var(--Scandic-Brand-Burgundy);
+}
+
 .black {
   color: #000;
 }

components/TempDesignSystem/Link/variants.ts

@@ -31,6 +31,7 @@ export const linkVariants = cva(styles.link, {
       myPageMobileDropdown: styles.myPageMobileDropdown,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
+      tab: styles.tab,
     },
   },
   defaultVariants: {