50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Download } from "lucide-react";
|
|
|
|
interface DownloadCardProps {
|
|
title: string;
|
|
fileType?: string;
|
|
fileSize: string;
|
|
fileUrl: string;
|
|
}
|
|
|
|
export default function DownloadCard({
|
|
title,
|
|
fileType = "PDF",
|
|
fileSize,
|
|
fileUrl,
|
|
}: DownloadCardProps) {
|
|
return (
|
|
<a
|
|
href={fileUrl}
|
|
download
|
|
className="min-h-40 h-full group relative w-full max-w-md border border-white/10 bg-[#171616b8] transition rounded-lg p-4 flex flex-col gap-4 items-start justify-between"
|
|
>
|
|
{/* Background glow effect */}
|
|
<div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
|
|
|
{/* Decorative corner accent */}
|
|
<div className="absolute top-0 right-0 w-24 h-24 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-00 transition-opacity duration-500" />
|
|
{/* Top section */}
|
|
<div className="flex justify-between items-start">
|
|
<h3 className="text-xl font-unbounded font-bold group-hover:text-red-500 text-white leading-tight transition-colors duration-300">
|
|
{title}
|
|
</h3>
|
|
|
|
<span className="text-sm font-medium text-white">{fileType}</span>
|
|
</div>
|
|
|
|
{/* Bottom section */}
|
|
<div className="flex w-full justify-between items-center">
|
|
<span className="text-sm text-gray-200">{fileSize}</span>
|
|
|
|
<Download
|
|
size={20}
|
|
className="text-gray-600 transition group-hover:text-red-700 duration-300"
|
|
/>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|