File size: 1,921 Bytes
c35213b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 'use client';
interface PricingCardProps {
label: string;
price: string;
productId: string;
discordId: string;
highlight?: boolean;
badge?: string;
}
export default function PricingCard({ label, price, productId, discordId, highlight, badge }: PricingCardProps) {
const storeName = process.env.NEXT_PUBLIC_SELLAPP_STORE || 'YOUR_SELLAPP_STORE_NAME';
const handlePurchase = () => {
// Build the Sell.app direct checkout URL with pre-filled Discord ID
const checkoutUrl = `https://${storeName}.sell.app/product/${productId}?customFields[discord_id]=${encodeURIComponent(discordId)}`;
window.open(checkoutUrl, '_blank');
};
return (
<div className={`border ${highlight ? 'border-zinc-500 hover:border-white' : 'border-zinc-800 hover:border-zinc-600'} ${highlight ? 'bg-zinc-900' : 'bg-zinc-900/50'} p-6 flex flex-col items-center justify-between group transition-colors relative ${badge ? 'mt-4 sm:mt-0' : ''}`}>
{badge && (
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-white text-black font-mono text-[8px] font-bold tracking-widest px-2 py-1 uppercase whitespace-nowrap">
{badge}
</div>
)}
<div className={`text-center mb-6 ${badge ? 'mt-2' : ''}`}>
<div className={`font-mono text-[9px] tracking-widest ${highlight ? 'text-white' : 'text-zinc-500'} uppercase mb-2`}>{label}</div>
<div className="text-xl font-bold font-mono tracking-tighter text-white">{price}</div>
</div>
<button
onClick={handlePurchase}
className={`w-full text-center px-4 py-3 font-mono text-[9px] font-bold tracking-widest transition-colors uppercase cursor-pointer ${
highlight
? 'bg-white text-black group-hover:bg-zinc-200'
: 'bg-zinc-800 text-white group-hover:bg-white group-hover:text-black'
}`}
>
Purchase
</button>
</div>
);
}
|