52 lines
2.9 KiB
JavaScript
52 lines
2.9 KiB
JavaScript
import React from 'react'
|
|
|
|
function themeStyle(theme) {
|
|
return {
|
|
'--world-accent': theme?.accent_color || '#38bdf8',
|
|
'--world-accent-secondary': theme?.accent_color_secondary || '#0f172a',
|
|
}
|
|
}
|
|
|
|
export default function WorldCard({ world, compact = false }) {
|
|
if (!world) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={world.public_url}
|
|
className={`group relative block w-full overflow-hidden rounded-[28px] border border-white/10 bg-slate-950/70 transition duration-300 hover:-translate-y-1 hover:border-white/20 ${compact ? 'p-5' : 'p-6'}`}
|
|
style={themeStyle(world.theme)}
|
|
>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_color-mix(in_srgb,var(--world-accent)_30%,transparent),_transparent_42%),linear-gradient(135deg,_color-mix(in_srgb,var(--world-accent-secondary)_94%,black),_rgba(2,6,23,0.94))] opacity-95" />
|
|
{world.cover_url ? <img src={world.cover_url} alt={world.title} className="absolute inset-0 h-full w-full object-cover opacity-20 transition duration-500 group-hover:scale-[1.03]" /> : null}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/80 to-slate-950/10" />
|
|
|
|
<div className="relative flex h-full min-h-[16rem] flex-col justify-between">
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-white/70">
|
|
<span className="rounded-full border border-white/15 bg-white/10 px-3 py-1">{world.phase || world.status}</span>
|
|
{world.badge_label ? <span className="rounded-full border border-white/15 bg-black/30 px-3 py-1">{world.badge_label}</span> : null}
|
|
</div>
|
|
<h3 className={`mt-4 max-w-xl font-semibold tracking-[-0.03em] text-white ${compact ? 'text-2xl' : 'text-3xl'}`}>{world.title}</h3>
|
|
{world.tagline ? <p className="mt-2 text-sm uppercase tracking-[0.18em] text-white/55">{world.tagline}</p> : null}
|
|
{world.summary ? <p className="mt-4 max-w-2xl text-sm leading-6 text-slate-200/85">{world.summary}</p> : null}
|
|
</div>
|
|
|
|
<div className="mt-6 flex flex-wrap items-end justify-between gap-3">
|
|
<div className="space-y-1 text-sm text-slate-200/80">
|
|
{world.timeframe_label ? <div>{world.timeframe_label}</div> : null}
|
|
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.16em] text-white/55">
|
|
<i className={world.icon_name || 'fa-solid fa-globe'} />
|
|
<span>{world.theme?.label || world.type}</span>
|
|
</div>
|
|
</div>
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-white transition group-hover:bg-white/15">
|
|
{world.cta_label || 'Open world'}
|
|
<i className="fa-solid fa-arrow-right" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
} |