feat: adds link to employees on employee page

messages/en.json

@@ -46,7 +46,6 @@
       "master": "Master"
     }
   },
-
   "employee_card": {
     "show": "Showing",
     "of": "out of",
@@ -59,7 +58,8 @@
     "Prosjekt- og produktledelse": "Project and product management",
     "Strategi": "Strategy",
     "field": "Field",
-    "showMore": "Show all"
+    "showMore": "Show all",
+    "see_all_employees": "See all people"
   },
   "job_posting": {
     "office": "Office",

messages/no.json

@@ -58,7 +58,8 @@
     "Prosjekt- og produktledelse": "Prosjekt- og produktledelse",
     "Strategi": "Strategi",
     "field": "Fag",
-    "showMore": "Vis alle"
+    "showMore": "Vis alle",
+    "see_all_employees": "Se alle folk"
   },
   "job_posting": {
     "office": "Kontor",

messages/se.json

@@ -58,7 +58,8 @@
     "Ledelse": "Ledelse",
     "Strategi": "Strategi",
     "field": "Fält",
-    "showMore": "Vis alla"
+    "showMore": "Vis alla",
+    "see_all_employees": "Se alla folk"
   },
   "job_posting": {
     "office": "Kontor",

src/app/(main)/[locale]/[...path]/page.tsx

@@ -138,7 +138,9 @@ async function Page({ params }: Props) {
                 <Legal document={queryResponse.data} />
               );
             case "employee":
-              return <EmployeePage employee={queryResponse} />;
+              return (
+                <EmployeePage employee={queryResponse} language={locale} />
+              );
           }
           return Page404;
         })()}

src/components/employeePage/EmployeePage.tsx

@@ -1,19 +1,26 @@
-import Image from "next/image";
-import { useTranslations } from "next-intl";
-
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
 
+import { getTranslations } from "next-intl/server";
+import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
+import { loadStudioQuery } from "studio/lib/store";
+import { SanityImage } from "../image/SanityImage";
+import LinkButton from "../linkButton/LinkButton";
 import styles from "./employeePage.module.css";
 
 export interface EmployeePageProps {
   employee: ChewbaccaEmployee;
+  language: string;
 }
 
-export default function EmployeePage({ employee }: EmployeePageProps) {
+export default async function EmployeePage({
+  employee,
+  language,
+}: EmployeePageProps) {
+  const employeePageSlug = await getEmployeePageSlug(language);
   const image = employee.imageUrl ?? employee.imageThumbUrl ?? null;
-  const t = useTranslations("employee_card");
+  const t = await getTranslations("employee_card");
 
   return (
     employee.name && (
@@ -22,24 +29,26 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
           <div className={styles.employee}>
             {image != null && (
               <div className={styles.employeeImage}>
-                <Image
-                  src={image}
-                  alt={employee.name}
-                  objectFit="cover"
-                  fill={true}
+                <SanityImage
+                  image={{
+                    src: { src: image },
+                    alt: employee.name,
+                  }}
                 />
               </div>
             )}
             <div className={styles.employeeInfo}>
               <Text type={"h2"}>{employee.name}</Text>
               {employee.email && (
                 <Text type={"bodyBig"} className={styles.employeeEmail}>
-                  {employee.email}
+                  <a href={`mailto:${employee.email}`}>{employee.email}</a>
                 </Text>
               )}
               {employee.telephone && (
                 <Text type={"bodyBig"} className={styles.employeeTelephone}>
-                  {formatPhoneNumber(employee.telephone)}
+                  <a href={`tel:${employee.telephone}`}>
+                    {formatPhoneNumber(employee.telephone)}
+                  </a>
                 </Text>
               )}
               {employee.officeName && (
@@ -49,13 +58,33 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
               )}
               {employee.competences.map((competence) => (
                 <Text type="bodyNormal" key={competence}>
-                  {t(competence)}
+                  {t.has(competence) ? t(competence) : competence}
                 </Text>
               ))}
             </div>
           </div>
+
+          <div className={styles.backToEmployees}>
+            <LinkButton
+              link={`/${language}/${employeePageSlug}`}
+              type="secondary"
+              size="S"
+              linkTitle={t("see_all_employees")}
+            />
+          </div>
         </div>
       </div>
     )
   );
 }
+
+export async function getEmployeePageSlug(language: string) {
+  const employeePageSlug =
+    (
+      await loadStudioQuery<{ slug: string } | null>(EMPLOYEE_PAGE_SLUG_QUERY, {
+        language,
+      })
+    ).data?.slug ?? "";
+
+  return employeePageSlug;
+}

src/components/employeePage/employeePage.module.css

@@ -7,41 +7,24 @@
 
 .content {
   width: 100%;
-  max-width: 1200px;
+  max-width: var(--max-content-width-small);
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 4rem 0 8rem 0;
 }
 
 .employee {
-  display: flex;
+  display: grid;
   gap: 3rem;
-  flex-direction: column;
-  margin: 1rem;
-
-  @media (min-width: 1024px) {
-    flex-direction: row;
-    align-items: center;
-  }
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .employeeImage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   background-color: var(--Dark-500);
-  border-radius: 12px;
-  width: 300px;
-  height: 300px;
-  padding: 1rem;
-  position: relative;
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    width: 200px;
-    height: 200px;
-  }
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
 
 .employeeInfo {
@@ -66,3 +49,11 @@
   color: var(--Dark-500);
   font-weight: 300;
 }
+
+.backToEmployees {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  margin-top: var(--padding-l);
+}