diff --git a/app/Nav.tsx b/app/Nav.tsx index 8b49ecf..7a56316 100644 --- a/app/Nav.tsx +++ b/app/Nav.tsx @@ -4,6 +4,7 @@ import styles from "../styles/Nav.module.scss"; import Image from "next/image"; import Link from "next/link"; import { useEffect } from "react"; +import Category from "./articles/[categoryName]/page"; function switchTheme(theme) { const bodyElement = document.getElementsByTagName("body")[0]; @@ -56,7 +57,16 @@ export default function Nav() { alt="Nav bar logo" />
- Tutorials + + Categories +
+
+ {" "} + All + Tutorials +
+
+
diff --git a/app/articles/DynamicCategoryGrid.tsx b/app/articles/DynamicCategoryGrid.tsx new file mode 100644 index 0000000..3ea223a --- /dev/null +++ b/app/articles/DynamicCategoryGrid.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import styles from "../../styles/DynamicCategoryGrid.module.scss"; +import Link from "next/link"; +export default function DynamicCategoryGrid({ categories }) { + return ( +
+ {categories.map((cat, i) => { + { + return ( +
+ +
+ + + +
+ {cat.name} + +
+ ); + } + })} +
+ ); +} diff --git a/app/articles/page.tsx b/app/articles/page.tsx index 463b5ab..0d6fa92 100644 --- a/app/articles/page.tsx +++ b/app/articles/page.tsx @@ -1,3 +1,27 @@ -export default function Article() { - return

List all article

; +import styles from "../../styles/CategoryList.module.scss"; +import Link from "next/link"; +import prisma from "../../lib/prisma"; +import { Category } from "@prisma/client"; +import { Suspense } from "react"; +import dynamic from "next/dynamic"; + +export async function GetCategories(): Promise { + return await prisma.category.findMany(); +} + +const DynamicCategoryGrid = dynamic(() => import("./DynamicCategoryGrid"), { + loading: () =>

Loading...

, +}); + +export default async function CategoryList() { + const categories = await GetCategories(); + + return ( +
+

Overview

+
+ +
+
+ ); } diff --git a/package.json b/package.json index 17ade12..dcf06ff 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "scripts": { "dev": "next dev", - "build": "next build", + "build": "prisma generate && prisma migrate deploy && next build", "start": "next start", "lint": "next lint" }, diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 6379653..6814b83 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -35,6 +35,8 @@ model ContentTableEntry { model Category { id Int @id @default(autoincrement()) name String @unique + color String @unique + svg String @default("") Article Article[] dateCreated DateTime @default(now()) dateUpdated DateTime @default(now()) diff --git a/styles/CategoryList.module.scss b/styles/CategoryList.module.scss new file mode 100644 index 0000000..6cb2252 --- /dev/null +++ b/styles/CategoryList.module.scss @@ -0,0 +1,14 @@ +@import "variables.scss"; +.categoryList { + h1 { + text-align: center; + font-size: 1.5em; + } + + .content { + margin-top: 30px; + display: flex; + justify-content: center; + align-items: center; + } +} diff --git a/styles/DynamicCategoryGrid.module.scss b/styles/DynamicCategoryGrid.module.scss new file mode 100644 index 0000000..ca0c035 --- /dev/null +++ b/styles/DynamicCategoryGrid.module.scss @@ -0,0 +1,96 @@ +@import "variables.scss"; +.grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px 30px; + + @media (max-width: $categoryList-breakpoint-1) { + grid-template-columns: 1fr 1fr; + gap: 10px 10px; + } + + @media (max-width: $categoryList-breakpoint-2) { + grid-template-columns: 1fr; + width: 100%; + + padding: 0px 20px 0 20px; + } + + .linkContainer { + aspect-ratio: 14/9; + width: 250px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @media (max-width: $categoryList-breakpoint-2) { + width: 100%; + } + + a { + text-align: center; + aspect-ratio: 14/9; + width: 230px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 20px; + background-color: #384d54; + color: white; + font-size: 0.8em; + transition: all 100ms linear; + + &:hover { + box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.481); + color: white !important; + text-decoration: none !important; + width: 250px; + row-gap: 30px; + .svgContainer { + svg { + width: 70px; + height: 70px; + } + } + } + + @media (max-width: $categoryList-breakpoint-2) { + font-size: 1.2em; + width: 95%; + &:hover { + box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0); + width: 100%; + + .svgContainer { + svg { + width: 90px; + height: 90px; + } + } + } + } + + .svgContainer { + width: 70px; + height: 70px; + @media (max-width: $categoryList-breakpoint-2) { + width: 90px; + height: 90px; + } + svg { + transition: all 100ms linear; + fill: rgb(255, 255, 255); + width: 60px; + height: 60px; + + @media (max-width: $categoryList-breakpoint-2) { + width: 80px; + height: 80px; + } + } + } + } + } +} diff --git a/styles/Nav.module.scss b/styles/Nav.module.scss index 4bbe537..19e9451 100644 --- a/styles/Nav.module.scss +++ b/styles/Nav.module.scss @@ -1,8 +1,8 @@ @import "variables.scss"; .nav { background-color: var(--color-background-nav); - height: 60px; - margin-bottom: 50px; + height: $nav-height-inital; + margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; @@ -37,6 +37,43 @@ .links { font-size: 0.8em; font-weight: bold; + + .dropDown { + color: var(--color-font-link); + text-decoration: none; + cursor: pointer; + &:hover { + .dropDownContainer { + display: block; + } + } + .dropDownContainer { + display: none; + position: absolute; + z-index: 1; + .content { + background-color: var(--color-background-dropdown); + min-width: 160px; + box-shadow: 0px 12px 16px 5px rgba(0, 0, 0, 0.2); + margin-top: 21px; + + a { + float: none; + color: var(--color-font-link); + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; + border-left: 2px solid transparent; + transition: all 50ms linear; + + &:hover { + border-color: var(--color-accent); + } + } + } + } + } } } diff --git a/styles/colorVariables.scss b/styles/colorVariables.scss index ec9958c..ebdcba2 100644 --- a/styles/colorVariables.scss +++ b/styles/colorVariables.scss @@ -10,9 +10,12 @@ --color-svg-nav: rgb(191, 191, 191); --color-background-card: rgba(123, 123, 123, 0.13); + --color-background-dropdown: var(--color-background-body); --color-accent: #2294ff; --color-font-link: var(--color-accent); + --color-font-link-hover: #5caffc; + /* Colors: Markdown */ --md-color-font: rgb(220, 217, 217); --md-color-headline: rgb(229, 228, 228); @@ -35,8 +38,10 @@ --color-svg-nav: rgb(54, 54, 54); --color-background-card: rgba(171, 170, 170, 0.13); + --color-background-dropdown: var(--color-background-body); --color-accent: #2294ff; --color-font-link: var(--color-accent); + --color-font-link-hover: #0966be; /* Colors: Markdown */ --md-color-font: rgb(33, 33, 33); diff --git a/styles/globals.scss b/styles/globals.scss index 18f08fd..1dbf9ab 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -43,9 +43,11 @@ a { font-weight: bold; text-decoration: none; color: var(--color-font-link); + transition: color 50ms linear; &:hover { text-decoration: underline; + color: var(--color-font-link-hover) !important; } &:visited { diff --git a/styles/variables.scss b/styles/variables.scss index ac33cca..807d20f 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -17,7 +17,12 @@ $footer-breakpoint-3: 800px; $footer-breakpoint-4: 440px; /* Nav */ +$nav-height-inital: 60px; $nav-breakpoint-1: 1040px; $nav-breakpoint-2: 820px; $nav-breakpoint-3: 500px; $nav-breakpoint-4: 400px; + +/* CategoryList */ +$categoryList-breakpoint-1: 850px; +$categoryList-breakpoint-2: 600px;