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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user