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>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
<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
|
<Link
|
||||||
key={m.id}
|
key={m.id}
|
||||||
href={`/microdao/${m.slug}`}
|
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 */}
|
{/* 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="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 */}
|
{/* Title + Badges */}
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
@@ -187,7 +203,8 @@ export default function MicrodaoListPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user