diff --git a/whitewash/package.json b/whitewash/package.json index ae610d8..50a53b1 100644 --- a/whitewash/package.json +++ b/whitewash/package.json @@ -14,6 +14,7 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@mui/material": "^7.3.4", + "material-ui-popup-state": "^5.3.6", "@tanstack/react-query": "^5.90.5", "next": "15.5.6", "react": "19.1.0", diff --git a/whitewash/pnpm-lock.yaml b/whitewash/pnpm-lock.yaml index ac7c437..cdeca87 100644 --- a/whitewash/pnpm-lock.yaml +++ b/whitewash/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@mui/material': specifier: ^7.3.4 version: 7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + material-ui-popup-state: + specifier: ^5.3.6 + version: 5.3.6(@mui/material@7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.2.2)(react@19.1.0) '@tanstack/react-query': specifier: ^5.90.5 version: 5.90.5(react@19.1.0) @@ -629,6 +632,9 @@ packages: resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==} engines: {node: '>=18'} + classnames@2.5.1: + resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} + client-only@0.0.1: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} @@ -789,6 +795,17 @@ packages: magic-string@0.30.19: resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==} + material-ui-popup-state@5.3.6: + resolution: {integrity: sha512-tGpq417auecyK9iKMGxSQfyv6pwg0Wii2Isi9RuL92YDDkdnXlorl5c3+S4Zg8MH6Hk4NUa/5Y9PPEWgKakzOw==} + engines: {node: '>=16'} + peerDependencies: + '@mui/material': ^5.0.0 || ^6.0.0 || ^7.0.0 + '@types/react': ^16.8.0 || ^17 || ^18 || ^19 + react: ^16.8.0 || ^17 || ^18 || ^19 + peerDependenciesMeta: + '@types/react': + optional: true + minipass@7.1.2: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} @@ -1476,6 +1493,8 @@ snapshots: chownr@3.0.0: {} + classnames@2.5.1: {} + client-only@0.0.1: {} clsx@2.1.1: {} @@ -1602,6 +1621,17 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + material-ui-popup-state@5.3.6(@mui/material@7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.2.2)(react@19.1.0): + dependencies: + '@babel/runtime': 7.28.4 + '@mui/material': 7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react@19.1.0))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@types/prop-types': 15.7.15 + classnames: 2.5.1 + prop-types: 15.8.1 + react: 19.1.0 + optionalDependencies: + '@types/react': 19.2.2 + minipass@7.1.2: {} minizlib@3.1.0: diff --git a/whitewash/public/header-icons/globe.svg b/whitewash/public/header-icons/globe.svg index f376d39..188c8f7 100644 --- a/whitewash/public/header-icons/globe.svg +++ b/whitewash/public/header-icons/globe.svg @@ -1,3 +1,4 @@ - + + \ No newline at end of file diff --git a/whitewash/public/header-icons/receipt.svg b/whitewash/public/header-icons/receipt.svg new file mode 100644 index 0000000..235f190 --- /dev/null +++ b/whitewash/public/header-icons/receipt.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/whitewash/src/app/components/header/header.tsx b/whitewash/src/app/components/header/Header.tsx similarity index 90% rename from whitewash/src/app/components/header/header.tsx rename to whitewash/src/app/components/header/Header.tsx index e407122..652c908 100644 --- a/whitewash/src/app/components/header/header.tsx +++ b/whitewash/src/app/components/header/Header.tsx @@ -5,9 +5,10 @@ import dinner from "@public/header-icons/dinner.svg" import sale from "@public/header-icons/sale.svg" import gps from "@public/header-icons/gps.svg" import globe from "@public/header-icons/globe.svg" -import { HeaderItem } from "./headerItem" +import { HeaderItem } from "./HeaderItem" import Link from "next/link" import { type FormEvent, useState } from "react" +import { ShoppingCartPreview } from "./ShoppingCartPreview" export function Header() { const [searchInput, setSearchInput] = useState("") @@ -20,7 +21,7 @@ export function Header() { } return ( -
+
{"REMA @@ -52,10 +53,7 @@ export function Header() { Søk - - - Handleliste - +
) } diff --git a/whitewash/src/app/components/header/headerItem.tsx b/whitewash/src/app/components/header/HeaderItem.tsx similarity index 87% rename from whitewash/src/app/components/header/headerItem.tsx rename to whitewash/src/app/components/header/HeaderItem.tsx index 8eeb46a..5c3812a 100644 --- a/whitewash/src/app/components/header/headerItem.tsx +++ b/whitewash/src/app/components/header/HeaderItem.tsx @@ -8,7 +8,7 @@ type headerItemProps = { title: string } -export function HeaderItem(props: headerItemProps) { +export const HeaderItem = (props: headerItemProps) => { return (
diff --git a/whitewash/src/app/components/header/ShoppingCartPreview.tsx b/whitewash/src/app/components/header/ShoppingCartPreview.tsx new file mode 100644 index 0000000..490bf38 --- /dev/null +++ b/whitewash/src/app/components/header/ShoppingCartPreview.tsx @@ -0,0 +1,68 @@ +"use client" + +import { useState } from "react" +import receipt from "@public/header-icons/receipt.svg" +import Image from "next/image" +import Link from "next/link" + +export const ShoppingCartPreview = () => { + const [open, setOpen] = useState(false) + + return ( +
+ + + {open && ( +
setOpen(false)} + onKeyUp={() => setOpen(false)} + className="absolute inset-0 top-22.5 z-30 bg-black/20 duration-150 ease-in-out transition-all" + role="menu" + > + +
+ )} +
+ ) +} diff --git a/whitewash/src/app/components/oddy/Oddy.tsx b/whitewash/src/app/components/oddy/Oddy.tsx index 0414cba..5dacb27 100644 --- a/whitewash/src/app/components/oddy/Oddy.tsx +++ b/whitewash/src/app/components/oddy/Oddy.tsx @@ -33,7 +33,7 @@ export const Oddy = ({ return (