feat: Add banner display to MicroDAO list cards

- Add banner background to MicroDAO cards in list view
- Use normalizeAssetUrl for banner URLs
- Add fallback green gradient when banner_url is null
- Banner displays as background with overlay for readability
This commit is contained in:
Apple
2025-12-02 09:38:58 -08:00
parent 7ac64c3183
commit 770c6a0dfe

View File

@@ -80,16 +80,32 @@ export default function MicrodaoListPage() {
</div>
) : (
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{items.map((m) => (
{items.map((m) => {
const bannerSrc = normalizeAssetUrl(m.banner_url);
return (
<Link
key={m.id}
href={`/microdao/${m.slug}`}
className="group relative bg-slate-800/30 border border-slate-700/50 rounded-xl p-5 hover:border-cyan-500/30 hover:bg-slate-800/50 transition-all duration-300"
className="group relative bg-slate-800/30 border border-slate-700/50 rounded-xl overflow-hidden hover:border-cyan-500/30 hover:bg-slate-800/50 transition-all duration-300"
>
{/* Banner background */}
{bannerSrc ? (
<div
className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-green-600/20"
style={{
backgroundImage: `linear-gradient(to bottom, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url(${bannerSrc})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-green-600/20" />
)}
{/* Glow effect on hover */}
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500/5 to-violet-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative space-y-3">
<div className="relative space-y-3 p-5">
{/* Title + Badges */}
<div className="flex items-start justify-between gap-3">
{/* Logo */}
@@ -187,7 +203,8 @@ export default function MicrodaoListPage() {
</div>
</div>
</Link>
))}
);
})}
</div>
)}
</div>