wip: projects

README.md

@@ -1,28 +1 @@
-# Create T3 App
+# Hostforge 🔥
-
-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.

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>
+    <Card>
-      <h1 className="text-lg">PLAUSIBLE</h1>
+      {/* 
+      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">
+        {/* Stats */}
-        <Card>
+        <div className="flex flex-row gap-2 text-center">
-          <CardHeader className="flex flex-row items-center justify-between gap-8 space-y-0 p-4 pb-2 align-top">
+          {/* CPU */}
-            <div>
+          <div>
-              <CardTitle className="font-semibold uppercase">
+            <CardTitle>CPU</CardTitle>
-                plausible
+            <p className="mb-auto mt-0 text-sm text-muted-foreground">33%</p>
-              </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>
           </div>
-        </Card>
+
-      </div>
+          {/* Memory */}
-    </section>
+          <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>
   );
 }

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>
+  );
+}

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>

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>
   );
 }

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>