added additional styling to plan page

This commit is contained in:
Khalim Conn-Kowlessar 2023-05-31 10:03:03 +01:00
parent f3793ad020
commit c3c07e1691

View file

@ -8,6 +8,7 @@ import { useState } from "react";
import { PencilSquareIcon } from "@heroicons/react/24/outline";
import PlanPart from "@/app/components/plan/PlanPart";
import EditEpctargetModal from "@/app/components/property/EditEpcTargetModal";
import Link from "next/link";
export default function Plan({
params,
@ -59,8 +60,10 @@ export default function Plan({
0
);
const partsTotalCost = partsConfig.reduce((sum, part) => sum + part.cost, 0);
const [budget, setBudget] = useState("Not set");
const [totalCost, setTotalCost] = useState("Not set");
const [totalCost, setTotalCost] = useState(partsTotalCost);
const [installTime, setInstallTime] = useState(totalWorkHours);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [targetEpcRating, setTargetEpcRating] = useState<EpcRating | "">(
@ -118,15 +121,26 @@ export default function Plan({
Target EPC: {targetEpcRating}
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
<li className="px-2 mb-2">Total cost: {totalCost}</li>
<li className="px-2 mb-2">Budget: {budget}</li>
<li
onClick={() => console.log("clicked")}
className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200"
>
Budget: {budget}
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
<Link
href={`/portfolio/${portfolioId}/property/${lmkKey}?postcode=${postcode}`}
>
<li className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200">
Edit Property Details
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
</Link>
<li className="px-2 mb-2">Total cost: £{totalCost}</li>
<li className="px-2 mb-2">
Installation Time: {installTime} hours
</li>
<li className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200">
Edit Property Details
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
</ul>
</div>
</div>