mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-30 12:55:02 +00:00
Merge pull request #17 from Hestia-Homes/stefhomepage
Improving home page layout
This commit is contained in:
KhalimCK
GitHub
commit
9bee4af5d5
6 changed files with 51 additions and 41 deletions
|
|
@ -9,28 +9,28 @@
|
|||
<polygon style="fill:#B1C6E4;" points="89.044,467.478 89.044,243.353 89.044,222.609 422.957,222.609 422.957,243.353
|
||||
422.957,467.478 "/>
|
||||
<polygon style="fill:#9DB0CA;" points="256,467.478 422.957,467.478 422.957,243.353 422.957,222.609 256,222.609 "/>
|
||||
<path style="fill:#875334;" d="M456.348,211.478L356.174,111.304V94.609c0-9.22,7.475-16.696,16.696-16.696h66.783
|
||||
<path style="fill:#d3b488;" d="M456.348,211.478L356.174,111.304V94.609c0-9.22,7.475-16.696,16.696-16.696h66.783
|
||||
c9.22,0,16.696,7.475,16.696,16.696V211.478z"/>
|
||||
<polygon style="fill:#DBE9FD;" points="427.174,200.348 256,29.174 84.826,200.348 "/>
|
||||
<polygon style="fill:#C5DCFD;" points="427.174,200.348 256,29.174 256,200.348 "/>
|
||||
<path style="fill:#FF6243;" d="M495.305,283.826c-4.272,0-8.544-1.631-11.804-4.892L256,51.435L28.5,278.934
|
||||
<path style="fill:#3943b7;" d="M495.305,283.826c-4.272,0-8.544-1.631-11.804-4.892L256,51.435L28.5,278.934
|
||||
c-6.521,6.521-17.087,6.521-23.609,0c-6.521-6.516-6.521-17.092,0-23.609L244.195,16.021c6.521-6.521,17.087-6.521,23.609,0
|
||||
l239.304,239.304c6.521,6.516,6.521,17.092,0,23.609C503.848,282.195,499.576,283.826,495.305,283.826z"/>
|
||||
<g>
|
||||
<path style="fill:#FF3501;" d="M267.804,16.022c-3.26-3.261-7.532-4.892-11.804-4.892v40.304l227.501,227.501
|
||||
<path style="fill:#14163d;" d="M267.804,16.022c-3.26-3.261-7.532-4.892-11.804-4.892v40.304l227.501,227.501
|
||||
c3.261,3.261,7.533,4.892,11.804,4.892s8.544-1.631,11.804-4.892c6.521-6.516,6.521-17.092,0-23.609L267.804,16.022z"/>
|
||||
<rect x="289.392" y="222.609" style="fill:#FF3501;" width="33.391" height="111.304"/>
|
||||
<rect x="356.174" y="222.609" style="fill:#FF3501;" width="33.391" height="111.304"/>
|
||||
<rect x="289.392" y="267.13" style="fill:#FF3501;" width="100.174" height="33.391"/>
|
||||
<rect x="289.392" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
|
||||
<rect x="356.174" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
|
||||
<rect x="289.392" y="267.13" style="fill:#14163d;" width="100.174" height="33.391"/>
|
||||
</g>
|
||||
<rect x="155.826" y="222.609" style="fill:#ECEFF0;" width="33.391" height="111.304"/>
|
||||
<g>
|
||||
<rect x="122.435" y="367.304" style="fill:#FF6243;" width="33.391" height="100.174"/>
|
||||
<rect x="189.218" y="367.304" style="fill:#FF6243;" width="33.391" height="100.174"/>
|
||||
<rect x="122.435" y="400.696" style="fill:#FF6243;" width="100.174" height="33.391"/>
|
||||
<rect x="122.435" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
|
||||
<rect x="189.218" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
|
||||
<rect x="122.435" y="400.696" style="fill:#3943b7;" width="100.174" height="33.391"/>
|
||||
</g>
|
||||
<rect x="256" y="367.304" style="fill:#DADFE4;" width="33.391" height="100.174"/>
|
||||
<path style="fill:#60AED5;" d="M356.174,467.478h-66.783v-66.783h50.087c9.22,0,16.696,7.475,16.696,16.696V467.478z"/>
|
||||
<path style="fill:#3e4073;" d="M356.174,467.478h-66.783v-66.783h50.087c9.22,0,16.696,7.475,16.696,16.696V467.478z"/>
|
||||
<rect x="55.652" y="333.913" style="fill:#DBE9FD;" width="400.696" height="33.391"/>
|
||||
<rect x="256" y="333.913" style="fill:#C5DCFD;" width="200.348" height="33.391"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
|
@ -54,12 +54,12 @@ const statusColor: {
|
|||
} = {
|
||||
scoping: {
|
||||
class: "bg-emerald-500 hover:bg-emerald-500",
|
||||
text: "scoping",
|
||||
text: "Scoping",
|
||||
hoverText: "This portfolio is currently in scoping",
|
||||
propertyHoverText: "This property is currently in scoping",
|
||||
},
|
||||
assessment: {
|
||||
class: "bg-emerald-400 hover:bg-emerald-500",
|
||||
class: "bg-emerald-400 hover:bg-emerald-500 truncate text-overflow: ellipsis",
|
||||
text: "Non-invasive Assessment",
|
||||
hoverText: "This portfolio is currently in the assessment stage",
|
||||
propertyHoverText: "This property is currently in the assessment stage",
|
||||
|
|
@ -72,7 +72,7 @@ const statusColor: {
|
|||
},
|
||||
tendering: {
|
||||
class: "bg-emerald-500 hover:bg-emerald-500",
|
||||
text: "tendering",
|
||||
text: "Tendering",
|
||||
hoverText: "This portfolio is currently in the tendering stage",
|
||||
propertyHoverText: "This property is currently in tender",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import NewPortfolioModal from "./NewPortfolioModal";
|
|||
|
||||
const styles = {
|
||||
wrapper:
|
||||
"bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
|
||||
header: "relative mt-2 mx-2",
|
||||
"group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer rounded-3xl flex flex-col items-center justify-center aspect-square",
|
||||
header: "relative mt-2 mx-2 w-full",
|
||||
imageWrapper:
|
||||
"h-56 rounded-2xl overflow-hidden flex justify-center items-center",
|
||||
"relative rounded-2xl overflow-hidden flex justify-center items-center",
|
||||
wrapperAnime: "transition-all duration-500 ease-in-out",
|
||||
image: "object-cover w-8/12 h-8/12 mx-auto fill-white",
|
||||
textWrapper: "pt-10 pb-6 w-full px-4 flex justify-center items-center",
|
||||
text: "font-medium leading-none text-base tracking-wider text-gray-400",
|
||||
textWrapper: "w-full flex justify-center items-center pt-6",
|
||||
text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400",
|
||||
};
|
||||
|
||||
const AddNewCard = () => {
|
||||
|
|
@ -24,22 +24,24 @@ const AddNewCard = () => {
|
|||
|
||||
return (
|
||||
<a onClick={openModal}>
|
||||
<div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.imageWrapper}>
|
||||
<div className="w-1/4">
|
||||
<PlusIcon color="white" />
|
||||
<NewPortfolioModal
|
||||
isOpen={isModalOpen}
|
||||
setIsOpen={setModalIsOpen}
|
||||
/>
|
||||
<div className="flex justify-center">
|
||||
<div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.imageWrapper}>
|
||||
<div className="w-1/4">
|
||||
<PlusIcon color="white" />
|
||||
<NewPortfolioModal
|
||||
isOpen={isModalOpen}
|
||||
setIsOpen={setModalIsOpen}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.textWrapper}>
|
||||
<h1 className={styles.text}>{`${title}`}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.textWrapper}>
|
||||
<h1 className={styles.text}>{`${title}`}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,14 +5,16 @@ import { PortfolioStatus } from "@/app/db/schema/portfolio";
|
|||
import { formatNumber } from "@/app/utils";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const styles = {
|
||||
wrapper:
|
||||
"active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-gray-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
|
||||
header: "relative mt-2 mx-2 border-red",
|
||||
imageWrapper: "h-56 rounded-2xl overflow-hidden flex items-center",
|
||||
"group py-2 px-3 active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-2xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
|
||||
header: "relative mt-2 w-full border-brandblue",
|
||||
budgetWrapper: "min-h-7 pr-4 flex justify-end w-full text-right max-h-16 my-auto text-gray-700 group-hover:text-white transition-all duration-500 ease-in-out relative",
|
||||
imageWrapper: "rounded-2xl overflow-hidden flex justify-center items-center",
|
||||
wrapperAnime: "transition-all duration-500 ease-in-out",
|
||||
image: "object-cover mx-auto",
|
||||
textWrapper: "pt-6 pb-3 w-full px-4 flex justify-between items-center",
|
||||
textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center group-hover:text-white transition-all duration-500 ease-in-out",
|
||||
};
|
||||
|
||||
interface CardProps {
|
||||
|
|
@ -21,7 +23,7 @@ interface CardProps {
|
|||
image: string;
|
||||
budget: number | null;
|
||||
status: (typeof PortfolioStatus)[number];
|
||||
}
|
||||
};
|
||||
|
||||
const Card = ({ id, title, image, budget, status }: CardProps) => {
|
||||
const router = useRouter();
|
||||
|
|
@ -36,9 +38,10 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
|
|||
<div>
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className={[styles.wrapper, styles.wrapperAnime].join(" ")}
|
||||
className={[styles.wrapper, styles.wrapperAnime].join(" ")}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.budgetWrapper} >{budgetFormatted}</div>
|
||||
<div className={styles.imageWrapper}>
|
||||
<Image
|
||||
src={image}
|
||||
|
|
@ -51,10 +54,9 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
|
|||
</div>
|
||||
<div className={styles.textWrapper}>
|
||||
<h1>{`${title}`}</h1>
|
||||
<div>{budgetFormatted}</div>
|
||||
</div>
|
||||
<div className="mb-2 flex justify-end w-full">
|
||||
<div className="flex justify-end w-full pr-4">
|
||||
<div className="mb-4 flex justify-end w-full">
|
||||
<div className="flex justify-center w-full">
|
||||
<StatusBadge status={status} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export default function CardTiles({
|
|||
image={`house-icon-${image_idx}.svg`}
|
||||
budget={portfolio.budget}
|
||||
status={portfolio.status}
|
||||
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ import { AuthOptions } from "@/app/api/auth/[...nextauth]/route";
|
|||
import { getServerSession } from "next-auth";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
|
||||
const Home = async () => {
|
||||
const user = await getServerSession(AuthOptions);
|
||||
|
||||
|
||||
if (!user?.user) {
|
||||
console.error("User not found");
|
||||
|
|
@ -14,12 +16,15 @@ const Home = async () => {
|
|||
|
||||
const portfolios = await getPortfolios(user.user.dbId);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-center">
|
||||
<h1 className="text-3xl font-bold mt-3 mb-5"> Your Portfolios </h1>
|
||||
<h1 className="text-3xl font-bold mt-3 mb-5 text-gray-700"> Your Portfolios </h1>
|
||||
</div>
|
||||
<div className="px-5">
|
||||
<CardTiles Portfolios={portfolios} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue