fix: adds style to show more button

messages/en.json

@@ -35,6 +35,7 @@
     "Design": "Design",
     "Utvikling": "Development",
     "Administasjon": "Administration",
-    "field": "Field"
+    "field": "Field",
+    "showMore": "Show all"
   }
 }

messages/no.json

@@ -35,6 +35,7 @@
     "Design": "Design",
     "Utvikling": "Utvikling",
     "Administasjon": "Administrasjon",
-    "field": "Fag"
+    "field": "Fag",
+    "showMore": "Vis alle"
   }
 }

messages/se.json

@@ -35,6 +35,7 @@
     "Design": "Design",
     "Utvikling": "Utveckling",
     "Administasjon": "Administration",
-    "field": "Fält"
+    "field": "Fält",
+    "showMore": "Vis alla"
   }
 }

src/components/sections/employees/EmployeeList.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { use, useState, useTransition } from "react";
 
-import EmployeeCard, {
-  EmployeeCardSkeleton,
-} from "src/components/employeeCard/EmployeeCard";
+import EmployeeCard from "src/components/employeeCard/EmployeeCard";
 import { Tag } from "src/components/tag";
 import Text from "src/components/text/Text";
 import { ChewbaccaEmployee, Competence } from "src/types/employees";
@@ -41,22 +40,18 @@ export default function EmployeeList({
   language,
   employeesPageSlug,
 }: EmployeesProps) {
-  let [isPending, startTransition] = useTransition();
-
-  const currentPath = usePathname();
-  const searchParams = useSearchParams();
-  const { replace } = useRouter();
-  const limitEmployees = !searchParams.has("showAll");
-  console.log(searchParams, searchParams.has("showAll"));
-
   const employeesRes = use(employeesPromise);
   const employees = employeesRes.ok ? employeesRes.value : [];
   const [filteredEmployees, setFilteredEmployees] =
     useState<ChewbaccaEmployee[]>(employees);
 
-  const limitedEmployees = limitEmployees
-    ? filteredEmployees.slice(0, DEFAULT_LIMIT)
-    : filteredEmployees;
+  const {
+    isShowMore,
+    isShowMorePending,
+    limitedEmployees,
+    showMoreHandler,
+    showMoreHref,
+  } = useShowAll(filteredEmployees);
 
   const locations = Array.from(new Set(employees.map((e) => e.officeName)));
   const t = useTranslations("employee_card");
@@ -175,24 +170,76 @@ export default function EmployeeList({
             />
           ))}
         </div>
-        {isPending && <EmployeeListSkeleton />}
-        <Link
-          onClick={() =>
-            startTransition(() => {
-              replace(`${currentPath}?showAll`);
-            })
-          }
-          href={`${currentPath}?showAll`}
-          shallow
-          scroll={false}
-        >
-          Show more
-        </Link>
+        {isShowMorePending && <EmployeeListSkeleton />}
+
+        {(!isShowMore || isShowMorePending) && (
+          <ShowMoreButton
+            showMoreHandler={showMoreHandler}
+            showMoreHref={showMoreHref}
+          />
+        )}
       </div>
     </>
   );
 }
 
+function ShowMoreButton({
+  showMoreHandler,
+  showMoreHref,
+}: {
+  showMoreHandler: () => void;
+  showMoreHref: string;
+}) {
+  const t = useTranslations("employee_card");
+
+  // @TODO Replace with Button component when actually implemented
+  return (
+    <div className={styles.showMore}>
+      <Link
+        className={styles.showMore__button}
+        onClick={showMoreHandler}
+        href={showMoreHref}
+        shallow
+        scroll={false}
+      >
+        {t("showMore")}{" "}
+        <Image
+          src="/_assets/arrow-down.svg"
+          alt=""
+          role="none"
+          width={24}
+          height={24}
+        />
+      </Link>
+    </div>
+  );
+}
+
+function useShowAll(filteredEmployees: ChewbaccaEmployee[]) {
+  const [isPending, startTransition] = useTransition();
+
+  const currentPath = usePathname();
+  const searchParams = useSearchParams();
+  const { replace } = useRouter();
+  const limitEmployees = !searchParams.has("showAll");
+  const limitedEmployees = limitEmployees
+    ? filteredEmployees.slice(0, DEFAULT_LIMIT)
+    : filteredEmployees;
+
+  const showMoreHandler = () =>
+    startTransition(() => {
+      replace(`${currentPath}?showAll`);
+    });
+
+  return {
+    limitedEmployees,
+    showMoreHandler,
+    isShowMorePending: isPending,
+    isShowMore: !limitEmployees,
+    showMoreHref: `${currentPath}?showAll`,
+  };
+}
+
 function sortAlphabetically(filter: (string | null | undefined)[]) {
   return filter.sort((a, b) => a?.localeCompare(b ?? "") ?? 0);
 }

src/components/sections/employees/EmployeeSkeleton.tsx

@@ -1,4 +1,5 @@
 import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
+
 import styles from "./employees.module.css";
 
 export function EmployeeListSkeleton() {

src/components/sections/employees/employees.module.css

@@ -78,3 +78,45 @@
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 1.5rem;
 }
+
+.showMore {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-top: 2rem;
+}
+
+.showMore::before {
+  content: "";
+  display: block;
+  height: 1px;
+  background: var(--background-button-outline-dark);
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 1;
+}
+
+.showMore__button {
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0.25rem 0.5rem;
+  gap: 0.25rem;
+
+  border-radius: var(--radius-small);
+  border: 1px solid var(--background-button-outline-dark);
+  background: var(--background-bg-light-primary);
+  text-decoration: none;
+  z-index: 2;
+  position: relative;
+}
+.showMore__button img {
+  display: block;
+  height: 1.5rem;
+  width: 1.5rem;
+}