set up outline of the settings page

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { PortfolioSettingsType } from "../../utils";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { Input } from "@/app/shadcn_components/ui/input";
+import { useRouter } from "next/navigation";
+
+export default function PortfolioSettings({
+  portfolioId,
+  portfolioSettingsData,
+}: {
+  portfolioId: string;
+  portfolioSettingsData: PortfolioSettingsType;
+}) {
+  // Running in the client
+  const router = useRouter();
+
+  const [portfolioName, setPortfolioName] = useState(
+    portfolioSettingsData.name
+  );
+
+  function handleRename() {
+    // API call to rename the portfolio
+    // apiFunction(portfolioName)
+    // Update portfolio function with name is equal to portfolioName
+    router.refresh();
+  }
+
+  function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setPortfolioName(e.target.value);
+  }
+
+  // Last thing we'd need to do is make that update in the db
+
+  return (
+    <>
+      <div className="flex justify-center max-w-8xl w-8xl">
+        <ul>
+          <li>
+            Name:{" "}
+            <Input value={portfolioName} onChange={handlePortfolioNameChange} />{" "}
+            <Button onClick={handleRename}>Rename</Button>
+          </li>
+          <li>Budget: {portfolioSettingsData.budget}</li>
+          <li>Goal: {portfolioSettingsData.goal}</li>
+          <li>Status: {portfolioSettingsData.status}</li>
+        </ul>
+      </div>
+    </>
+  );
+}

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

@@ -17,10 +17,20 @@ export default async function PortfolioSettingsPage({
 
   const portfolioSettingsData = await getPortfolioSettings(portfolioId);
 
+  // Get goal options and status options by importing something like this:
+  // import {
+  //   PortfolioStatus,
+  //   PortfolioGoal,
+  // } from "./../../db/schema/portfolio";
+  // and then pass them to the portfoliosettings component
+
   return (
     <>
       <div className="flex justify-center max-w-8xl w-8xl">
-        <PortfolioSettings portfolioSettingsData={portfolioSettingsData} />
+        <PortfolioSettings
+          portfolioId={portfolioId}
+          portfolioSettingsData={portfolioSettingsData}
+        />
       </div>
     </>
   );