Style variant list (#114)

* Style variant list * move border
varianter · Oct 10, 2023 · fc51b48 · fc51b48
1 parent ce6a44f
commit fc51b48
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -455,3 +455,4 @@ $RECYCLE.BIN/
 !.vscode/extensions.json
 
 *.[Ll]ocal.json
+frontend/.prettierrc
diff --git a/frontend/public/icons/chevron-down.svg b/frontend/public/icons/chevron-down.svg
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -17,7 +17,9 @@ export default function RootLayout({
         />
       </Head>
       <body>
-        <AppProviders> {children}</AppProviders>
+        <AppProviders>
+          <div className="p-6">{children}</div>
+        </AppProviders>
       </body>
     </html>
   );

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,6 +1,25 @@
-import { VariantList } from "../components/variants";
+"use client";
+import VariantListElement from "@/components/variantListElement";
+import useVibesApi from "@/hooks/useVibesApi";
+import { CircularProgress } from "@mui/material";
 
-export default function Page() {
+export default function Bemanning() {
+  const { data, isLoading } = useVibesApi(true);
 
-    return <VariantList />
-}
+  if (isLoading) {
+    return <CircularProgress />;
+  }
+
+  if (data) {
+    return (
+      <div>
+        <h1>Konsulenter</h1>
+
+        <p className="body-large-bold pt-16 pb-4">Konsulentliste</p>
+        {data.map((variant) => (
+          <VariantListElement key={variant.id} variant={variant} />
+        ))}
+      </div>
+    );
+  }
+}
diff --git a/frontend/src/components/variantListElement.tsx b/frontend/src/components/variantListElement.tsx
@@ -0,0 +1,39 @@
+"use client";
+import { Variant } from "@/types";
+import { useState } from "react";
+
+interface VariantListElementProps {
+  variant: Variant;
+}
+
+const VariantListElement = ({ variant }: VariantListElementProps) => {
+  const [isListElementVisible, setIsListElementVisible] = useState(false);
+
+  const toggleListElementVisibility = () => {
+    setIsListElementVisible(!isListElementVisible);
+  };
+
+  return (
+    <div
+      className={`flex flex-col ${
+        isListElementVisible && "bg-primary_l4"
+      } border-t-2  border-primary_l4 `}
+    >
+      <button
+        className="flex flex-row gap-6 p-3  hover:bg-primary_default hover:bg-opacity-5"
+        onClick={toggleListElementVisibility}
+      >
+        <div className={`w-6 h-6 m-3 ${isListElementVisible && "rotate-180"}`}>
+          <img src="icons/chevron-down.svg" alt="chevron-down" className="" />
+        </div>
+        <div className="flex flex-col gap-1 justify-center items-start">
+          <p className="body text-black"> {variant.name}</p>
+          <p className="detail text-neutral_l1">{variant.email}</p>
+        </div>
+      </button>
+      <div className={`${!isListElementVisible && "hidden"} h-[198px] `}></div>
+    </div>
+  );
+};
+
+export default VariantListElement;
diff --git a/frontend/src/components/variants.tsx b/frontend/src/components/variants.tsx
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -7,7 +7,9 @@ module.exports = {
       white: "#FFFFFF",
       primary_default: "#423D89",
       primary_l3: "#ECECF3",
+      primary_l4: "#F6F5F9",
       secondary_default: "#F076A6",
+      neutral_l1: "#858585",
     },
     extend: {},
     screens: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -455,3 +455,4 @@ $RECYCLE.BIN/
		!.vscode/extensions.json

		*.[Ll]ocal.json
		frontend/.prettierrc