diff --git a/.gitignore b/.gitignore index 65e7d5a1..50cf959f 100644 --- 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 new file mode 100644 index 00000000..8659044a --- /dev/null +++ b/frontend/public/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index dafce59c..0870ad17 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -17,7 +17,9 @@ export default function RootLayout({ /> - {children} + +
{children}
+ ); diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index d6263d46..d378897a 100644 --- 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 -} \ No newline at end of file + if (isLoading) { + return ; + } + + if (data) { + return ( +
+

Konsulenter

+ +

Konsulentliste

+ {data.map((variant) => ( + + ))} +
+ ); + } +} diff --git a/frontend/src/components/variantListElement.tsx b/frontend/src/components/variantListElement.tsx new file mode 100644 index 00000000..7fb9c251 --- /dev/null +++ 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 ( +
+ +
+
+ ); +}; + +export default VariantListElement; diff --git a/frontend/src/components/variants.tsx b/frontend/src/components/variants.tsx deleted file mode 100644 index 893703a5..00000000 --- a/frontend/src/components/variants.tsx +++ /dev/null @@ -1,45 +0,0 @@ -"use client"; -import { - CircularProgress, - Switch, - FormControlLabel, - FormGroup, -} from "@mui/material"; -import useVibesApi from "../hooks/useVibesApi"; -import React, { useState } from "react"; - -export function VariantList() { - // Add a switch for this later - const { data, isLoading, isError, error } = useVibesApi(true); - - if (isLoading) { - return ; - } - - if (data) { - return ( -
- - - - - - - - - - - {data.map((variant) => ( - - - - - - - ))} - -
NameEmailDepartmentCompetences
{variant.name}{variant.email}{variant.department}{variant.competences.join(", ")}
-
- ); - } -} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index b3645bfd..a50dada4 100644 --- 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: {