From dd516b80d161b733ae9f2a219a326cc6bf99c07b Mon Sep 17 00:00:00 2001
From: StefanWout <stefanwoutersen@gmail.com>
Date: Thu, 10 Oct 2024 17:10:14 +0100
Subject: [PATCH] placed settings page elements into a table

---
 .../settings/PortfolioSettings.tsx            | 75 ++++++++++++++++---
 1 file changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
index cc5081c..adde28b 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/app/shadcn_components/ui/button";
 import { Input } from "@/app/shadcn_components/ui/input";
 import { useRouter } from "next/navigation";
 import { handleNumericKeyDown } from "@/app/utils";
+import { DropdownMenu } from "@/app/shadcn_components/ui/dropdown-menu";
 
 
 export default function PortfolioSettings({
@@ -56,27 +57,83 @@ export default function PortfolioSettings({
 
   return (
     <>
-      <div className="flex justify-center max-w-8xl w-8xl">
-        <ul>
-          <li>
-            Name:
+      <div className="flex justify-center max-w-8xl w-8xl pt-5">
+        <ul className="grid grid-cols-3 gap-x-[5px] gap-y-4">
+          {/* Row 1: Name */}
+          <li className="flex items-center">
+            <span>Name:</span>
+          </li>
+          <li className="flex items-center">
             <Input value={portfolioName} onChange={handlePortfolioNameChange} />
+          </li>
+          <li className="flex items-center">
             <Button onClick={handleRename}>Rename</Button>
           </li>
-          <li>
-            Budget:
+  
+          {/* Row 2: Budget */}
+          <li className="flex items-center">
+            <span>Budget:</span>
+          </li>
+          <li className="flex items-center">
             <Input
               type="number"
               value={portfolioBudget ?? undefined}
               onChange={handlePortfolioBudgetUpdate}
-              onKeyDown={(e) => {handleNumericKeyDown(e)}}
+              onKeyDown={(e) => handleNumericKeyDown(e)}
             />
+          </li>
+          <li className="flex items-center">
             <Button onClick={handleBudgetUpdate}>Update</Button>
           </li>
-          <li>Goal: {portfolioSettingsData.goal}</li>
-          <li>Status: {portfolioSettingsData.status}</li>
+  
+          {/* Row 3: Goal */}
+          <li className="flex items-center">
+            <span>Goal:</span>
+          </li>
+          <li className="flex items-center">
+            {portfolioSettingsData.goal}
+          </li>
+          <li className="flex items-center">
+            <DropdownMenu />
+          </li>
+  
+          {/* Row 4: Status */}
+          <li className="flex items-center">
+            <span>Status:</span>
+          </li>
+          <li className="flex items-center">
+            {portfolioSettingsData.status}
+          </li>
+          <li className="flex items-center">
+            <DropdownMenu />
+          </li>
         </ul>
       </div>
     </>
   );
+  // return (
+  //   <>
+  //     <div className="flex justify-center max-w-8xl w-8xl pt-5">
+  //       <ul className="grid grid-cols-3 gap-x-[5px]">
+  //         <li className="flex items-center">
+  //           <span>Name: </span>
+  //           <Input value={portfolioName} onChange={handlePortfolioNameChange} />
+  //           <Button onClick={handleRename}>Rename</Button>
+  //         </li>
+  //         <li className="flex items-center">
+  //           <span>Budget: </span>
+  //           <Input
+  //             type="number"
+  //             value={portfolioBudget ?? undefined}
+  //             onChange={handlePortfolioBudgetUpdate}
+  //             onKeyDown={(e) => {handleNumericKeyDown(e)}}
+  //           />
+  //           <Button onClick={handleBudgetUpdate}>Update</Button>
+  //         </li>
+  //         <li className="flex items-center">Goal: {portfolioSettingsData.goal} <DropdownMenu></DropdownMenu> </li>
+  //         <li className="flex items-center">Status: {portfolioSettingsData.status} <DropdownMenu></DropdownMenu></li>
+  //       </ul>
+  //     </div>
+  //   </>
+  // );
 }