Fix button and link executions
This commit is contained in:
parent
789c5ab26a
commit
4ad42312b1
8 changed files with 94 additions and 69 deletions
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import React, {useState} from "react";
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import RoundedContainer from "@/components/ui/RoundedContainer";
|
||||
import Hyperlink from "@/components/ui/Hyperlink";
|
||||
import Hyperlink from "@/components/ui/NavLink";
|
||||
|
||||
type Project = {
|
||||
id: number;
|
||||
|
|
@ -12,7 +12,7 @@ type Project = {
|
|||
parentProject?: number;
|
||||
title: string;
|
||||
content: React.ReactNode;
|
||||
}
|
||||
};
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
|
|
@ -22,13 +22,20 @@ const projects: Project[] = [
|
|||
content: (
|
||||
<div className="prose space-y-2">
|
||||
<p className="text-xl">Hello!</p>
|
||||
<p>{"This is the project view page. Here you can get a quick idea of what sort of things I've worked on. Unfortunately it relies on me making these project sides manually, and thus only notable projects will end up on here. If you're looking for a brief overview of, for example what languages I've worked in, I suggest you take a peek at my git page."}</p>
|
||||
<p>
|
||||
{
|
||||
"This is the project view page. Here you can get a quick idea of what sort of things I've worked on. Unfortunately it relies on me making these project sides manually, and thus only notable projects will end up on here. If you're looking for a brief overview of, for example what languages I've worked in, I suggest you take a peek at my git page."
|
||||
}
|
||||
</p>
|
||||
<div className="flex flex-row justify-around">
|
||||
<Hyperlink name={"My self-hosted Git"} link={"dagemark.se/git/Hannah"} />
|
||||
<Hyperlink
|
||||
name={"My self-hosted Git"}
|
||||
link={"dagemark.se/git/Hannah"}
|
||||
/>
|
||||
<Hyperlink name={"My Github"} link={"github.com/Hannah-Dagemark"} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
|
|
@ -36,7 +43,11 @@ const projects: Project[] = [
|
|||
title: "Dagemark Homelab",
|
||||
content: (
|
||||
<div className="prose space-y-2">
|
||||
<p>{"The main project which I've been working on since December. For those unfamiliar with the concept, a HomeLab is a custom server one builds and runs in their own home to give them more autonomy and control over their digital services. In my case, it's also to let me get some very useful experience in networking, docker management, service handling, server interfacing, and more. Due to this project's size, it's been split up into sub-projects."}</p>
|
||||
<p>
|
||||
{
|
||||
"The main project which I've been working on since December. For those unfamiliar with the concept, a HomeLab is a custom server one builds and runs in their own home to give them more autonomy and control over their digital services. In my case, it's also to let me get some very useful experience in networking, docker management, service handling, server interfacing, and more. Due to this project's size, it's been split up into sub-projects."
|
||||
}
|
||||
</p>
|
||||
<Image
|
||||
src="/ServerUML.png"
|
||||
alt="(Server UML Image Here)"
|
||||
|
|
@ -44,9 +55,13 @@ const projects: Project[] = [
|
|||
height={500}
|
||||
priority
|
||||
/>
|
||||
<p>{"Here's an example of how the networking looks like inside the server right now, with most services (including this website!) being ran with docker using a docker compose setup. One of those services is Nginx Proxy Manager which does reverse proxying and routing for the server."}</p>
|
||||
<p>
|
||||
{
|
||||
"Here's an example of how the networking looks like inside the server right now, with most services (including this website!) being ran with docker using a docker compose setup. One of those services is Nginx Proxy Manager which does reverse proxying and routing for the server."
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
|
|
@ -55,23 +70,36 @@ const projects: Project[] = [
|
|||
title: "Main Website",
|
||||
content: (
|
||||
<div className="prose space-y-3">
|
||||
<a href="https://dagemark.se/git/Hannah/Dagemark-Webapp" >Click here to go to Git Page</a>
|
||||
<p>{"The main website that you're currently on. The website is written in Typescript, using the NextJS React toolkit. It also uses TailwindCSS for CSS styling, as well as eslint to keep code clean and uniform."}</p>
|
||||
<p>{"Currently the website is only a frontend page, although a backend is in the works. The idea is to have the website be very editable online, including these project pages as an example. For that a robust user handling system needs to be created however, and a good backend api, which is the planned next step."}</p>
|
||||
<p>{"This project has been a very nice way for me to jog my memory from my technical fourth year, where I originally learned this development stack. I also find web development to be a good way of training the other aspects of development, as planning routes, page layouts, apis, reusable components and thematics is very essential."}</p>
|
||||
<a href="https://dagemark.se/git/Hannah/Dagemark-Webapp">
|
||||
Click here to go to Git Page
|
||||
</a>
|
||||
<p>
|
||||
{
|
||||
"The main website that you're currently on. The website is written in Typescript, using the NextJS React toolkit. It also uses TailwindCSS for CSS styling, as well as eslint to keep code clean and uniform."
|
||||
}
|
||||
</p>
|
||||
<p>
|
||||
{
|
||||
"Currently the website is only a frontend page, although a backend is in the works. The idea is to have the website be very editable online, including these project pages as an example. For that a robust user handling system needs to be created however, and a good backend api, which is the planned next step."
|
||||
}
|
||||
</p>
|
||||
<p>
|
||||
{
|
||||
"This project has been a very nice way for me to jog my memory from my technical fourth year, where I originally learned this development stack. I also find web development to be a good way of training the other aspects of development, as planning routes, page layouts, apis, reusable components and thematics is very essential."
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
isChildProject: false,
|
||||
title: "Count Duch King",
|
||||
content: "[To be implemented]"
|
||||
content: "[To be implemented]",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
export default function Projects() {
|
||||
|
||||
// TODO: make the content server stored, of course!
|
||||
|
||||
const [activeProject, setActiveProject] = useState(projects[0]);
|
||||
|
|
@ -82,7 +110,6 @@ export default function Projects() {
|
|||
<div className="flex w-230 h-250 justify-center min-h-screen bg-gray-600 rounded-2xl py-10">
|
||||
{/* Notebook Wrapper */}
|
||||
<div className="relative flex w-full h-full pr-5">
|
||||
|
||||
{/* Chapter Tabs */}
|
||||
<div className="flex flex-col justify-start pt-10 pr-5">
|
||||
{projects.map((project) => (
|
||||
|
|
@ -92,10 +119,10 @@ export default function Projects() {
|
|||
className={`${project.isChildProject ? "ml-2 mr-2 pl-3 border-l-4 border-t-2 border-slate-500 text-sm" : "mt-2 rounded-r-lg"}
|
||||
px-4 py-2 text-left transition
|
||||
${
|
||||
activeProject.id === project.id
|
||||
? "bg-slate-300 shadow-md"
|
||||
: "bg-slate-400 hover:bg-slate-500"
|
||||
}`}
|
||||
activeProject.id === project.id
|
||||
? "bg-slate-300 shadow-md"
|
||||
: "bg-slate-400 hover:bg-slate-500"
|
||||
}`}
|
||||
>
|
||||
{project.title}
|
||||
</button>
|
||||
|
|
@ -107,14 +134,11 @@ export default function Projects() {
|
|||
<h2 className="text-slate-800 text-2xl font-bold mb-4">
|
||||
{activeProject.title}
|
||||
</h2>
|
||||
<p className="text-slate-700">
|
||||
{activeProject.content}
|
||||
</p>
|
||||
<p className="text-slate-700">{activeProject.content}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</RoundedContainer>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,14 +1,21 @@
|
|||
"use client";
|
||||
|
||||
import Button from "@/components/ui/Button";
|
||||
import Form from "@/components/ui/Form";
|
||||
import Hyperlink from "@/components/ui/Hyperlink";
|
||||
import Referencelink from "@/components/ui/Referencelink";
|
||||
import NavLink from "@/components/ui/NavLink";
|
||||
import RoundedContainer from "@/components/ui/RoundedContainer";
|
||||
|
||||
export default function Components() {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-4 w-full h-full">
|
||||
<h1>Button</h1>
|
||||
<Button title={"Button"} mode="DARK" />
|
||||
<Button
|
||||
title={"Button"}
|
||||
mode="DARK"
|
||||
onClick={() => {
|
||||
console.log("Button!");
|
||||
}}
|
||||
/>
|
||||
|
||||
<h1>Form</h1>
|
||||
<Form action={"Action here"} submitText="Example submit button ">
|
||||
|
|
@ -16,16 +23,14 @@ export default function Components() {
|
|||
{/* Add custom input! */}
|
||||
</Form>
|
||||
|
||||
<h1>Hyperlink</h1>
|
||||
<Hyperlink
|
||||
name="Example Hyperlink"
|
||||
link={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/Playground/Components/`}
|
||||
/>
|
||||
<h1>NavLink</h1>
|
||||
<NavLink name="Example Navlink" link="/Playground/Components/" />
|
||||
|
||||
<h1>Referencelink</h1>
|
||||
<Referencelink
|
||||
name="Example Referencelink"
|
||||
link="/Playground/Components/"
|
||||
<h2>External</h2>
|
||||
<NavLink
|
||||
name="Example External Navlink"
|
||||
external={true}
|
||||
link={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/Playground/Components/`}
|
||||
/>
|
||||
|
||||
<h1>Rounded Container</h1>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,11 @@ export default function RootLayout({
|
|||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`antialiased`}> {/* className=${geistSans.variable} ${geistMono.variable} */}
|
||||
<Header/>
|
||||
<div className="flex min-h-screen bg-zinc-200 font-sans dark:bg-slate-800">
|
||||
<body className={`antialiased min-h-screen flex flex-col`}>
|
||||
{" "}
|
||||
{/* className=${geistSans.variable} ${geistMono.variable} */}
|
||||
<Header />
|
||||
<div className="flex grow bg-zinc-200 font-sans dark:bg-slate-800">
|
||||
{children}
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import Hyperlink from "@/components/ui/Hyperlink";
|
||||
import Hyperlink from "@/components/ui/NavLink";
|
||||
import { getServices } from "@/lib/api/helpers/services";
|
||||
import { Service } from "@/lib/api/types";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
import { ComponentProps } from "react";
|
||||
|
||||
type ButtonProps = ComponentProps<"button"> & {
|
||||
title: string;
|
||||
mode?: "DARK" | "LIGHT";
|
||||
};
|
||||
|
||||
export default function Button({
|
||||
title,
|
||||
mode = "LIGHT",
|
||||
}: {
|
||||
title: string;
|
||||
mode?: "DARK" | "LIGHT";
|
||||
}) {
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<button
|
||||
{...props}
|
||||
className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 border-slate-800 hover:bg-slate-500" : "bg-gray-400 dark:bg-slate-900 dark:border-slate-900 border-slate-400 hover:bg-slate-600"} border-4 border-double cursor-pointer font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
|
||||
>
|
||||
{title}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from "react";
|
||||
|
||||
import RoundedContainer from "./RoundedContainer";
|
||||
import Button from "./Button";
|
||||
|
||||
export default function Form({
|
||||
action,
|
||||
|
|
@ -17,7 +18,7 @@ export default function Form({
|
|||
<form action={action}>
|
||||
<RoundedContainer slim={false}>
|
||||
{children}
|
||||
<button type="submit">{submitText}</button>
|
||||
<Button title={submitText} type="submit"></Button>
|
||||
</RoundedContainer>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
export default function Hyperlink({
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NavLink({
|
||||
name,
|
||||
link,
|
||||
external = false,
|
||||
}: {
|
||||
name: string;
|
||||
link: string;
|
||||
external?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
|
||||
<a href={`https://${link}`} className="block">
|
||||
<Link href={`${external ? "https:" : ""}${link}`} className="block">
|
||||
<h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">
|
||||
{name}
|
||||
</h1>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
export default function Referencelink({
|
||||
name,
|
||||
link,
|
||||
}: {
|
||||
name: string;
|
||||
link: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
|
||||
<a href={`${link}`} className="block">
|
||||
<h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">
|
||||
{name}
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue