87 lines
3.9 KiB
JavaScript
87 lines
3.9 KiB
JavaScript
import React from 'react'
|
|
|
|
const CONTENT_TYPE_STYLES = {
|
|
wallpapers: {
|
|
badge: 'from-cyan-400/90 to-sky-500/90',
|
|
overlay: 'from-sky-950/10 via-slate-950/12 to-slate-950/92',
|
|
glow: 'group-hover:shadow-[0_0_28px_rgba(34,211,238,0.18)]',
|
|
},
|
|
skins: {
|
|
badge: 'from-orange-400/90 to-amber-500/90',
|
|
overlay: 'from-orange-950/10 via-slate-950/12 to-slate-950/92',
|
|
glow: 'group-hover:shadow-[0_0_28px_rgba(251,146,60,0.18)]',
|
|
},
|
|
photography: {
|
|
badge: 'from-emerald-400/90 to-teal-500/90',
|
|
overlay: 'from-emerald-950/10 via-slate-950/12 to-slate-950/92',
|
|
glow: 'group-hover:shadow-[0_0_28px_rgba(16,185,129,0.18)]',
|
|
},
|
|
other: {
|
|
badge: 'from-fuchsia-400/90 to-rose-500/90',
|
|
overlay: 'from-rose-950/10 via-slate-950/12 to-slate-950/92',
|
|
glow: 'group-hover:shadow-[0_0_28px_rgba(244,114,182,0.18)]',
|
|
},
|
|
default: {
|
|
badge: 'from-cyan-400/90 to-orange-400/90',
|
|
overlay: 'from-slate-900/10 via-slate-950/12 to-slate-950/92',
|
|
glow: 'group-hover:shadow-[0_0_28px_rgba(125,211,252,0.16)]',
|
|
},
|
|
}
|
|
|
|
const countFormatter = new Intl.NumberFormat()
|
|
|
|
function formatArtworkCount(count) {
|
|
return `${countFormatter.format(Number(count || 0))} artworks`
|
|
}
|
|
|
|
export default function CategoryCard({ category, index = 0 }) {
|
|
const contentTypeSlug = category?.content_type?.slug || 'default'
|
|
const contentTypeName = category?.content_type?.name || 'Category'
|
|
const styles = CONTENT_TYPE_STYLES[contentTypeSlug] || CONTENT_TYPE_STYLES.default
|
|
|
|
return (
|
|
<a
|
|
href={category?.url || '/categories'}
|
|
aria-label={`Browse ${category?.name || 'category'} category`}
|
|
className={[
|
|
'group relative block cursor-pointer rounded-2xl overflow-hidden',
|
|
'transition duration-300 ease-out hover:-translate-y-1 hover:scale-[1.01]',
|
|
styles.glow,
|
|
].join(' ')}
|
|
style={{ animationDelay: `${Math.min(index, 8) * 60}ms` }}
|
|
>
|
|
<div className="relative aspect-[4/5] overflow-hidden rounded-2xl border border-white/10 bg-slate-950/80">
|
|
<img
|
|
src={category?.cover_image}
|
|
alt={`Cover artwork for ${category?.name || 'category'}`}
|
|
loading="lazy"
|
|
className="h-full w-full object-cover transition duration-500 group-hover:scale-110"
|
|
/>
|
|
|
|
<div className={`absolute inset-0 bg-gradient-to-b ${styles.overlay} transition duration-500 group-hover:from-black/20 group-hover:to-black/90`} />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.22),transparent_42%)] opacity-0 transition duration-500 group-hover:opacity-100" />
|
|
<div className="absolute inset-x-0 top-0 flex items-center justify-between gap-3 p-4">
|
|
<span className={`inline-flex rounded-full bg-gradient-to-r ${styles.badge} px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-950 shadow-[0_10px_24px_rgba(0,0,0,0.24)]`}>
|
|
{contentTypeName}
|
|
</span>
|
|
<span className="rounded-full border border-white/15 bg-black/25 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em] text-white/78 backdrop-blur">
|
|
{formatArtworkCount(category?.artwork_count)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="absolute inset-x-0 bottom-0 p-4 sm:p-5">
|
|
<div className="rounded-[22px] border border-white/10 bg-black/30 p-4 backdrop-blur-md transition duration-300 group-hover:border-white/20 group-hover:bg-black/42">
|
|
<div className="mb-3 h-px w-14 bg-gradient-to-r from-white/70 to-transparent transition duration-300 group-hover:w-24" />
|
|
<h3 className="text-lg font-semibold tracking-[-0.02em] text-white sm:text-xl">
|
|
{category?.name}
|
|
</h3>
|
|
<p className="mt-2 text-sm leading-6 text-white/65">
|
|
Explore {category?.name} across wallpapers, skins, themes, and digital art collections.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|