trying to write a select function

src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx

@@ -6,8 +6,29 @@ 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";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/app/shadcn_components/ui/select"
+import { PortfolioStatus } from "@/app/db/schema/portfolio";
+import { PortfolioGoal } from "@/app/db/schema/portfolio";
 
+export function SettingsDropdown({startingValue}:{startingValue:string;}) {
+  return (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder={startingValue} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
 
 export default function PortfolioSettings({
   portfolioId,
@@ -25,6 +46,10 @@ export default function PortfolioSettings({
     portfolioSettingsData.name
   );
 
+  const [portfolioGoal, setPortfolioGoal] = useState(
+    portfolioSettingsData.goal
+  );
+
   function handleRename() {
     // API call to rename the portfolio
     // apiFunction(portfolioName)
@@ -57,8 +82,8 @@ export default function PortfolioSettings({
 
   return (
     <>
-      <div className="flex justify-center max-w-8xl w-8xl pt-5">
-        <ul className="grid grid-cols-3 gap-x-[5px] gap-y-4">
+      <div className="p-4 mt-5 flex justify-center max-w-8xl w-8xl pt-5 bg-gray-50 rounded-lg text-brandblue">
+        <ul className="grid grid-cols-[max-content_1fr_min-content] gap-x-[5px] gap-y-4">
           {/* Row 1: Name */}
           <li className="flex items-center">
             <span>Name:</span>
@@ -67,14 +92,14 @@ export default function PortfolioSettings({
             <Input value={portfolioName} onChange={handlePortfolioNameChange} />
           </li>
           <li className="flex items-center">
-            <Button onClick={handleRename}>Rename</Button>
+            <Button className="w-full" onClick={handleRename}>Rename</Button>
           </li>
   
           {/* Row 2: Budget */}
           <li className="flex items-center">
             <span>Budget:</span>
           </li>
-          <li className="flex items-center">
+          <li className="flex items-center max-w-8xl">
             <Input
               type="number"
               value={portfolioBudget ?? undefined}
@@ -83,7 +108,7 @@ export default function PortfolioSettings({
             />
           </li>
           <li className="flex items-center">
-            <Button onClick={handleBudgetUpdate}>Update</Button>
+            <Button className="w-full" onClick={handleBudgetUpdate}>Update</Button>
           </li>
   
           {/* Row 3: Goal */}
@@ -94,7 +119,7 @@ export default function PortfolioSettings({
             {portfolioSettingsData.goal}
           </li>
           <li className="flex items-center">
-            <DropdownMenu />
+            <SettingsDropdown startingValue={portfolioGoal}/>
           </li>
   
           {/* Row 4: Status */}
@@ -105,35 +130,15 @@ export default function PortfolioSettings({
             {portfolioSettingsData.status}
           </li>
           <li className="flex items-center">
-            <DropdownMenu />
+          </li>
+
+          {/* Row 5: Delete */}
+          <li className="col-span-2"></li>
+          <li className="flex items-center">
+            {/* <Button className="max-width: 100% bg-red-700" onClick={DeletePortfolio}>Delete Portfolio</Button> */}
           </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>
-  //   </>
-  // );
 }

src/app/portfolio/[slug]/(portfolio)/settings/page.tsx

@@ -10,7 +10,8 @@ export default async function PortfolioSettingsPage({
   // fetch data securely on the server
   // Stef's page!!!!
   // 1) Rename
-  // 2) Delete - much harder
+  // 2) Update budget, status, goal
+  // 3) Delete - much harder
 
   // fetch data in the server - name, budget, goal,
   // pass it to a client component to render and take user input