File size: 1,837 Bytes
e9c0734 0d21acd e9c0734 b9b05e2 e9c0734 91d7c85 0d21acd b73b7f6 e9c0734 b9b05e2 91d7c85 e9c0734 b73b7f6 91d7c85 b73b7f6 b9b05e2 e9c0734 b73b7f6 e9c0734 b73b7f6 e9c0734 b73b7f6 0d21acd b73b7f6 0d21acd b73b7f6 0d21acd e9c0734 |
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React from 'react';
import Link from 'next/link';
import type { Category } from '../types/categories';
import { getColorConfig } from '../lib/utils';
type CategoryCardProps = Category;
const CategoryCard: React.FC<CategoryCardProps> = ({
title,
icon: Icon,
colorName,
description,
status,
graphic: Graphic,
slug,
}) => {
const { bg, text, gradient, iconBg } = getColorConfig(colorName);
const isComingSoon = status === 'Coming Soon';
const CardContent = () => (
<>
{(status === 'New' || status === 'Coming Soon') && (
<div className={`absolute top-4 right-4 ${bg} ${text} text-xs font-bold py-1 px-2 rounded-full`}>
{status}
</div>
)}
<div className="mb-2">
<div className="flex items-center">
<div className={`${iconBg} ${text} p-2 rounded-full mr-3`}>
<Icon size={20} />
</div>
<h2 className="text-xl font-bold">{title}</h2>
</div>
</div>
<div className="flex-grow px-8 py-4">
<Graphic />
</div>
<p className="text-sm font-medium leading-tight mt-2">{description}</p>
</>
);
return (
<div className={`rounded-xl p-6 text-white w-92 h-72 flex flex-col relative shadow-lg transition-transform duration-300 ease-in-out hover:scale-105 ${gradient}`}>
{isComingSoon ? (
<>
<CardContent />
<button
className="w-full bg-white opacity-50 cursor-not-allowed py-2 px-3 rounded-lg text-xs transition-colors mt-3 text-black font-extrabold"
disabled
>
Coming Soon
</button>
</>
) : (
<Link href={`/category/${slug}`} className="flex flex-col flex-grow">
<CardContent />
</Link>
)}
</div>
);
};
export default CategoryCard; |