junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new portfolio is squared up nicely

Browse source
This commit is contained in:
StefanWout 2024-09-19 12:00:55 +01:00
parent a35af09c3a
commit 98aca9371b
3 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/app/components/home/AddNewCard.tsx
View file

@ -4,13 +4,13 @@ import NewPortfolioModal from "./NewPortfolioModal";
const styles = {
wrapper:
"group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square 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: "w-full flex justify-center items-center",
textWrapper: "w-full flex justify-center items-center pt-6",
text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400",
};
@ -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>
);
};

6
src/app/components/home/Card.tsx
View file

@ -8,9 +8,9 @@ import Image from "next/image";
const styles = {
wrapper:
"group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
header: "relative mt-2 w-full border-red",
budgetWrapper: "min-h-7 pt-2 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",
"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",

2
src/app/home/page.tsx
View file

@ -22,7 +22,9 @@ const Home = async () => {
<div className="flex justify-center">
<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>
</>
);
};