From b9d8dfe7b7cc20df990cebda2055445a9e1cca6e Mon Sep 17 00:00:00 2001 From: Hannah dagemark Date: Tue, 29 Sep 2026 12:27:12 +0200 Subject: [PATCH 1/2] Add react heroicons --- package-lock.json | 10 ++++++++++ package.json | 1 + 2 files changed, 11 insertions(+) diff --git a/package-lock.json b/package-lock.json index b3a1a6a..abaecab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "app", "version": "0.1.1", "dependencies": { + "@heroicons/react": "^2.2.0", "next": "^16.3.4", "react": "19.2.3", "react-dom": "19.2.3", @@ -478,6 +479,15 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@heroicons/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", + "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16 || ^19.0.0-rc" + } + }, "node_modules/@humanfs/core": { "version": "0.19.2", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz", diff --git a/package.json b/package.json index b406438..4eef781 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "lint:fix": "eslint --fix" }, "dependencies": { + "@heroicons/react": "^2.2.0", "next": "^16.3.4", "react": "19.2.3", "react-dom": "19.2.3", From c1d8ff9049eb456ce720053b424a45f12d9a7b69 Mon Sep 17 00:00:00 2001 From: Hannah dagemark Date: Tue, 29 Sep 2026 12:28:13 +0200 Subject: [PATCH 2/2] Small fixes, Fix lint, Expand dropdown to have correct style and add icon --- app/Hannah/page.tsx | 22 ++++++++++------ app/Playground/Components/page.tsx | 14 ++++++----- app/page.tsx | 9 ++++--- components/ui/Button.tsx | 6 ++++- components/ui/Dropdown.tsx | 40 +++++++++++++++++++++++++----- components/ui/Form.tsx | 2 +- components/ui/RoundedContainer.tsx | 4 ++- lib/api/cmFetch.ts | 2 -- 8 files changed, 71 insertions(+), 28 deletions(-) diff --git a/app/Hannah/page.tsx b/app/Hannah/page.tsx index 57f33d0..3fb7d7a 100644 --- a/app/Hannah/page.tsx +++ b/app/Hannah/page.tsx @@ -1,20 +1,28 @@ import Image from "next/image"; -import Referencelink from "@/components/ui/Referencelink"; import RoundedContainer from "@/components/ui/RoundedContainer"; +import NavLink from "@/components/ui/NavLink"; export default function Hannah() { return (
- - + +

Hi!

-

{"I'm Hannah, and I made this website! It's currently very much in it's early stages, but I am actively developing it and soon it'll hopefully contain some good examples of what I do. Besides being a place to display my projects, it also acts as a hub for the different services I've incorporated into our home web ecosystem, or HomeLab."}

-

{"If you came here from a job application, chances are you'll want to take a look at the Projects tab. As said It's still fairly new, but it'll give you a good example of what I put my time into! Just press the \"Projects\" button if you're interested"}

+

+ { + "I'm Hannah, and I made this website! It's currently very much in it's early stages, but I am actively developing it and soon it'll hopefully contain some good examples of what I do. Besides being a place to display my projects, it also acts as a hub for the different services I've incorporated into our home web ecosystem, or HomeLab." + } +

+

+ { + "If you came here from a job application, chances are you'll want to take a look at the Projects tab. As said It's still fairly new, but it'll give you a good example of what I put my time into! Just press the \"Projects\" button if you're interested" + } +

{"In the meantime, here's a picture of my cat :D"}

- ) -} \ No newline at end of file + ); +} diff --git a/app/Playground/Components/page.tsx b/app/Playground/Components/page.tsx index 65fef11..7476fef 100644 --- a/app/Playground/Components/page.tsx +++ b/app/Playground/Components/page.tsx @@ -8,7 +8,14 @@ import RoundedContainer from "@/components/ui/RoundedContainer"; export default function Components() { return ( -
+
+

Dropdown

+ + + + + +

Button

- -

Dropdown

- -

Hello!

-
); } diff --git a/app/page.tsx b/app/page.tsx index e29ef3e..e1c80a2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,11 @@ - import Image from "next/image"; +import Image from "next/image"; - import RoundedContainer from "@/components/ui/RoundedContainer"; +import RoundedContainer from "@/components/ui/RoundedContainer"; export default function Home() { return (
- +

- Design In Progress, current layout and theme may change, have a good day :D + Design In Progress, current layout and theme may change, have a good + day :D

diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx index 4dead55..39644b5 100644 --- a/components/ui/Button.tsx +++ b/components/ui/Button.tsx @@ -1,21 +1,25 @@ import { ComponentProps } from "react"; +import React from "react"; type ButtonProps = ComponentProps<"button"> & { title: string; mode?: "DARK" | "LIGHT"; + icon?: React.ReactElement; }; export default function Button({ title, mode = "LIGHT", + icon, ...props }: ButtonProps) { return ( ); } diff --git a/components/ui/Dropdown.tsx b/components/ui/Dropdown.tsx index 6ceb78c..2a27213 100644 --- a/components/ui/Dropdown.tsx +++ b/components/ui/Dropdown.tsx @@ -1,19 +1,47 @@ import { useState } from "react"; -import Button from "./Button"; +import React from "react"; +import { ArrowRightIcon } from "@heroicons/react/24/outline"; -export default function Dropdown({ children }: { children: React.ReactNode }) { +import Button from "./Button"; +import RoundedContainer from "./RoundedContainer"; + +export default function Dropdown({ + title, + mode, + children, +}: { + title?: string; + mode?: "DARK" | "LIGHT"; + children: React.ReactNode; +}) { const [dropped, setDropped] = useState(false); + const [degrees, setDegrees] = useState(0); return (
- {dropped &&
{children}
} + icon={ + + } + /> + + {children} +
); } diff --git a/components/ui/Form.tsx b/components/ui/Form.tsx index 0486a8e..65065ca 100644 --- a/components/ui/Form.tsx +++ b/components/ui/Form.tsx @@ -18,7 +18,7 @@ export default function Form({
{children} - +