func: add docs page + overview and mental health pages

app/docs/page.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import Header from '@/components/Header'
+import Footer from '@/components/Footer'
+import { IoDocumentTextOutline } from "react-icons/io5"
+import { Docs, Doc } from '@/components/docs/Docs'
+import { useState, useEffect } from 'react'
+import { Loader2 } from 'lucide-react'
+
+export default function DocsPage() {
+  const [selectedDoc, setSelectedDoc] = useState<Doc | null>(null)
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setSelectedDoc(Docs.Overview)
+    setIsClient(true)
+  }, [])
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="grow container mx-auto px-4 py-12">
+        <div className="w-full flex flex-col">
+          <div className="flex items-center gap-2 text-7xl">
+            <IoDocumentTextOutline />
+            <h1
+              className="font-bold my-2 text-gray-200"
+              style={{ textShadow: "0 0 10px rgba(255, 255, 255, 0.5)" }}
+            >
+              Docs
+            </h1>
+          </div>
+          <span className="text-gray-400 text-3xl mt-2">
+            An organized collection of advice.
+          </span>
+        </div>
+        <div id="main-content" className="w-full sm:flex mt-6 gap-4">
+          <div className="w-full sm:w-[40%] sm:h-[calc(100vh-16rem)] md:w-[35%] md:h-[calc(100vh-16rem)] lg:w-[30%] lg:h-[calc(100vh-16rem)] xl:w-[25%] xl:h-[calc(100vh-16rem)] bg-slate-400/5 text-gray-200 border border-border rounded-lg p-4 overflow-y-auto mb-6 sm:mb-0">
+            <h2 className="text-2xl font-semibold mb-2.5">Concepts</h2>
+            <div className="space-y-2">
+              {Object.values(Docs).map((doc: Doc) => (
+                <div
+                  key={doc.title}
+                  className="p-3 py-2 bg-slate-400/10 hover:bg-slate-400/20 border border-border rounded-md cursor-pointer transition-colors"
+                  onClick={() => setSelectedDoc(doc)}
+                >
+                  <div className="flex items-center gap-2">
+                    {doc.icon}
+                    <span>{doc.title}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="w-full sm:w-[60%] sm:h-[calc(100vh-16rem)] md:w-[65%] md:h-[calc(100vh-16rem)] lg:w-[70%] lg:h-[calc(100vh-16rem)] xl:w-[75%] xl:h-[calc(100vh-16rem)] bg-slate-400/5 text-gray-200 border border-border rounded-lg p-6 overflow-y-auto">
+            {isClient && selectedDoc ? (
+              selectedDoc.component
+            ) : (
+              <div className="flex flex-col gap-2 items-center justify-center h-full">
+                <Loader2 size={48} className="animate-spin" />
+                <span className="text-gray-400">Loading...</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}

components/docs/Docs.tsx

@@ -0,0 +1,22 @@
+import { House, Brain } from "lucide-react"
+import { Overview } from "@/components/docs/pages/Overview"
+import { MentalHealth } from "@/components/docs/pages/MentalHealth"
+
+export interface Doc {
+  title: string
+  component: React.ReactNode
+  icon: React.ReactNode
+}
+
+export const Docs: Record<string, Doc> = {
+  Overview: {
+    "title": "Overview",
+    "component": <Overview />,
+    "icon": <House size={16} />
+  },
+  MentalHealth: {
+    "title": "Mental Health",
+    "component": <MentalHealth />,
+    "icon": <Brain size={16} />
+  }
+}

components/docs/pages/MentalHealth.tsx

@@ -0,0 +1,10 @@
+export function MentalHealth() {
+  return (
+    <div>
+      <h1 className="text-4xl font-bold">Mental Health</h1>
+      <p className="text-gray-400">
+        ---
+      </p>
+    </div>
+  )
+}

components/docs/pages/Overview.tsx

@@ -0,0 +1,35 @@
+import Link from "@/components/objects/Link"
+
+export function Overview() {
+  return (
+    <div className="flex flex-col text-gray-200">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-4xl font-bold">
+          Overview
+        </h1>
+        <p className="text-gray-400">
+          It's time to get a cup of coffee!
+        </p>
+      </div>
+      <div className="flex flex-col gap-2 mt-6">
+        <p><span className="font-bold">Docs</span> is the space where I share my thoughts and advice on a variety of topics. All of the content is <Link href="https://unlicense.org/" rel="noopener noreferrer" target="_blank">Unlicensed</Link>, meaning you are free to use it however you please. All content on this website is not legal, medical, financial, or professional advice.</p>
+        <div className="flex flex-col gap-2 mt-4">
+          <h3 className="text-2xl font-bold">
+            Reading
+          </h3>
+          <p>
+            While reading, I hope you will consider the following:
+          </p>
+          <ul className="list-disc list-inside">
+            <li>
+              Even if your opinion is different than mine, that does not mean you're wrong.
+            </li>
+            <li>
+              Take all advice with a grain of salt; nobody lives the same life as you do.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}