From 9dc21d1d13d24dc8d5937931fa9a5f2aca4a8e68 Mon Sep 17 00:00:00 2001
From: "jacob-local-kevin[bot]"
 <164088400+jacob-local-kevin[bot]@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:38:03 -0800
Subject: [PATCH] JACoB PR for Issue  Add Comprehensive Design System Overview
 to the Dashboard

---
 src/app/api/design/overview/route.ts          | 37 +++++++++
 .../dashboard/[org]/[repo]/design/Design.tsx  |  3 +
 .../[org]/[repo]/design/DesignOverview.tsx    | 75 +++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 src/app/api/design/overview/route.ts
 create mode 100644 src/app/dashboard/[org]/[repo]/design/DesignOverview.tsx

diff --git a/src/app/api/design/overview/route.ts b/src/app/api/design/overview/route.ts
new file mode 100644
index 0000000..ab95083
--- /dev/null
+++ b/src/app/api/design/overview/route.ts
@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  // Basic static data; future implementation can dynamically analyze codebase
+  const data = {
+    colors: [
+      "beige",
+      "dark-beige",
+      "dark-blue",
+      "light-blue",
+      "navy-blue",
+      "github-blue",
+      "github-green",
+      "aurora",
+      "blossom",
+      "meadow",
+      "sunset",
+    ],
+    typography: {
+      fonts: ["Inter var", "Lexend", "Gooper", "Figtree", "Crimson Text"],
+    },
+    uiElements: [
+      "Button",
+      "FormField",
+      "DataTable",
+      "DropdownMenu",
+      "Table",
+      "AnimatedShinyText",
+      "BorderBeam",
+      "DotPattern",
+      "FlickeringGrid",
+      "Meteors",
+    ],
+  };
+
+  return NextResponse.json(data);
+}
diff --git a/src/app/dashboard/[org]/[repo]/design/Design.tsx b/src/app/dashboard/[org]/[repo]/design/Design.tsx
index b0187f2..1fcc4ce 100644
--- a/src/app/dashboard/[org]/[repo]/design/Design.tsx
+++ b/src/app/dashboard/[org]/[repo]/design/Design.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 
+import DesignOverview from "./DesignOverview";
+
 interface DesignProps {
   org: string;
   repo: string;
@@ -18,6 +20,7 @@ const DesignComponent: React.FC<DesignProps> = ({ org, repo }) => {
             </h2>
           </div>
           <div className="space-y-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 sm:p-6">
+            <DesignOverview org={org} repo={repo} />
             <div>
               <h3 className="text-lg font-semibold text-gray-900 transition-colors dark:text-white sm:text-xl">
                 Transform Your Figma Designs into React Components
diff --git a/src/app/dashboard/[org]/[repo]/design/DesignOverview.tsx b/src/app/dashboard/[org]/[repo]/design/DesignOverview.tsx
new file mode 100644
index 0000000..a73bccb
--- /dev/null
+++ b/src/app/dashboard/[org]/[repo]/design/DesignOverview.tsx
@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+
+interface DesignOverviewProps {
+  org: string;
+  repo: string;
+}
+
+const DesignOverview: React.FC<DesignOverviewProps> = ({ org, repo }) => {
+  const [data, setData] = useState<any>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await fetch("/api/design/overview");
+        if (!res.ok) {
+          throw new Error("Failed to fetch design overview");
+        }
+        const json = await res.json();
+        setData(json);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchData();
+  }, [org, repo]);
+
+  if (!data) {
+    return <div>Loading design overview...</div>;
+  }
+
+  return (
+    <div className="mb-6 space-y-4">
+      <h3 className="text-lg font-semibold text-gray-900 transition-colors dark:text-white">
+        Design System Overview
+      </h3>
+
+      <div>
+        <h4 className="text-md font-semibold text-gray-800 transition-colors dark:text-gray-200">
+          Colors
+        </h4>
+        <ul className="list-disc pl-5 text-sm text-gray-600 transition-colors dark:text-gray-300">
+          {Array.isArray(data.colors) &&
+            data.colors.map((color: string) => <li key={color}>{color}</li>)}
+        </ul>
+      </div>
+
+      <div>
+        <h4 className="text-md font-semibold text-gray-800 transition-colors dark:text-gray-200">
+          Typography
+        </h4>
+        <p className="text-sm text-gray-600 transition-colors dark:text-gray-300">
+          Fonts:{" "}
+          {Array.isArray(data.typography?.fonts)
+            ? data.typography.fonts.join(", ")
+            : ""}
+        </p>
+      </div>
+
+      <div>
+        <h4 className="text-md font-semibold text-gray-800 transition-colors dark:text-gray-200">
+          Common UI Elements
+        </h4>
+        <ul className="list-disc pl-5 text-sm text-gray-600 transition-colors dark:text-gray-300">
+          {Array.isArray(data.uiElements) &&
+            data.uiElements.map((element: string) => (
+              <li key={element}>{element}</li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default DesignOverview;