diff --git a/src/app/components/home/AddNewCard.tsx b/src/app/components/home/AddNewCard.tsx index d290734..28fe842 100644 --- a/src/app/components/home/AddNewCard.tsx +++ b/src/app/components/home/AddNewCard.tsx @@ -19,7 +19,6 @@ const AddNewCard = () => { const [isModalOpen, setModalIsOpen] = useState(false); const openModal = () => { - console.log("open modal"); setModalIsOpen(true); }; diff --git a/src/app/components/home/CarbonIcon.tsx b/src/app/components/home/CarbonIcon.tsx new file mode 100644 index 0000000..6272c92 --- /dev/null +++ b/src/app/components/home/CarbonIcon.tsx @@ -0,0 +1,67 @@ +const CarbonIcon = ({ fill }: { fill: string }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default CarbonIcon; diff --git a/src/app/components/home/EnvironmentIconSvg.tsx b/src/app/components/home/EnvironmentIconSvg.tsx new file mode 100644 index 0000000..3e8f0c3 --- /dev/null +++ b/src/app/components/home/EnvironmentIconSvg.tsx @@ -0,0 +1,25 @@ +const EnvironmentIcon = ({ fill }: { fill: string }) => { + return ( + + + + ); +}; + +export default EnvironmentIcon; diff --git a/src/app/components/home/LightBulbSvg.tsx b/src/app/components/home/LightBulbSvg.tsx new file mode 100644 index 0000000..89ca3ab --- /dev/null +++ b/src/app/components/home/LightBulbSvg.tsx @@ -0,0 +1,45 @@ +const LightBulbSvg = ({ fill }: { fill: string }) => { + return ( + + + + + + + + + + + + + + + + + + ); +}; + +export default LightBulbSvg; diff --git a/src/app/components/home/NewPortfolioModal.tsx b/src/app/components/home/NewPortfolioModal.tsx index 08b9e07..ed47d5f 100644 --- a/src/app/components/home/NewPortfolioModal.tsx +++ b/src/app/components/home/NewPortfolioModal.tsx @@ -1,11 +1,16 @@ import { Dialog, Transition } from "@headlessui/react"; -import { Dispatch, Fragment, SetStateAction, useState } from "react"; +import { Fragment, useState } from "react"; +import PoundIconSvg from "./PoundIconSvg"; +import LightBulbSvg from "./LightBulbSvg"; +import CarbonIcon from "./CarbonIcon"; +import QuestionMarkIcon from "./QuestionMarkIcon"; +import EnvironmentIcon from "./EnvironmentIconSvg"; const outcomes = [ "Valuation Improvement", "Increasing EPC", "Reducing CO2 emissions", - "Energy savings", + "Energy Savings", "Nothing Specific", ]; @@ -17,21 +22,37 @@ interface IconProps { className?: string; } -const selectedIconClasses = "bg-brandblue text-white w-1/5 rounded-md"; -const deSelectedIconClases = "bg-gray-200 w-1/5 rounded-md"; +const selectedIconClasses = + "bg-brandblue w-1/5 rounded-md h-1/5 cursor-pointer"; +const deSelectedIconClasses = + "bg-gray-200 w-1/5 rounded-md h-1/5 cursor-pointer"; -const Icon: React.FC = ({ name, selected, onSelect }: IconProps) => ( - <> +interface iconComponentsType { + [key: string]: JSX.Element; +} + +const Icon: React.FC = ({ name, selected, onSelect }: IconProps) => { + const iconComponents: iconComponentsType = { + "Valuation Improvement": , + "Energy Savings": , + // add more mappings here if needed + "Increasing EPC": , + "Reducing CO2 emissions": , + "Nothing Specific": , + }; + + return (
onSelect(name)} - className={selected ? selectedIconClasses : deSelectedIconClases} + className={selected ? selectedIconClasses : deSelectedIconClasses} > -
Icon
- {name} + {iconComponents[name]} +
+ {name} +
- <> - -); + ); +}; 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"; @@ -56,7 +77,7 @@ export default function NewPortfolioModal({ function createPortfolio() { // TODO: This will be a server action that will create a new portfolio in the database - console.log("create portfolio"); + console.log("redirect"); } function handlePortfolioNameChange(e: React.ChangeEvent) { @@ -95,7 +116,7 @@ export default function NewPortfolioModal({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - + { + return ( + + + + + + ); +}; + +export default PoundIconSvg; diff --git a/src/app/components/home/QuestionMarkIcon.tsx b/src/app/components/home/QuestionMarkIcon.tsx new file mode 100644 index 0000000..4f17f08 --- /dev/null +++ b/src/app/components/home/QuestionMarkIcon.tsx @@ -0,0 +1,24 @@ +const QuestionMarkIcon = ({ fill }: { fill: string }) => { + return ( + + + + + + ); +}; + +export default QuestionMarkIcon;