Gregor Klevze
4f9b43bbba
- HomeController: is_logged_in now lives inside props JSON (not separate view var) - HomepageService: allForUser() adds user_data, fresh, suggested_creators; auth payload includes is_logged_in:true; guest payload merged with is_logged_in:false - getTrending/getFreshUploads/getFollowingFeed: limit 12→10 (2 clean rows of 5) - New getUserData() — unread messages + notifications counts via DB - New getSuggestedCreators() — top followed-count creators not yet followed, cached 5 min React — new components: - HomeWelcomeRow: greeting bar with avatar, unread message/notification badges, upload CTA - HomeFromFollowing: art grid from followed creators with empty-state - HomeTrendingForYou: personalized grid adapts heading/link to user's top tag - HomeBecauseYouLike: secondary personalized section keyed on top tag - HomeSuggestedCreators: 4-col creator cards with avatar, stats, View Profile link - HomeCTA: gradient upload banner; guest sees Create Account second CTA - HomeCategories: 5-tile static category grid with mascot images React — updated: - HomePage: split into GuestHomePage + AuthHomePage; routes on is_logged_in prop - HomeHero: isLoggedIn prop; upload href gates on auth; CTA → /discover/trending - HomeTrending: see-all → /discover/trending; grid 4→5 cols; slice to multiple of 5 - HomeFresh: see-all → /discover/fresh; grid 4→5 cols; slice to multiple of 5 - HomeFromFollowing/TrendingForYou/BecauseYouLike: 5-col grid, slice to multiple of 5 - HomeCategories: mascots per category (wallpapers/photography/skins/other), smaller tiles
74 lines
3.3 KiB
JavaScript
74 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
|
|
const FALLBACK = 'https://files.skinbase.org/default/missing_md.webp'
|
|
const AVATAR_FALLBACK = 'https://files.skinbase.org/avatars/default.webp'
|
|
|
|
function FreshCard({ item }) {
|
|
const username = item.author_username ? `@${item.author_username}` : null
|
|
|
|
return (
|
|
<article>
|
|
<a
|
|
href={item.url}
|
|
className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
|
|
>
|
|
<div className="relative aspect-video overflow-hidden bg-neutral-900">
|
|
{/* Gloss sheen */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
|
|
|
|
<img
|
|
src={item.thumb || FALLBACK}
|
|
alt={item.title}
|
|
className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={(e) => { e.currentTarget.src = FALLBACK }}
|
|
/>
|
|
|
|
{/* Top-right View badge */}
|
|
<div className="absolute right-3 top-3 z-30 flex items-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
|
|
<span className="inline-flex items-center rounded-md bg-black/60 px-2 py-1 text-[11px] font-medium text-white ring-1 ring-white/10">View</span>
|
|
</div>
|
|
|
|
{/* Bottom info overlay — always visible on mobile, hover-only on md+ */}
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
|
|
<div className="truncate text-sm font-semibold text-white">{item.title}</div>
|
|
<div className="mt-1 flex items-center gap-2 text-xs text-white/80">
|
|
<img
|
|
src={item.author_avatar || AVATAR_FALLBACK}
|
|
alt={item.author}
|
|
className="w-6 h-6 rounded-full object-cover shrink-0"
|
|
onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
|
|
/>
|
|
<span className="truncate">{item.author}</span>
|
|
{username && <span className="text-white/50 shrink-0">{username}</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span className="sr-only">{item.title} by {item.author}</span>
|
|
</a>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export default function HomeFresh({ items }) {
|
|
if (!Array.isArray(items) || items.length === 0) return null
|
|
|
|
return (
|
|
<section className="mt-14 px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<h2 className="text-xl font-bold text-white">🆕 Fresh Uploads</h2>
|
|
<a href="/discover/fresh" className="text-sm text-nova-300 hover:text-white transition">
|
|
See all →
|
|
</a>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
|
{items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
|
|
<FreshCard key={item.id} item={item} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|