From 6906609bf558117bd6a6a35fe49388b98e533650 Mon Sep 17 00:00:00 2001 From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no> Date: Wed, 19 Jul 2023 16:41:38 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Ny=20hovedside=20etter=20oppdatert?= =?UTF-8?q?=20skisser?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mangler scrollbar og noen små detaljer, men layout er fikset. --- frontend/src/components/Filtermeny.tsx | 46 ++++++++++++++++++++++++++ frontend/src/index.tsx | 43 +++++------------------- frontend/tailwind.config.js | 5 ++- 3 files changed, 58 insertions(+), 36 deletions(-) create mode 100644 frontend/src/components/Filtermeny.tsx diff --git a/frontend/src/components/Filtermeny.tsx b/frontend/src/components/Filtermeny.tsx new file mode 100644 index 0000000..ed58378 --- /dev/null +++ b/frontend/src/components/Filtermeny.tsx @@ -0,0 +1,46 @@ +import { Accordion } from "@navikt/ds-react" + + +const Filtermeny = () => { + return ( + <div className="bg-bg-default w-500"> + <Accordion> + <Accordion.Item> + <Accordion.Header> + Kategori + </Accordion.Header> + <Accordion.Content> + Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha + hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk + nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>. + </Accordion.Content> + </Accordion.Item> + <Accordion.Item defaultOpen> + <Accordion.Header> + Status + </Accordion.Header> + <Accordion.Content> + Da er det lite som trengs å gjøres. + </Accordion.Content> + </Accordion.Item> + <Accordion.Item> + <Accordion.Header> + Prioritet + </Accordion.Header> + <Accordion.Content> + Da er det lite som trengs å gjøres. + </Accordion.Content> + </Accordion.Item> + <Accordion.Item> + <Accordion.Header> + Mine innmeldinger + </Accordion.Header> + <Accordion.Content> + Da er det lite som trengs å gjøres. + </Accordion.Content> + </Accordion.Item> + </Accordion> + </div> + ) +} +export default Filtermeny \ No newline at end of file diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 3ee15e2..fb55855 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,51 +2,24 @@ import CardsContainer from "./components/CardsContainer"; import "@navikt/ds-css"; import { Button, Heading, Search } from "@navikt/ds-react"; import Header from "./components/Header"; - +import { PlusIcon } from "@navikt/aksel-icons"; +import Filtermeny from "./components/Filtermeny"; export default function Home() { - // const handleFeil = () => { - // router.push('/feil') - // } - return ( <main className="flex flex-col h-screen"> <Header/> - <div className="flex justify-center grow"> - <div className="bg-bg-subtle w-1/6 p-8 flex flex-col justify-end"> - <div className="flex flex-col gap-4 text-center bottom-0"> - <Button - variant="primary" - // onClick={handleFeil} - > + <div className="flex grow"> + <Filtermeny/> + <div className="grow bg-bg-subtle px-32 py-10 flex flex-col gap-10"> + <div className="flex gap-12 items-end"> + <Search label="Søkefelt" hideLabel={false}/> + <Button className="w-64 h-min" icon={<PlusIcon/>}> Meld inn feil </Button> - <Button - variant="secondary" - > - Meld inn funksjonalitetsønsker - </Button> </div> - </div> - - <div className="p-8 grow flex gap-8 flex-col"> - <Search - label="Søk gjennom innmeldte feil (nøkkelord, tags, status)" - variant="primary" - hideLabel={false} - /> - <Heading - level="1" - size="medium" - > - Innmeldte feil (saker, feilmeldinger poster, feil) - </Heading> <CardsContainer/> </div> - - <div className="bg-bg-subtle w-1/6 p-8"> - <h1>Filter to be</h1> - </div> </div> </main> ) diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 42f6d32..26e8961 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -293,7 +293,10 @@ module.exports = { "large": "8px", "xlarge": "12px", "full": "9999px" - } + }, + "width": { + "500": "500px", + }, } }, plugins: [],