Refactor contact module according to design

src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx

@@ -1,5 +1,7 @@
 import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
 
+import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
 import Text from "src/components/text/Text";
 import { fetchEmployeesByEmails } from "src/utils/employees";
 import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
@@ -8,9 +10,7 @@ import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
 
 import styles from "./contactInformation.module.css";
-import ContactSelector, {
-  ContactByLocationMap,
-} from "./contactSelector/ContactSelector";
+import ContactSelector, { ContactByLocationMap } from "./ContactSelector";
 
 interface ContactInformationProps {
   language: string;
@@ -54,21 +54,30 @@ export default async function ContactInformation({
   );
   const t = await getTranslations("contact_information");
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.content}>
-        <div className={styles.titleSection}>
-          <Text type={"bodyXl"}>{t("help")}</Text>
-          <Text type="bodyBig">{t("contact_sale")} </Text>
+    <>
+      <section className={styles.contactBox}>
+        <div
+          className={`${styles.contactBox__inner} ${styles["contactBox__inner--light"]}`}
+        >
+          <div className={styles.textContent}>
+            <Text type="h3" as="h2">
+              {t("help")}
+            </Text>
+            <Text type="bodyBig">{t("contact_sale")} </Text>
+          </div>
+          <div className={styles.contactSelectorWrapper}>
+            <Suspense fallback={<EmployeeCardSkeleton background={"light"} />}>
+              <ContactSelector
+                language={language}
+                locations={locationsWithContact}
+                contactByLocation={contactByLocation}
+                employeePageSlug={employeePageSlug}
+                background={"light"}
+              />
+            </Suspense>
+          </div>
         </div>
-        <div className={styles.contactSection}>
-          <ContactSelector
-            language={language}
-            locations={locationsWithContact}
-            contactByLocation={contactByLocation}
-            employeePageSlug={employeePageSlug}
-          />
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
   );
 }

src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+
+import EmployeeCard from "src/components/employeeCard/EmployeeCard";
+import { Tag } from "src/components/tag";
+import { ChewbaccaEmployee } from "src/types/employees";
+import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
+
+import styles from "./contactInformation.module.css";
+
+export type ContactByLocationMap = {
+  [locationId: string]: ChewbaccaEmployee;
+};
+
+export interface ContactSelectorProps {
+  language: string;
+  locations: CompanyLocation[];
+  contactByLocation: ContactByLocationMap;
+  employeePageSlug?: string;
+  background: "dark" | "light";
+}
+
+export default function ContactSelector({
+  language,
+  locations,
+  contactByLocation,
+  employeePageSlug,
+  background = "light",
+}: ContactSelectorProps) {
+  const locationIds = Object.keys(contactByLocation);
+
+  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
+    locationIds[0],
+  );
+
+  if (locationIds.length === 0) {
+    return;
+  }
+
+  const selectedOrDefaultLocationId = selectedLocationId ?? locationIds[0];
+  console.log(selectedLocationId);
+
+  return (
+    <>
+      <div className={styles.contactSelector}>
+        <div className={styles.tagList} role="tabList">
+          {locations.map((location) => (
+            <Tag
+              key={location._id}
+              type="button"
+              role="tab"
+              background={background}
+              aria-selected={selectedLocationId === location._id}
+              aria-controls={`panel-${location._id}`}
+              id={`tab-${location._id}`}
+              active={selectedLocationId === location._id}
+              onClick={() => setSelectedLocationId(location._id)}
+              text={location.companyLocationName}
+            />
+          ))}
+        </div>
+        <div className={styles.employeeCard}>
+          <div>
+            <EmployeeCard
+              language={language}
+              employee={contactByLocation[selectedOrDefaultLocationId]}
+              employeePageSlug={employeePageSlug}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/customerCases/customerCase/contactInformation/contactInformation.module.css

@@ -1,32 +1,74 @@
-.wrapper {
-  display: flex;
+.contactBox {
+  max-width: var(--max-content-width-large);
+}
+
+.contactBox__inner {
+  --_contactBox__background: var(--background-bg-dark);
+  --_contactBox__color: var(--text-primary-light);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+
+  padding: 1.5rem 3rem;
   flex-direction: column;
-  margin: 4rem 0;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: var(--Padding-l, 48px);
+  align-self: stretch;
 
-  @media (min-width: 1024px) {
-    align-items: center;
-  }
+  border-radius: var(--radius-small);
+  background: var(--_contactBox__background);
+  color: var(--_contactBox__color);
+}
+.contactBox__inner--light {
+  --_contactBox__background: var(--background-bg-light-secondary);
+  --_contactBox__color: var(--text-primary);
 }
 
-.content {
+.textContent {
+  height: 100%;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 1rem;
-  max-width: 960px;
 
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    gap: 2rem;
-  }
+  justify-content: flex-end;
 }
 
-.titleSection {
+.contactSelectorWrapper {
+  container-type: inline-size;
+  container-name: contactSelectorWrapper;
+}
+
+.contactSelector {
+  display: flex;
+  gap: 1rem;
+}
+
+.tagList {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+
+  align-items: flex-start;
+  min-width: 120px;
 }
 
-.contactSection {
-  display: flex;
-  gap: 1.5rem;
+.employeeCard {
+  flex: 1;
+}
+
+@media (max-width: 400px) {
+  .contactBox__inner {
+    padding: 1rem 1rem;
+  }
+}
+
+@container contactSelectorWrapper (max-width: 350px) {
+  .contactSelector {
+    flex-direction: column;
+  }
+
+  .tagList {
+    flex-direction: row;
+  }
 }

src/components/customerCases/customerCase/customerCase.module.css

@@ -1,13 +1,8 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  margin: 4rem 2rem;
   align-items: center;
   justify-content: center;
-
-  @media (max-width: 1024px) {
-    margin: 2rem 1rem;
-  }
 }
 
 .content {