87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
|
import { Button } from "@heroui/react";
|
||
|
|
import BorderedButton from "@/components/common/BorderedButton";
|
||
|
|
|
||
|
|
interface EarnOpportunityCardProps {
|
||
|
|
pointsLabel: string;
|
||
|
|
title: string;
|
||
|
|
subtitle: string;
|
||
|
|
metricLabel: string;
|
||
|
|
metricValue: string;
|
||
|
|
buttonText: string;
|
||
|
|
onButtonClick?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function EarnOpportunityCard({
|
||
|
|
pointsLabel,
|
||
|
|
title,
|
||
|
|
subtitle,
|
||
|
|
metricLabel,
|
||
|
|
metricValue,
|
||
|
|
buttonText,
|
||
|
|
onButtonClick,
|
||
|
|
}: EarnOpportunityCardProps) {
|
||
|
|
return (
|
||
|
|
<div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
|
||
|
|
{/* Top Section - Logo and Points Badge */}
|
||
|
|
<div className="flex items-start justify-between">
|
||
|
|
{/* Logo */}
|
||
|
|
<div
|
||
|
|
className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
|
||
|
|
style={{
|
||
|
|
background: "linear-gradient(135deg, rgba(0, 187, 167, 1) 0%, rgba(0, 122, 85, 1) 100%)"
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span className="text-[10px] font-bold text-white leading-[125%] tracking-[-0.11px]">
|
||
|
|
LOGO
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Points Badge */}
|
||
|
|
<div
|
||
|
|
className="rounded-full px-3 py-1 flex items-center justify-center"
|
||
|
|
style={{
|
||
|
|
background: "#fff5ef",
|
||
|
|
border: "1px solid #ffc9ad"
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span className="text-[10px] font-bold leading-[150%] tracking-[0.01em]" style={{ color: "#ff6900" }}>
|
||
|
|
{pointsLabel}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Middle Section - Title and Subtitle */}
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
|
||
|
|
{title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Bottom Section - Metric and Button */}
|
||
|
|
<div className="flex items-center gap-6">
|
||
|
|
{/* Metric */}
|
||
|
|
<div className="flex-1 flex flex-col gap-1">
|
||
|
|
<span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{metricLabel}
|
||
|
|
</span>
|
||
|
|
<span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
|
||
|
|
{metricValue}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Button */}
|
||
|
|
<BorderedButton
|
||
|
|
size="lg"
|
||
|
|
onClick={onButtonClick}
|
||
|
|
className="bg-[#f3f4f6] dark:bg-gray-700 text-text-primary dark:text-white"
|
||
|
|
>
|
||
|
|
{buttonText}
|
||
|
|
</BorderedButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|