in progress: build out server side

components/Home/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useColorShift } from "../logo";
+import { useColorShift } from "../Navbar/logo";
 
 export const ColorChangeName = () => {
     const { firstColor, secondColor, thirdColor } = useColorShift(14000);

components/Navbar/index.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { InlineLogo, useColorShift } from '../logo'
+import { InlineLogo, useColorShift } from './logo'
 import { useState } from 'react';
 import { RxActivityLog } from "react-icons/rx";
 import { NavbarButton } from '../ui/Button';

components/Navbar/logo.tsx

@@ -1,8 +1,8 @@
 'use client'
 import { FC } from "react";
-import useColorShift, { UseColorShiftReturnType, type ColorListType } from "./useColorShift";
+import useColorShift, { UseColorShiftReturnType, type ColorListType } from "../../hooks/useColorShift";
 import { useRouter } from "next/navigation";
-export { default as useColorShift } from "./useColorShift";
+export { default as useColorShift } from "../../hooks/useColorShift";
 
 const DEFAULT_SHIFT_INTERVAL = 3000;
 

components/Projects/ProjectEntry.tsx

@@ -0,0 +1,29 @@
+import ProjectRepository from "@/server/actions/project.actions"
+import Image from "next/image"
+
+export default async function ProjectEntry({ id }: { id: string }) {
+    const projects = new ProjectRepository();
+    const project = await projects.getProjectById(id);
+
+    if (!project) {
+        return <p>Project not found!</p>
+    }
+
+    return (
+        <article id="project-entry-body">
+            <header>
+                <h1 className="text-4xl font-bold">{project.name}</h1>
+                <p>Started: {project.startDate.toLocaleString()}</p>
+                <p>{project.endDate ? `Finished: ${project.endDate.toLocaleDateString()}` : "(In progress)"}</p>
+            </header>
+
+            <div id="project-entry-content" className="flex flex-col">
+                <p>{project.description}</p>
+            </div>
+
+            { project.media && project.media.map((link, idx) => {
+                return <Image src={link} key={idx} alt={`Media for ${project.name}`} width={80} height={80} />
+            })}
+        </article>
+    )
+}

components/logo/useColorShift.tsx

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-import { DefaultColors } from "tailwindcss/types/generated/colors";
-
-export type ColorListType = (`bg-${keyof DefaultColors}` | `bg-${keyof DefaultColors}-${string}` | "");
-
-const colorList: ColorListType[] = [
-    "bg-purple-500",
-    "bg-purple-800",
-    "bg-sky-500",
-    "bg-sky-800",
-    "bg-blue-500",
-    "bg-pink-500",
-    "bg-pink-800",
-];
-
-export interface UseColorShiftReturnType {
-    firstColor: ColorListType
-    secondColor: ColorListType
-    thirdColor: ColorListType
-    shift: () => { firstColor: ColorListType, secondColor: ColorListType, thirdColor: ColorListType }
-    shiftInterval: number | undefined
-}
-
-const useColorShift = (shiftInterval?: number, disableShift = false, customColorList?: ColorListType[]): UseColorShiftReturnType => {
-    if (shiftInterval && shiftInterval <= 0) throw new Error("shiftInterval must be greater than 0")
-
-    const randomColor = () => {
-        const list = customColorList ?? colorList;
-        const color = list[Math.floor(Math.random() * list.length || 0)];
-
-        if (!color) throw new Error("color is undefined");
-        return color;
-    }
-
-    const [circleColors, setCircleColors] = useState<{
-        firstColor:     ColorListType | "",
-        secondColor:    ColorListType | "",
-        thirdColor:     ColorListType | "",
-    }>({
-        firstColor:     colorList[0] ?? randomColor(),
-        secondColor:    colorList[1] ?? randomColor(),
-        thirdColor:     colorList[2] ?? randomColor(),
-    })
-
-    function shift() {
-        const firstColor = randomColor();
-        const secondColor = randomColor();
-        const thirdColor = randomColor();
-
-        setCircleColors({ firstColor, secondColor, thirdColor });
-        return { firstColor, secondColor, thirdColor };
-    }
-
-    // perform initial mount of color changing pattern
-    useEffect(() => {
-        if (!disableShift) return;
-        shift();
-    }, []);
-
-    // set this function to repeat
-    useEffect(() => {
-        const interval = setInterval(() => {
-            shift();
-        }, shiftInterval ?? 3000);
-
-        return () => clearInterval(interval);
-    }, [])
-
-    return { ...circleColors, shift, shiftInterval };
-}
-
-export default useColorShift

components/mdx/index.tsx

@@ -1,45 +0,0 @@
-import { v4 } from "uuid"
-import { cabin } from "@/app/layout";
-
-type ElementType<Key extends keyof JSX.IntrinsicElements> = React.FC<JSX.IntrinsicElements[Key]>
-type FormattedTags = {
-    [Key in keyof JSX.IntrinsicElements]: ElementType<Key>
-}
-
-const H1TAG: ElementType<"h1"> = ({ children }) => { return (
-    <h1 key={v4()} className={`text-4xl text-red-500 ${cabin.className} tracking-wide`}>{children}</h1>
-)}
-
-const H2Tag: ElementType<"h2"> = ({ children }) => (
-    <h2 key={v4()}>{children}</h2>
-)
-
-const H3Tag: ElementType<"h3"> = ({ children }) => (
-    <h3 key={v4()}>{children}</h3>
-)
-
-const H4Tag: ElementType<"h4"> = ({ children }) => (
-    <h4 key={v4()}>{children}</h4>
-)
-
-const PTag: ElementType<"p"> = ({ children }) => (
-    <p key={v4()}>{children}</p>
-)
-
-const LiTag: ElementType<"li"> = ({ children }) => (
-    <li key={v4()}>{children}</li>
-)
-
-const BrTag: ElementType<"br"> = () => (
-    <br key={v4()} />
-)
-
-export default {
-    "h1": H1TAG,
-    "h2": H2Tag,
-    "h3": H3Tag,
-    "h4": H4Tag,
-    "p": PTag,
-    "li": LiTag,
-    "br": BrTag
-} satisfies Partial<FormattedTags>