sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54: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>
</div>
{/* 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) => (
<ExtendableCard
key={index}

76
src/components/extendableCard.tsx
View File

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