Snazzy stuff

GenerateNU · Jun 5, 2024 · c369253 · c369253
1 parent 868e911
commit c369253
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 67 deletions.
diff --git a/src/app/_components/BranchRow.tsx b/src/app/_components/BranchRow.tsx
@@ -1,61 +1,25 @@
-function CreateButton() {
-  return (
-    <button>
-      <img className=" px-4" src="./images/PlusIcon.svg" />
-    </button>
-  );
-}
-
-function DeleteButton() {
-  return (
-    <button>
-      <img className=" px-4" src="./images/DeleteIcon.svg" />
-    </button>
-  );
-}
-
-function PauseButton() {
-  return (
-    <button>
-      <img className=" px-4" src="./images/PauseIcon.svg" />
-    </button>
-  );
-}
-
-function PlayButton() {
-  return (
-    <button>
-      <img className=" px-4" src="./images/PlayIcon.svg" />
-    </button>
-  );
-}
+import { CreateButton, DeleteButton } from "./Button";
 
 export default function BranchRow(props: {
   creator: string;
   name: string;
   status: string;
 }) {
   const actionLabel =
-    status === "No DB" ? "Create Database" : "Connect to Database";
+    props.status === "No DB" ? "Create Database" : "Connect to Database";
 
   return (
     <div className="flex justify-between items-center py-3 pl-12 pr-8 shadow-inner">
-      <span>
+      <span className="flex flex-row w-3/5">
         {props.creator} / {props.name}
       </span>
-      <span>
-        {props.status} /{" "}
-        <a href="#" className="text-blue-500 hover:underline">
+      <span className=" w-2/5">
+        <a href="#" className="hover:underline">
           {actionLabel}
         </a>
       </span>
-      <div className=" flex flex-row gap-4">
-        {props.status === "No DB" && <CreateButton />}
-        {props.status === "Stopped" && <PlayButton />}
-        {props.status === "Running" && <PauseButton />}
-        {(props.status === "Running" || props.status === "Stopped") && (
-          <DeleteButton />
-        )}
+      <div className=" flex flex-row gap-4 w-1/5 justify-end">
+        {props.status === "No DB" ? <CreateButton /> : <DeleteButton />}
       </div>
     </div>
   );

diff --git a/src/app/_components/Button.tsx b/src/app/_components/Button.tsx
@@ -21,3 +21,35 @@ export default function Button(props: {
     </Link>
   );
 }
+
+export function CreateButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/PlusIcon.svg" />
+    </button>
+  );
+}
+
+export function DeleteButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/DeleteIcon.svg" />
+    </button>
+  );
+}
+
+export function PauseButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/PauseIcon.svg" />
+    </button>
+  );
+}
+
+export function PlayButton() {
+  return (
+    <button>
+      <img className=" px-4" src="./images/PlayIcon.svg" />
+    </button>
+  );
+}
diff --git a/src/app/_components/DashboardContents.tsx b/src/app/_components/DashboardContents.tsx
@@ -21,6 +21,7 @@ export default function DashboardItems() {
       route: "website",
       branchesCount: 1,
       databasesCount: 0,
+      instanceStatus: "Running",
       branches: [
         {
           creator: "natesawant",
@@ -36,14 +37,15 @@ export default function DashboardItems() {
       route: "routes",
       branchesCount: 3,
       databasesCount: 2,
+      instanceStatus: "Stopped",
       branches: [
         {
           creator: "natesawant",
           name: "main",
           status: "Running",
         },
         {
-          creator: "natesawant",
+          creator: "diffuser",
           name: "stopped-example",
           status: "Stopped",
         },

diff --git a/src/app/_components/ProjectCard.tsx b/src/app/_components/ProjectCard.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import BranchRow from "./BranchRow";
 import Link from "next/link";
+import { DeleteButton, PauseButton, PlayButton } from "./Button";
 
 interface Branch {
   creator: string;
@@ -13,6 +14,7 @@ interface ProjectCardProps {
   route: string;
   branchesCount: number;
   databasesCount: number;
+  instanceStatus: string;
   branches: Branch[];
   creator: string;
   createdOn: string;
@@ -25,6 +27,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
   route,
   branchesCount,
   databasesCount,
+  instanceStatus,
   branches,
   creator,
   createdOn,
@@ -38,7 +41,11 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
       >
         <div className=" flex flex-row items-center">
           <button className=" px-12" onClick={onToggle}>
-            <img src="./images/ChevronIcon.svg" className=" w-8" />
+            <img
+              src="./images/ChevronIcon.svg"
+              alt="Expand Project"
+              className={`${isOpen && " rotate-180"} w-8 transition duration-300`}
+            />
           </button>
           <span>
             <Link
@@ -61,28 +68,29 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
             - {branchesCount} branches - {databasesCount} databases
           </span>
         </div>
-        <button className=" px-4 ">
-          <img src="./images/DeleteIcon.svg" />
-        </button>
+        <div className=" flex flex-row items-center">
+          {instanceStatus === "Stopped" ? <PlayButton /> : <PauseButton />}
+          <DeleteButton />
+        </div>
       </div>
-      {isOpen && (
-        <div className="bg-gray-100 rounded-b-xl">
-          <div className="bg-project-row">
-            {branches.map((branch, index) => (
-              <BranchRow
-                key={index}
-                creator={branch.creator}
-                name={branch.name}
-                status={branch.status}
-              />
-            ))}
-          </div>
-          <div className="flex flex-col gap-3 py-3 px-12 shadow-inner bg-white">
-            <p>Created by: {creator}</p>
-            <p>Created on: {createdOn}</p>
-          </div>
+      <div
+        className={`bg-gray-100 rounded-b-xl transition-all duration-300 overflow-hidden ${isOpen ? " h-max-fit h-96" : "h-0"}`}
+      >
+        <div className="bg-project-row">
+          {branches.map((branch, index) => (
+            <BranchRow
+              key={index}
+              creator={branch.creator}
+              name={branch.name}
+              status={branch.status}
+            />
+          ))}
+        </div>
+        <div className="flex flex-col gap-3 py-3 px-12 shadow-inner bg-white">
+          <p>Created by: {creator}</p>
+          <p>Created on: {createdOn}</p>
         </div>
-      )}
+      </div>
     </div>
   );
 };

diff --git a/src/app/_components/ProjectList.tsx b/src/app/_components/ProjectList.tsx
@@ -1,5 +1,3 @@
-"use clien";
-
 import React from "react";
 import ProjectCard from "./ProjectCard";
 
@@ -9,6 +7,7 @@ interface ProjectListProps {
     route: string;
     branchesCount: number;
     databasesCount: number;
+    instanceStatus: string;
     branches: Array<{
       creator: string;
       name: string;
@@ -35,6 +34,7 @@ const ProjectList: React.FC<ProjectListProps> = ({
           route={project.route}
           branchesCount={project.branchesCount}
           databasesCount={project.databasesCount}
+          instanceStatus={project.instanceStatus}
           branches={project.branches}
           creator={project.creator}
           createdOn={project.createdOn}