From 7984241dce685007fa38a942379f38370c0cacf3 Mon Sep 17 00:00:00 2001
From: Derock <derock@derock.dev>
Date: Fri, 17 Nov 2023 19:34:39 -0500
Subject: [PATCH] wip: projects

---
 README.md                                    | 29 +--------
 src/app/(dashboard)/_components/Project.tsx  | 65 ++++++++++++++------
 src/app/(dashboard)/_components/Service.tsx  | 21 +++++++
 src/app/(dashboard)/_components/StatCard.tsx |  4 +-
 src/app/(dashboard)/page.tsx                 |  6 +-
 src/app/layout.tsx                           |  4 +-
 6 files changed, 77 insertions(+), 52 deletions(-)
 create mode 100644 src/app/(dashboard)/_components/Service.tsx

diff --git a/README.md b/README.md
index fba19ed..12264c7 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1 @@
-# Create T3 App
-
-This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
-
-## What's next? How do I make an app with this?
-
-We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
-
-If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
-
-- [Next.js](https://nextjs.org)
-- [NextAuth.js](https://next-auth.js.org)
-- [Prisma](https://prisma.io)
-- [Tailwind CSS](https://tailwindcss.com)
-- [tRPC](https://trpc.io)
-
-## Learn More
-
-To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
-
-- [Documentation](https://create.t3.gg/)
-- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
-
-You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
-
-## How do I deploy this?
-
-Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
+# Hostforge 🔥
\ No newline at end of file
diff --git a/src/app/(dashboard)/_components/Project.tsx b/src/app/(dashboard)/_components/Project.tsx
index 9827542..802de51 100644
--- a/src/app/(dashboard)/_components/Project.tsx
+++ b/src/app/(dashboard)/_components/Project.tsx
@@ -1,29 +1,54 @@
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { FaServer } from "react-icons/fa6";
+import { Service } from "./Service";
 
 export function Project() {
   return (
-    <section>
-      <h1 className="text-lg">PLAUSIBLE</h1>
+    <Card>
+      {/* 
+      Card header contains:
+      - Project name
+      - Project health
+      - Basic project stats 
+      */}
+      <CardHeader className="flex flex-row flex-wrap justify-between">
+        {/* Name and health */}
+        <div>
+          <CardTitle className="font-semibold">Plausible</CardTitle>
+          <p className="mb-auto mt-0 text-sm text-muted-foreground">
+            3/3 - Healthy
+          </p>
+        </div>
 
-      <div className="flex flex-row flex-wrap">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between gap-8 space-y-0 p-4 pb-2 align-top">
-            <div>
-              <CardTitle className="font-semibold uppercase">
-                plausible
-              </CardTitle>
-              <p className="mb-auto mt-0 text-sm text-muted-foreground">APP</p>
-            </div>
-            <FaServer className="text-2xl text-muted-foreground" />
-          </CardHeader>
-          <CardContent className="p-4"></CardContent>
-
-          <div className="m-2 mt-0">
-            <div className="h-2 w-full rounded-full bg-green-600"></div>
+        {/* Stats */}
+        <div className="flex flex-row gap-2 text-center">
+          {/* CPU */}
+          <div>
+            <CardTitle>CPU</CardTitle>
+            <p className="mb-auto mt-0 text-sm text-muted-foreground">33%</p>
           </div>
-        </Card>
-      </div>
-    </section>
+
+          {/* Memory */}
+          <div>
+            <CardTitle>MEM</CardTitle>
+            <p className="mb-auto mt-0 text-sm text-muted-foreground">33%</p>
+          </div>
+
+          {/* Disk */}
+          <div>
+            <CardTitle>DISK</CardTitle>
+            <p className="mb-auto mt-0 text-sm text-muted-foreground">33%</p>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <div className="flex flex-row flex-wrap justify-center gap-4">
+          <Service />
+          <Service />
+          <Service />
+        </div>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/src/app/(dashboard)/_components/Service.tsx b/src/app/(dashboard)/_components/Service.tsx
new file mode 100644
index 0000000..c900d27
--- /dev/null
+++ b/src/app/(dashboard)/_components/Service.tsx
@@ -0,0 +1,21 @@
+import { Card, CardContent, CardTitle } from "~/components/ui/card";
+
+export function Service() {
+  return (
+    <Card>
+      <CardTitle className="my-2 ml-4 mr-2 flex w-48 flex-row items-stretch justify-between">
+        <div>
+          <CardTitle>Plausible</CardTitle>
+          <p className="text-sm font-normal text-muted-foreground">APP</p>
+          {/* <p className="mb-auto mt-0 text-sm text-muted-foreground">
+            3/3 - Healthy
+          </p> */}
+        </div>
+
+        <div className="w-1 rounded-md bg-green-600">
+          <div className="sr-only">Healthy</div>
+        </div>
+      </CardTitle>
+    </Card>
+  );
+}
diff --git a/src/app/(dashboard)/_components/StatCard.tsx b/src/app/(dashboard)/_components/StatCard.tsx
index 8777669..d00517d 100644
--- a/src/app/(dashboard)/_components/StatCard.tsx
+++ b/src/app/(dashboard)/_components/StatCard.tsx
@@ -95,7 +95,7 @@ export function StatCard<T extends Record<string, any>>(props: {
 
               {props.subvalue !== undefined && (
                 <p
-                  className={`stroke stroke-card text-sm text-muted-foreground ${styles["stat-card"]} font-normal`}
+                  className={`stroke stroke-card text-sm text-foreground/80 ${styles["stat-card"]} font-normal`}
                 >
                   {props.subvalue}
                 </p>
@@ -109,7 +109,7 @@ export function StatCard<T extends Record<string, any>>(props: {
 
                 {props.secondarySubvalue && (
                   <p
-                    className={`stroke stroke-card text-sm text-muted-foreground ${styles["stat-card"]} text-right font-normal`}
+                    className={`stroke stroke-card text-sm text-foreground/80 ${styles["stat-card"]} text-right font-normal`}
                   >
                     {props.secondarySubvalue}
                   </p>
diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index dc0a002..81f47d4 100644
--- a/src/app/(dashboard)/page.tsx
+++ b/src/app/(dashboard)/page.tsx
@@ -15,7 +15,11 @@ export default async function DashboardHome() {
         historicalData={historicalData}
       />
 
-      <Project />
+      <div className="mt-4 grid grid-cols-2 gap-8">
+        <Project />
+        <Project />
+        <Project />
+      </div>
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5917ae9..c37d084 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -24,7 +24,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={`font-sans ${inter.variable} min-h-screen min-w-full`}>
+      <body
+        className={`font-sans ${inter.variable} min-h-screen min-w-full p-4`}
+      >
         <TRPCReactProvider cookies={cookies().toString()}>
           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
             <ToastProvider>{children}</ToastProvider>