Basic layout of modal

src/app/components/home/NewPortfolioModal.tsx

@@ -1,5 +1,35 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment } from "react";
+import { Dispatch, Fragment, SetStateAction, useState } from "react";
+
+const outcomes = [
+  "Valuation Improvement",
+  "Increasing EPC",
+  "Reducing CO2 emissions",
+  "Energy savings",
+  "Nothing Specific",
+];
+
+// Mock Icon component
+interface IconProps {
+  name: string;
+  selected: boolean;
+  onSelect: (name: string) => void;
+  className?: string;
+}
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  selected,
+  onSelect,
+  className,
+}: IconProps) => (
+  <div onClick={() => onSelect(name)} style={selected ? { color: "red" } : {}}>
+    {name}
+  </div>
+);
+
+const hiddenInputArrows =
+  "[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none";
 
 export default function NewPortfolioModal({
   isOpen = false,
@@ -8,6 +38,10 @@ export default function NewPortfolioModal({
   isOpen?: boolean;
   setIsOpen: (isOpen: boolean) => void;
 }) {
+  const [portfolioName, setPortfolioName] = useState("");
+  const [budget, setBudget] = useState("");
+  const [selectedOutcome, setSelectedOutcome] = useState<string | null>(null);
+
   function closeModal() {
     setIsOpen(false);
   }
@@ -51,7 +85,69 @@ export default function NewPortfolioModal({
                   >
                     Create a new portfolio
                   </Dialog.Title>
-                  <div className="mt-2">TeXT</div>
+                  <form onSubmit={createPortfolio} className="space-y-4">
+                    <div className="flex flex-col">
+                      <label
+                        htmlFor="portfolio-name"
+                        className="text-sm font-semibold text-gray-600"
+                      >
+                        Portfolio Name:
+                      </label>
+                      <input
+                        id="portfolio-name"
+                        type="text"
+                        required
+                        value={portfolioName}
+                        onChange={(e) => setPortfolioName(e.target.value)}
+                        className="p-2 border border-gray-200 rounded-md"
+                      />
+                    </div>
+                    <div className="flex flex-col">
+                      <label
+                        htmlFor="budget"
+                        className="text-sm font-semibold text-gray-600"
+                      >
+                        Budget (£):
+                      </label>
+                      <div className="flex items-center border border-gray-200 rounded-md">
+                        <span className="px-2 text-sm text-gray-500">£</span>
+                        <input
+                          id="budget"
+                          type="number"
+                          value={budget}
+                          onChange={(e) => setBudget(e.target.value)}
+                          onKeyDown={(e) =>
+                            (e.key === "e" || e.key === "E") &&
+                            e.preventDefault()
+                          }
+                          className={[
+                            "flex-1 p-2 bg-transparent",
+                            hiddenInputArrows,
+                          ].join(" ")}
+                        />
+                      </div>
+                    </div>
+                    <div className="flex flex-col space-y-2">
+                      <span className="text-sm font-semibold text-gray-600">
+                        Select Outcome:
+                      </span>
+                      <div className="flex space-x-2">
+                        {outcomes.map((outcome) => (
+                          <Icon
+                            key={outcome}
+                            name={outcome}
+                            selected={selectedOutcome === outcome}
+                            onSelect={setSelectedOutcome}
+                            className={
+                              selectedOutcome === outcome
+                                ? "bg-red-500 text-white p-2 rounded"
+                                : "p-2 rounded border border-gray-200"
+                            }
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </form>
 
                   <div className="mt-4 flex justify-end gap-2">
                     <button

src/app/globals.css

@@ -19,3 +19,11 @@
 body {
   color: rgb(var(--foreground-rgb));
 }
+
+@layer base {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}