sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-20 06:24:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: make extendableCard and deals page more responsive

Browse Source
This commit is contained in:
sirin 2024-10-05 03:59:17 +07:00
parent 56f0168574
commit 0b7a973643
2 changed files with 34 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/deals/page.tsx
View File

@ -104,7 +104,7 @@ export default function Deals() {
<p className="mt-3">The deals attracting the most interest right now</p> <p className="mt-3">The deals attracting the most interest right now</p>
</div> </div>
{/* block for all the deals */} {/* block for all the deals */}
<div className="ml-[15%] mt-10 grid grid-cols-3"> <div className="mx-[15%] mt-10 grid grid-cols-3">
{filteredData.map((item, index) => ( {filteredData.map((item, index) => (
<ExtendableCard <ExtendableCard
key={index} key={index}

76
src/components/extendableCard.tsx
View File

@ -1,8 +1,9 @@
"use client"; "use client";
import { CalendarDaysIcon } from "lucide-react"; import { CalendarDaysIcon } from "lucide-react";
import Image from "next/image";
interface XMap { interface XMap {
// tagName: colorCode
[tag: string]: string; [tag: string]: string;
} }
@ -19,33 +20,30 @@ interface ExtendableCardProps {
export function ExtendableCard(props: ExtendableCardProps) { export function ExtendableCard(props: ExtendableCardProps) {
return ( return (
<div className="group relative w-full max-w-sm overflow-hidden rounded-lg bg-card shadow-md transition-all duration-500 hover:shadow-lg "> <div className="flex flex-col h-full group">
<div className="aspect-[4/3] overflow-hidden"> {/* Image */}
<img <div className="relative">
src="/money.png" <Image src="/money.png" alt="Card image" width={400} height={300} layout="responsive" objectFit="cover" />
alt="Card image" {/* Info 0 overlaps Image */}
width="400" <div className="group-hover:absolute group-hover:bottom-0 group-hover:left-0 group-hover:right-0 p-4 bg-opacity-75 bg-white transition-all duration-300 group-hover:bg-opacity-100 z-10">
height="300" <div className="font-semibold text-card-foreground transition-colors duration-1000 group-hover:text-primary">
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" {props.name}
style={{ aspectRatio: "400/300", objectFit: "cover" }} </div>
/> <p className="text-sm text-muted-foreground">{props.description}</p>
</div>
<div className="p-1 md:p-4">
<div className="text-sm md:text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
{props.name}
</div> </div>
</div>
{/* Default content (visible when not hovered) */} {/* Info 1 (Hidden on hover) */}
<div className="mt-2 flex items-center text-muted-foreground group-hover:hidden"> <div className="transition-opacity duration-300 group-hover:opacity-0">
<div className="mt-2 flex items-center text-muted-foreground">
<span className="flex items-center pt-2 gap-1"> <span className="flex items-center pt-2 gap-1">
<CalendarDaysIcon width={20} /> <CalendarDaysIcon width={20} />
<div className="text-xs md:text-lg">Joined {props.joinDate}</div> <div className="text-xs md:text-lg">Joined {props.joinDate}</div>
</span> </span>
</div> </div>
<div className="mt-2 flex items-center text-muted-foreground group-hover:hidden"> <div className="mt-2 flex items-center text-muted-foreground">
<span className="text-xs md:text-sm">{props.location}</span> <span className="text-xs md:text-sm">{props.location}</span>
</div> </div>
<div className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden"> <div className="mt-2 flex flex-wrap items-center text-muted-foreground">
{props.tags.map((tag) => ( {props.tags.map((tag) => (
<span <span
id="tag" id="tag"
@ -55,29 +53,21 @@ export function ExtendableCard(props: ExtendableCardProps) {
</span> </span>
))} ))}
</div> </div>
</div>
{/* Hover content (appears when hovered) */} {/* Info 2 (Visible on hover) */}
<div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-1000 ease-in-out"> <div className="transition-transform duration-300 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
<p className="text-xs md:text-sm text-muted-foreground">{props.description}</p> <hr className="-ml-4 mb-2" />
<div className="mt-4 flex items-center justify-between"> <p className="text-base">
<div className="flex items-center space-x-2"> <strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
<div> </p>
<hr className="w-screen -ml-4 mb-2" /> <hr className="-ml-4 mb-2 mt-2" />
<p className="text-xs md:text-base"> <p className="mb-2 text-base">
<strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved <strong>{props.totalInvestor.toLocaleString()}</strong> investors
</p> </p>
<hr className="w-screen -ml-4 mb-2 mt-2" /> <hr className="-ml-4 mb-2" />
<p className="mb-2 text-xs md:text-base"> <p className="text-base">
<strong>{props.totalInvestor.toLocaleString()}</strong> investors <strong>${props.minInvestment.toLocaleString()}</strong> min. investment
</p> </p>
<hr className="w-screen -ml-4 mb-2" />
<p className="text-xs md:text-base">
<strong>${props.minInvestment.toLocaleString()}</strong> min. investment
</p>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
); );