mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
Added all of the icons and got the modal looking nice
This commit is contained in:
Khalim Conn-Kowlessar
parent
b28f363391
commit
4fa823cf7f
7 changed files with 230 additions and 15 deletions
|
|
@ -19,7 +19,6 @@ const AddNewCard = () => {
|
|||
const [isModalOpen, setModalIsOpen] = useState(false);
|
||||
|
||||
const openModal = () => {
|
||||
console.log("open modal");
|
||||
setModalIsOpen(true);
|
||||
};
|
||||
|
||||
|
|
|
|||
67
src/app/components/home/CarbonIcon.tsx
Normal file
67
src/app/components/home/CarbonIcon.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
const CarbonIcon = ({ fill }: { fill: string }) => {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
width="100%"
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 501.333 501.333"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M414.933,188.8c-20.267-73.6-87.467-125.867-164.267-125.867s-144,51.2-164.267,124.8C35.2,204.8,0,253.867,0,309.333
|
||||
C0,380.8,57.6,438.4,129.067,438.4h243.2c71.467,0,129.067-57.6,129.067-128C501.333,254.933,467.2,206.933,414.933,188.8z
|
||||
M372.267,397.866h-243.2c-48,0-87.467-39.467-87.467-87.467c0-40.533,27.733-74.667,67.2-84.267
|
||||
c8.533-2.133,14.933-8.533,16-17.067c11.733-60.8,64-104.533,125.867-104.533c61.867,0,114.133,43.733,125.867,104.533
|
||||
c2.133,8.533,7.467,14.933,16,17.067c39.467,8.533,67.2,43.733,67.2,84.267C459.733,358.4,420.267,397.866,372.267,397.866z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M195.199,339.2c-1.067-1.067-2.133-1.067-3.2-1.067c-1.067,0-2.133,0-3.2,1.067c-3.2,2.133-7.467,3.2-10.667,4.267
|
||||
c-4.267,1.067-8.533,2.133-13.867,2.133c-11.733,0-20.267-3.2-27.733-10.667c-6.4-6.4-9.6-14.933-9.6-26.667
|
||||
c0-10.667,3.2-19.2,9.6-26.667c3.201-4.267,7.467-6.4,11.734-8.534c4.267-2.133,9.6-3.2,14.933-3.2
|
||||
c5.333,0,10.667,1.067,13.867,2.133c4.267,1.067,7.467,3.2,10.667,4.267c1.067,0,2.133,1.067,3.2,1.067c1.067,0,2.133,0,3.2-1.067
|
||||
c1.067-1.067,1.067-2.133,1.067-3.2c0-1.067,0-2.133-1.067-3.2c-1.067-1.067-2.133-2.133-4.267-3.2
|
||||
c-2.133-1.067-6.4-3.2-10.667-4.267c-5.333-2.133-10.667-2.133-17.067-2.133c-13.867,0-25.6,4.267-34.133,12.8
|
||||
c-8.533,8.533-13.867,20.267-13.867,35.2c0,14.933,4.267,26.667,13.867,35.2c4.267,4.267,9.6,7.467,14.933,9.6
|
||||
c5.333,2.133,11.733,3.2,19.2,3.2c6.4,0,12.8-1.067,17.067-2.133c5.333-2.133,9.6-3.2,13.867-6.4c2.133-1.067,3.2-3.2,3.2-5.333
|
||||
C196.266,341.333,196.266,340.266,195.199,339.2z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M290.134,273.066c-8.534-9.6-19.2-13.867-34.133-13.867c-13.867,0-25.6,4.267-34.133,13.867
|
||||
c-8.533,8.533-12.8,20.267-12.8,35.2c0,13.867,4.267,25.6,12.8,35.2c8.533,9.6,20.267,13.867,34.133,13.867
|
||||
c13.867,0,25.6-4.267,34.133-13.867c8.533-8.533,12.8-20.267,12.8-35.2C302.934,294.399,298.667,282.666,290.134,273.066z
|
||||
M282.667,333.866c-6.4,7.467-14.933,10.667-25.6,10.667c-10.667,0-19.2-3.2-25.6-10.667c-6.4-6.4-9.6-16-9.6-26.667
|
||||
c0-10.667,3.2-19.2,9.6-26.667s14.933-10.667,25.6-10.667c10.667,0,19.2,3.2,25.6,10.667c6.4,6.4,9.6,16,9.6,26.667
|
||||
C291.2,317.866,288,326.4,282.667,333.866z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M385.067,342.399c-1.067-1.067-2.133-2.133-4.267-2.133h-46.933c-0.001,0,2.133-2.133,5.333-5.333
|
||||
c3.2-2.133,6.4-5.333,10.667-7.467c4.267-3.2,8.533-5.333,12.8-8.533c4.267-3.2,8.533-6.4,11.733-9.6
|
||||
c8.533-7.467,12.8-16,12.8-23.467c0-8.533-3.2-14.933-9.6-20.267c-6.4-5.333-12.8-7.467-22.4-7.467
|
||||
c-10.667,0-21.333,2.133-29.867,6.4c-2.133,1.067-3.2,2.133-3.2,4.267s0,3.2,1.067,4.267c1.067,1.067,2.133,1.067,3.2,1.067
|
||||
c1.067,0,2.133,0,3.2-1.067c7.467-3.2,14.933-5.333,23.467-5.333c7.467,0,12.8,2.133,17.067,5.333c2.133,1.067,3.2,3.2,3.2,5.333
|
||||
c1.067,2.133,1.067,4.267,1.067,7.467c0,3.2-1.067,6.4-4.267,9.6c-2.133,3.2-6.4,6.4-9.6,8.533c-4.267,3.2-8.533,5.333-12.8,8.533
|
||||
c-4.267,3.2-8.533,6.4-12.8,9.6c-4.267,3.2-7.467,6.4-9.6,10.667c-3.2,4.267-4.267,8.533-4.267,12.8
|
||||
c0,2.133,1.067,4.267,2.133,5.333c1.067,1.067,3.2,2.133,5.333,2.133h52.267c2.133,0,3.2-1.067,4.267-2.133
|
||||
c1.067-1.067,2.133-2.133,2.133-4.267C387.201,344.533,386.134,343.466,385.067,342.399z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default CarbonIcon;
|
||||
25
src/app/components/home/EnvironmentIconSvg.tsx
Normal file
25
src/app/components/home/EnvironmentIconSvg.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
const EnvironmentIcon = ({ fill }: { fill: string }) => {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
width="100%"
|
||||
height="100%"
|
||||
version="1.2"
|
||||
baseProfile="tiny"
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<path
|
||||
d="M119.2,99.5c0.9,4-1.6,7.7-5.3,8.5l-46.8,10.7c-5.6,1.5-12.1,0.7-17.4-2.6l-21.6-13.6c-2.7-1.7-5.9-2.3-8.8-1.6L1,113.6
|
||||
L0.9,85.2l25.7-14.6c5.6-2.8,11.5-0.3,16.6,2.9l31,19.6c3.2,2.1,4.2,6.5,2.1,9.7c-2.1,3.2-6.4,4.1-9.7,2.1L41.7,89.1
|
||||
c-1-0.7-2.4-0.4-3.1,0.7c-0.7,1.1-0.5,2.5,0.7,3.2l24.8,15.8c2.6,1.8,5.8,2.3,8.8,1.6c3-0.8,5.6-2.7,7.3-5.3
|
||||
c0.9-1.2,1.5-2.7,1.7-4.1l28.8-6.6C114.5,93.6,118.2,95.9,119.2,99.5z M60.3,48v17.4c-4.2,1.7-6.7,3.8-6.7,6.1
|
||||
c0,5.5,14.2,4.1,31.3,4.1s30.6,1.3,30.6-4.1c0-2.2-2.2-4.2-5.9-5.8V48H124l-9-10.7h6l-9.1-10.8h6L107,13.6l-7.7,9.1l6.7,8.2h-6.7
|
||||
l10.1,11.9H90.5V48h13.7v15.8c-4.5-1.2-10.1-2-16.2-2.2V40.4h16.2L94.1,28.5h6.7L90.5,16h6.7L85,1.7L72.8,16h6.7L69.1,28.2h7
|
||||
L65.8,40.4h16.2v21.3c-6,0.2-11.6,0.9-16.2,2l0-15.7h13.7v-5.2H60.6L71,30.6h-7l6.8-7.9l-7.7-9.1L52.4,26.4h5.8l-9.1,11h6.1L46,48
|
||||
H60.3z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnvironmentIcon;
|
||||
45
src/app/components/home/LightBulbSvg.tsx
Normal file
45
src/app/components/home/LightBulbSvg.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
const LightBulbSvg = ({ fill }: { fill: string }) => {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
width="100%"
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M189.228,166.95h-16.696v16.696c0,27.62,22.468,50.088,50.088,50.088h16.696v-16.696
|
||||
C239.316,189.419,216.848,166.95,189.228,166.95z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M373.536,42.508C266.754-46.472,99.182,11.12,75.128,151.303c-11.522,67.208,13.001,132.665,65.588,175.096
|
||||
c20.218,16.315,31.816,41.365,31.816,68.729v33.392c0,27.62,22.468,50.088,50.088,50.088h16.696v16.696
|
||||
c0,9.223,7.478,16.696,16.696,16.696c9.217,0,16.696-7.473,16.696-16.696v-16.696h16.696c27.62,0,50.088-22.468,50.088-50.088
|
||||
v-33.392v-0.006c0-0.002,0-0.003,0-0.003c0-27.296,11.685-52.416,32.055-68.916c43.294-35.038,68.121-87.001,68.121-142.557
|
||||
C439.668,128.983,415.559,77.541,373.536,42.508z M306.1,428.52c0,9.206-7.49,16.696-16.696,16.696H222.62
|
||||
c-9.206,0-16.696-7.49-16.696-16.696v-16.696H306.1V428.52z M372.884,183.646c0,46.033-37.447,83.48-83.48,83.48h-16.696v111.306
|
||||
h-33.392V267.126H222.62c-46.034,0-83.48-37.447-83.48-83.48v-33.392c0-9.223,7.479-16.696,16.696-16.696h33.392
|
||||
c27.323,0,51.546,13.252,66.784,33.602c15.238-20.351,39.46-33.602,66.784-33.602h33.392c9.217,0,16.696,7.473,16.696,16.696
|
||||
V183.646z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M322.796,166.95c-27.62,0-50.088,22.468-50.088,50.088v16.696h16.696c27.62,0,50.088-22.468,50.088-50.088V166.95H322.796
|
||||
z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LightBulbSvg;
|
||||
|
|
@ -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<IconProps> = ({ name, selected, onSelect }: IconProps) => (
|
||||
<>
|
||||
interface iconComponentsType {
|
||||
[key: string]: JSX.Element;
|
||||
}
|
||||
|
||||
const Icon: React.FC<IconProps> = ({ name, selected, onSelect }: IconProps) => {
|
||||
const iconComponents: iconComponentsType = {
|
||||
"Valuation Improvement": <PoundIconSvg fill="white" />,
|
||||
"Energy Savings": <LightBulbSvg fill="white" />,
|
||||
// add more mappings here if needed
|
||||
"Increasing EPC": <EnvironmentIcon fill="white" />,
|
||||
"Reducing CO2 emissions": <CarbonIcon fill="white" />,
|
||||
"Nothing Specific": <QuestionMarkIcon fill="white" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => onSelect(name)}
|
||||
className={selected ? selectedIconClasses : deSelectedIconClases}
|
||||
className={selected ? selectedIconClasses : deSelectedIconClasses}
|
||||
>
|
||||
<div>Icon</div>
|
||||
{name}
|
||||
{iconComponents[name]}
|
||||
<div className="flex items-center justify-center bg-gray-200 text-center text-sm h-10 rounded-bl-md rounded-br-md">
|
||||
{name}
|
||||
</div>
|
||||
</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";
|
||||
|
|
@ -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<HTMLInputElement>) {
|
||||
|
|
@ -95,7 +116,7 @@ export default function NewPortfolioModal({
|
|||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Panel className="w-full max-w-screen-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-brandblue mb-3"
|
||||
|
|
|
|||
34
src/app/components/home/PoundIconSvg.tsx
Normal file
34
src/app/components/home/PoundIconSvg.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
const PoundIconSvg = ({ fill }: { fill: string }) => {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
version="1.1"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 100 100"
|
||||
enableBackground="new 0 0 100 100"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M71.586,72.845c0-0.205-0.068-0.388-0.162-0.555l0.016-0.003l-2.974-7.289c-0.002-0.005-0.004-0.009-0.006-0.014
|
||||
l-0.005-0.013l-0.002,0.002c-0.18-0.403-0.581-0.687-1.051-0.687c-0.334,0-0.63,0.147-0.84,0.375l-0.005-0.01
|
||||
c-1.046,1.448-3.461,2.897-6.922,2.897c-3.944,0-5.795-2.656-10.464-2.656c-1.207,0-2.736,0.241-3.944,0.644
|
||||
c2.897-1.771,5.232-5.151,5.232-8.934c0-0.483-0.081-1.047-0.081-1.529h9.015v-0.007c0.635-0.002,1.15-0.517,1.15-1.153h0V49.6
|
||||
H60.52c-0.058-0.582-0.531-1.041-1.128-1.043v-0.006H47.802c-1.851-2.897-3.944-5.393-3.944-9.497c0-4.508,3.703-7.486,8.451-7.486
|
||||
c3.691,0,6.9,2.322,8.196,5.684c0.172,0.422,0.583,0.72,1.066,0.72c0.159,0,0.31-0.032,0.448-0.09h0
|
||||
c0.002-0.001,0.004-0.002,0.006-0.003l7.132-4.268l-0.008-0.008c0.375-0.19,0.638-0.569,0.638-1.018
|
||||
c0-0.226-0.082-0.424-0.193-0.602l0.022-0.013c-3.381-6.6-9.739-9.739-18.674-9.739c-9.498,0-19.559,6.439-19.559,16.662
|
||||
c0,3.943,1.69,6.922,3.703,9.658h-5.474v0.014c-0.015,0-0.028-0.009-0.044-0.009c-0.637,0-1.153,0.516-1.153,1.153h0v4.312h0.022
|
||||
c0.058,0.583,0.533,1.044,1.131,1.044c0.016,0,0.028-0.008,0.044-0.009v0.014h9.659c0.563,1.368,0.966,2.816,0.966,4.346
|
||||
c0,4.062-3.627,7.57-8.616,9.983c-0.008,0.003-0.014,0.007-0.022,0.011c-0.046,0.022-0.09,0.046-0.136,0.068l0.009,0.018
|
||||
c-0.331,0.203-0.563,0.551-0.563,0.968c0,0.155,0.033,0.302,0.088,0.438l-0.002,0.001l0.003,0.007
|
||||
c0.001,0.003,0.003,0.005,0.004,0.008l2.759,5.759c0.006,0.015,0.014,0.028,0.021,0.043l0.05,0.104l0.017-0.005
|
||||
c0.201,0.34,0.555,0.579,0.978,0.579c0.179,0,0.343-0.049,0.495-0.121l0.004,0.009c3.22-1.771,6.52-3.059,9.337-3.059
|
||||
c4.91,0,7.566,3.541,14.569,3.541c5.876,0,9.659-1.771,11.913-4.024l-0.005-0.01C71.405,73.523,71.586,73.211,71.586,72.845z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default PoundIconSvg;
|
||||
24
src/app/components/home/QuestionMarkIcon.tsx
Normal file
24
src/app/components/home/QuestionMarkIcon.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
const QuestionMarkIcon = ({ fill }: { fill: string }) => {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
width="100%"
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 27.774 27.774"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M10.398,22.811h4.618v4.964h-4.618V22.811z M21.058,1.594C19.854,0.532,17.612,0,14.33,0c-3.711,0-6.205,0.514-7.482,1.543
|
||||
c-1.277,1.027-1.916,3.027-1.916,6L4.911,8.551h4.577l-0.02-1.049c0-1.424,0.303-2.377,0.907-2.854
|
||||
c0.604-0.477,1.814-0.717,3.632-0.717c1.936,0,3.184,0.228,3.74,0.676c0.559,0.451,0.837,1.457,0.837,3.017
|
||||
c0,1.883-0.745,3.133-2.237,3.752l-1.797,0.766c-1.882,0.781-3.044,1.538-3.489,2.27c-0.442,0.732-0.665,2.242-0.665,4.529h4.68
|
||||
v-0.646c0-1.41,0.987-2.533,2.965-3.365c2.03-0.861,3.343-1.746,3.935-2.651c0.592-0.908,0.888-2.498,0.888-4.771
|
||||
C22.863,4.625,22.261,2.655,21.058,1.594z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuestionMarkIcon;
|
||||
Loading…
Add table
Reference in a new issue