feat: ship creator journey v2 and profile updates
This commit is contained in:
@@ -57,84 +57,98 @@ export default function RecommendedCreators() {
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
|
||||
<div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 shadow-2xl shadow-black/20">
|
||||
<div className="flex items-start justify-between gap-4 px-5 pt-5 pb-4 sm:px-6 sm:pt-6">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Community</p>
|
||||
<h2 className="mt-2 text-xl font-semibold text-white">Recommended Creators</h2>
|
||||
<p className="mt-2 max-w-md text-sm leading-6 text-slate-300">
|
||||
Strong accounts you are not following yet, selected to help you improve your feed and discover new audiences.
|
||||
<h2 className="mt-1 text-xl font-semibold text-white">Recommended Creators</h2>
|
||||
<p className="mt-1.5 text-sm leading-6 text-slate-400">
|
||||
Strong accounts you are not following yet.
|
||||
</p>
|
||||
</div>
|
||||
<a className="inline-flex items-center justify-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15 sm:justify-start" href="/creators/top">
|
||||
<a
|
||||
className="mt-1 inline-flex shrink-0 items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15"
|
||||
href="/creators/top"
|
||||
>
|
||||
See all
|
||||
<i className="fa-solid fa-arrow-right text-[10px]" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{loading ? <p className="text-sm text-slate-400">Loading creators...</p> : null}
|
||||
{error ? <p className="mb-4 text-sm text-rose-300">{error}</p> : null}
|
||||
|
||||
{!loading && items.length === 0 ? (
|
||||
<div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
|
||||
<p className="font-medium text-white">No creator recommendations right now.</p>
|
||||
<p className="mt-2 text-slate-400">Browse the full creator directory to keep expanding your network.</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{items.map((creator) => (
|
||||
<article
|
||||
key={creator.id}
|
||||
className="flex flex-col gap-4 rounded-2xl border border-white/8 bg-white/[0.04] p-4 transition hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/[0.06] sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<a href={creator.url || '#'} className="flex min-w-0 items-center gap-4">
|
||||
<img
|
||||
src={creator.avatar || '/images/default-avatar.png'}
|
||||
alt={creator.username || creator.name || 'Creator'}
|
||||
className="h-12 w-12 rounded-2xl border border-white/10 object-cover"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className="truncate text-sm font-semibold text-white">
|
||||
{creator.username ? `@${creator.username}` : creator.name}
|
||||
</p>
|
||||
<span className="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-wide text-sky-100">
|
||||
Suggested
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<LevelBadge level={creator.level} rank={creator.rank} compact />
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-400">
|
||||
<span>{Number(creator.followers_count || 0).toLocaleString()} followers</span>
|
||||
<span>{Number(creator.uploads_count || 0).toLocaleString()} uploads</span>
|
||||
</div>
|
||||
<div className="px-5 pb-5 sm:px-6 sm:pb-6">
|
||||
{loading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 rounded-2xl border border-white/6 bg-white/[0.03] p-3">
|
||||
<div className="h-11 w-11 shrink-0 animate-pulse rounded-2xl bg-white/8" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-3 w-28 animate-pulse rounded-full bg-white/8" />
|
||||
<div className="h-2.5 w-20 animate-pulse rounded-full bg-white/5" />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center sm:self-auto">
|
||||
<a
|
||||
href={creator.url || '#'}
|
||||
className="inline-flex items-center justify-center rounded-full border border-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-200 transition hover:border-white/20 hover:bg-white/5"
|
||||
>
|
||||
View profile
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleFollow(creator)}
|
||||
disabled={busyId === creator.id || !creator.username}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3.5 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<i className={`fa-solid ${busyId === creator.id ? 'fa-circle-notch fa-spin' : 'fa-user-plus'} text-[10px]`} />
|
||||
Follow
|
||||
</button>
|
||||
<div className="h-8 w-16 animate-pulse rounded-full bg-white/5" />
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{error ? <p className="mb-3 text-sm text-rose-300">{error}</p> : null}
|
||||
|
||||
{!loading && items.length === 0 ? (
|
||||
<div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
|
||||
<p className="font-medium text-white">No creator recommendations right now.</p>
|
||||
<p className="mt-2 text-slate-400">Browse the full creator directory to keep expanding your network.</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length > 0 ? (
|
||||
<ul className="space-y-2.5">
|
||||
{items.map((creator) => (
|
||||
<li key={creator.id}>
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-white/8 bg-white/[0.03] p-3 transition hover:border-white/14 hover:bg-white/[0.05]">
|
||||
{/* Avatar */}
|
||||
<a href={creator.url || '#'} className="shrink-0" tabIndex={-1} aria-hidden="true">
|
||||
<img
|
||||
src={creator.avatar || '/images/default-avatar.png'}
|
||||
alt={creator.username || creator.name || 'Creator'}
|
||||
className="h-11 w-11 rounded-2xl border border-white/10 object-cover"
|
||||
/>
|
||||
</a>
|
||||
|
||||
{/* Info */}
|
||||
<a href={creator.url || '#'} className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="truncate text-sm font-semibold text-white">
|
||||
{creator.username ? `@${creator.username}` : creator.name}
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2 py-0.5 text-[9px] font-medium uppercase tracking-wide text-sky-200">
|
||||
Suggested
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
<LevelBadge level={creator.level} rank={creator.rank} compact />
|
||||
<span className="text-[11px] text-slate-500">
|
||||
{Number(creator.followers_count || 0).toLocaleString()} followers
|
||||
{creator.uploads_count ? ` · ${Number(creator.uploads_count).toLocaleString()} uploads` : ''}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Follow button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleFollow(creator)}
|
||||
disabled={busyId === creator.id || !creator.username}
|
||||
className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/18 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<i className={`fa-solid ${busyId === creator.id ? 'fa-circle-notch fa-spin' : 'fa-user-plus'} text-[10px]`} />
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user