klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Save workspace changes

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-18 17:02:56 +02:00
parent f02ea9a711
commit 87d60af5a9
4220 changed files with 1388603 additions and 1554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
resources/js/components/profile/CreatorJourneySection.jsx
View File

@@ -25,40 +25,39 @@ function formatYear(value) {
function iconForType(type) {
switch (type) {
case 'first_upload':
return 'fa-solid fa-seedling'
case 'first_featured_artwork':
return 'fa-solid fa-star'
case 'first_group_release':
return 'fa-solid fa-people-group'
case 'biggest_download_spike':
return 'fa-solid fa-bolt'
case 'best_performing_work':
return 'fa-solid fa-trophy'
case 'most_productive_year':
return 'fa-solid fa-calendar-check'
case 'yearly_recap':
return 'fa-solid fa-chart-column'
// v2
case 'comeback_minor':
return 'fa-solid fa-rotate-right'
case 'comeback_major':
return 'fa-solid fa-person-walking-arrow-right'
case 'comeback_legendary':
return 'fa-solid fa-fire-flame-curved'
case 'first_upload': return 'fa-solid fa-seedling'
case 'first_featured_artwork': return 'fa-solid fa-star'
case 'first_group_release': return 'fa-solid fa-people-group'
case 'biggest_download_spike': return 'fa-solid fa-bolt'
case 'best_performing_work': return 'fa-solid fa-trophy'
case 'most_productive_year': return 'fa-solid fa-calendar-check'
case 'yearly_recap': return 'fa-solid fa-chart-column'
case 'comeback_minor': return 'fa-solid fa-rotate-right'
case 'comeback_major': return 'fa-solid fa-person-walking-arrow-right'
case 'comeback_legendary': return 'fa-solid fa-fire-flame-curved'
case 'upload_streak_3':
case 'upload_streak_6':
case 'upload_streak_12':
return 'fa-solid fa-fire'
case 'upload_streak_12': return 'fa-solid fa-fire'
case 'active_year_streak_3':
case 'active_year_streak_5':
return 'fa-solid fa-calendar-days'
case 'before_now':
return 'fa-solid fa-arrows-rotate'
case 'era_started':
return 'fa-solid fa-flag'
default:
return 'fa-solid fa-sparkles'
case 'active_year_streak_5': return 'fa-solid fa-calendar-days'
case 'before_now': return 'fa-solid fa-arrows-rotate'
case 'era_started': return 'fa-solid fa-flag'
default: return 'fa-solid fa-sparkles'
}
}
function colorForType(type) {
switch (type) {
case 'first_featured_artwork': return { icon: 'text-amber-200', bg: 'bg-amber-400/12', border: 'border-amber-300/20', accent: 'from-amber-400/60' }
case 'best_performing_work': return { icon: 'text-amber-200', bg: 'bg-amber-400/12', border: 'border-amber-300/20', accent: 'from-amber-400/60' }
case 'biggest_download_spike': return { icon: 'text-sky-200', bg: 'bg-sky-400/12', border: 'border-sky-300/20', accent: 'from-sky-400/60' }
case 'first_upload': return { icon: 'text-emerald-200', bg: 'bg-emerald-400/12', border: 'border-emerald-300/20', accent: 'from-emerald-400/60' }
case 'first_group_release': return { icon: 'text-violet-200', bg: 'bg-violet-400/12', border: 'border-violet-300/20', accent: 'from-violet-400/60' }
case 'comeback_minor':
case 'comeback_major':
case 'comeback_legendary': return { icon: 'text-orange-200', bg: 'bg-orange-400/12', border: 'border-orange-300/20', accent: 'from-orange-400/60' }
case 'most_productive_year': return { icon: 'text-teal-200', bg: 'bg-teal-400/12', border: 'border-teal-300/20', accent: 'from-teal-400/60' }
default: return { icon: 'text-sky-200', bg: 'bg-sky-400/12', border: 'border-sky-300/20', accent: 'from-sky-400/60' }
}
}
@@ -203,6 +202,103 @@ function StreaksSection({ streaks }) {
)
}
// ── Yearly Productivity Chart ────────────────────────────────────────────────
const STATUS_BAR_COLOR = {
breakout: { bar: 'bg-emerald-400', label: 'bg-emerald-400/12 text-emerald-200 border-emerald-400/20' },
steady: { bar: 'bg-sky-400', label: 'bg-sky-400/12 text-sky-200 border-sky-400/20' },
experimental: { bar: 'bg-violet-400', label: 'bg-violet-400/12 text-violet-200 border-violet-400/20' },
comeback: { bar: 'bg-amber-400', label: 'bg-amber-400/12 text-amber-200 border-amber-400/20' },
quiet: { bar: 'bg-slate-500', label: 'bg-slate-700/60 text-slate-400 border-slate-600/30' },
}
function YearlyProductivityChart({ recaps }) {
if (!recaps?.length) return null
// Sort oldest → newest for the chart
const sorted = [...recaps]
.filter((r) => r.metrics?.year && r.metrics?.uploads_count != null)
.sort((a, b) => (a.metrics.year ?? 0) - (b.metrics.year ?? 0))
if (!sorted.length) return null
const maxUploads = Math.max(...sorted.map((r) => r.metrics.uploads_count), 1)
return (
<div className="mt-7 rounded-[28px] border border-white/10 bg-white/[0.03] p-5 sm:p-6">
<div className="flex flex-wrap items-end justify-between gap-3">
<div>
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Productivity</div>
<div className="mt-1 text-lg font-semibold text-white">Year-by-year upload activity</div>
</div>
<div className="flex flex-wrap items-center gap-3 text-[11px] text-slate-500">
{Object.entries(STATUS_BAR_COLOR)
.filter(([key]) => sorted.some((r) => (r.metrics?.year_status ?? 'steady') === key))
.map(([key, val]) => (
<span key={key} className="flex items-center gap-1.5 capitalize">
<span className={`inline-block h-2 w-2 rounded-full ${val.bar}`} />
{key}
</span>
))}
</div>
</div>
<div className="mt-5 space-y-2">
{sorted.map((item) => {
const uploads = item.metrics.uploads_count
const pct = Math.max(uploads / maxUploads, uploads > 0 ? 0.018 : 0)
const status = item.metrics?.year_status ?? 'steady'
const colors = STATUS_BAR_COLOR[status] ?? STATUS_BAR_COLOR.steady
const isBest = uploads === maxUploads
return (
<div key={item.metrics.year} className="group grid grid-cols-[3.5rem_minmax(0,1fr)_4rem] items-center gap-3">
{/* Year label */}
<div className={`text-right text-[13px] font-semibold tabular-nums ${isBest ? 'text-white' : 'text-slate-400'}`}>
{item.metrics.year}
</div>
{/* Bar */}
<div className="relative h-7 overflow-hidden rounded-full bg-white/[0.04]">
<div
className={`absolute inset-y-0 left-0 rounded-full ${colors.bar} opacity-80 transition-all duration-500 group-hover:opacity-100`}
style={{ width: `${(pct * 100).toFixed(1)}%` }}
/>
{/* Tooltip on hover */}
<div className="absolute inset-y-0 left-0 flex w-full items-center px-3 opacity-0 transition-opacity group-hover:opacity-100">
<span className="text-[11px] font-semibold text-white drop-shadow-sm">
{uploads} upload{uploads !== 1 ? 's' : ''}
{(item.metrics?.views ?? 0) > 0 ? ` · ${Number(item.metrics.views).toLocaleString()} views` : ''}
{(item.metrics?.downloads ?? 0) > 0 ? ` · ${Number(item.metrics.downloads).toLocaleString()} dl` : ''}
</span>
</div>
</div>
{/* Upload count + badge */}
<div className="flex items-center gap-1.5">
<span className={`text-[13px] font-bold tabular-nums ${isBest ? 'text-white' : 'text-slate-300'}`}>{uploads}</span>
{isBest && <span className="rounded-full border border-amber-400/25 bg-amber-400/10 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider text-amber-300">best</span>}
{(item.metrics?.featured_count ?? 0) > 0 && !isBest && (
<span className="rounded-full border border-sky-400/20 bg-sky-400/10 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider text-sky-300">
<i className="fa-solid fa-star text-[8px]" /> {item.metrics.featured_count}
</span>
)}
</div>
</div>
)
})}
</div>
{/* Summary footer */}
<div className="mt-5 flex flex-wrap gap-4 border-t border-white/5 pt-4 text-[12px] text-slate-400">
<span><span className="font-semibold text-white">{sorted.length}</span> active years</span>
<span><span className="font-semibold text-white">{sorted.reduce((s, r) => s + r.metrics.uploads_count, 0).toLocaleString()}</span> total uploads</span>
<span><span className="font-semibold text-white">{Number(sorted.reduce((s, r) => s + (r.metrics.views ?? 0), 0)).toLocaleString()}</span> total views</span>
</div>
</div>
)
}
// ── v2: Growth & Evolution ───────────────────────────────────────────────────
const RELATION_LABELS = {
@@ -276,6 +372,7 @@ export default function CreatorJourneySection({ journey, username }) {
const highlights = Array.isArray(journey?.highlights) ? journey.highlights : []
const timeline = Array.isArray(journey?.timeline) ? journey.timeline.slice(0, 6) : []
const recaps = Array.isArray(journey?.yearly_recaps) ? journey.yearly_recaps.slice(0, 3) : []
const allRecaps = Array.isArray(journey?.yearly_recaps) ? journey.yearly_recaps : []
const eras = Array.isArray(journey?.eras) ? journey.eras : []
const evolution = Array.isArray(journey?.evolution) ? journey.evolution : []
const streaks = journey?.streaks ?? null
@@ -333,11 +430,13 @@ export default function CreatorJourneySection({ journey, username }) {
return (
<article
key={item.id}
className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] p-5"
className="relative overflow-hidden rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] p-5 transition-colors hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.09),rgba(255,255,255,0.03))]"
>
{(() => { const c = colorForType(item.type); return <div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${c.accent} via-transparent to-transparent`} /> })()
}
<div className="flex items-start justify-between gap-4">
<div className="flex min-w-0 items-start gap-3">
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-sky-400/12 text-sky-200">
<div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${colorForType(item.type).bg} ${colorForType(item.type).icon}`}>
<i className={iconForType(item.type)} />
</div>
<div className="min-w-0">
@@ -371,7 +470,7 @@ export default function CreatorJourneySection({ journey, username }) {
</div>
)}
<div className="mt-7 grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.95fr)]">
<div className="mt-7 grid gap-6">
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
<div className="flex items-center justify-between gap-3">
<div>
@@ -387,7 +486,7 @@ export default function CreatorJourneySection({ journey, username }) {
return (
<div key={item.id} className="grid grid-cols-[2.5rem_minmax(0,1fr)] gap-3">
<div className="flex flex-col items-center">
<div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-100">
<div className={`flex h-10 w-10 items-center justify-center rounded-2xl border ${colorForType(item.type).border} ${colorForType(item.type).bg} ${colorForType(item.type).icon}`}>
<i className={iconForType(item.type)} />
</div>
{index < timeline.length - 1 && <div className="mt-2 h-full w-px bg-white/10" />}
@@ -470,6 +569,9 @@ export default function CreatorJourneySection({ journey, username }) {
{/* ── v2: Streaks ── */}
<StreaksSection streaks={streaks} />
{/* ── Yearly productivity chart ── */}
<YearlyProductivityChart recaps={allRecaps} />
{/* ── v2: Growth & Evolution ── */}
<EvolutionSection evolution={evolution} />
</section>

185
resources/js/components/profile/tabs/TabAbout.jsx
View File

@@ -2,13 +2,65 @@ import React from 'react'
import CreatorJourneySection from '../CreatorJourneySection'
const SOCIAL_ICONS = {
twitter: { icon: 'fa-brands fa-x-twitter', label: 'X / Twitter' },
deviantart: { icon: 'fa-brands fa-deviantart', label: 'DeviantArt' },
instagram: { icon: 'fa-brands fa-instagram', label: 'Instagram' },
behance: { icon: 'fa-brands fa-behance', label: 'Behance' },
artstation: { icon: 'fa-solid fa-palette', label: 'ArtStation' },
youtube: { icon: 'fa-brands fa-youtube', label: 'YouTube' },
website: { icon: 'fa-solid fa-link', label: 'Website' },
twitter: { icon: 'fa-brands fa-x-twitter', label: 'X / Twitter', hoverClass: 'hover:border-slate-300/30 hover:text-slate-100 hover:bg-white/[0.08]' },
deviantart: { icon: 'fa-brands fa-deviantart', label: 'DeviantArt', hoverClass: 'hover:border-green-400/35 hover:text-green-300 hover:bg-green-900/20' },
instagram: { icon: 'fa-brands fa-instagram', label: 'Instagram', hoverClass: 'hover:border-pink-400/35 hover:text-pink-300 hover:bg-pink-900/20' },
behance: { icon: 'fa-brands fa-behance', label: 'Behance', hoverClass: 'hover:border-blue-400/35 hover:text-blue-300 hover:bg-blue-900/20' },
artstation: { icon: 'fa-solid fa-palette', label: 'ArtStation', hoverClass: 'hover:border-orange-400/35 hover:text-orange-300 hover:bg-orange-900/20' },
youtube: { icon: 'fa-brands fa-youtube', label: 'YouTube', hoverClass: 'hover:border-red-400/35 hover:text-red-300 hover:bg-red-900/20' },
website: { icon: 'fa-solid fa-link', label: 'Website', hoverClass: 'hover:border-sky-400/35 hover:text-sky-200 hover:bg-sky-900/20' },
}
const CATEGORY_ICONS = {
animals: 'fa-solid fa-paw',
birds: 'fa-solid fa-dove',
flowers: 'fa-solid fa-seedling',
fruit: 'fa-solid fa-apple-whole',
'sci-fi': 'fa-solid fa-rocket',
scifi: 'fa-solid fa-rocket',
fantasy: 'fa-solid fa-dragon',
nature: 'fa-solid fa-leaf',
landscape: 'fa-solid fa-mountain',
abstract: 'fa-solid fa-shapes',
architecture: 'fa-solid fa-building',
people: 'fa-solid fa-person',
portrait: 'fa-solid fa-face-smile',
cars: 'fa-solid fa-car',
space: 'fa-solid fa-star',
games: 'fa-solid fa-gamepad',
food: 'fa-solid fa-utensils',
travel: 'fa-solid fa-plane',
sports: 'fa-solid fa-football',
ocean: 'fa-solid fa-water',
underwater: 'fa-solid fa-fish',
insects: 'fa-solid fa-bug',
reptiles: 'fa-solid fa-dragon',
cats: 'fa-solid fa-cat',
dogs: 'fa-solid fa-dog',
}
const CONTENT_TYPE_ICONS = {
photography: 'fa-solid fa-camera',
wallpapers: 'fa-solid fa-desktop',
'digital art': 'fa-solid fa-wand-magic-sparkles',
illustration: 'fa-solid fa-pen-nib',
'3d': 'fa-solid fa-cube',
vector: 'fa-solid fa-bezier-curve',
fractal: 'fa-solid fa-infinity',
gif: 'fa-solid fa-film',
drawing: 'fa-solid fa-pencil',
painting: 'fa-solid fa-paintbrush',
photo: 'fa-solid fa-camera',
}
function getCategoryIcon(label) {
const key = String(label || '').toLowerCase().trim()
return CATEGORY_ICONS[key] ?? null
}
function getContentTypeIcon(label) {
const key = String(label || '').toLowerCase().trim()
return CONTENT_TYPE_ICONS[key] ?? null
}
function formatNumber(value) {
@@ -120,11 +172,13 @@ function buildInterestGroups(artworks = []) {
function InfoRow({ icon, label, children }) {
return (
<div className="flex items-start gap-3 py-2.5 border-b border-white/5 last:border-0">
<i className={`fa-solid ${icon} fa-fw text-slate-500 mt-0.5 w-4 text-center`} />
<div className="flex-1 min-w-0">
<span className="text-xs text-slate-500 block mb-0.5">{label}</span>
<div className="text-sm text-slate-200">{children}</div>
<div className="flex items-center gap-3 rounded-2xl border border-white/[0.07] bg-white/[0.025] px-3.5 py-3 transition-colors hover:bg-white/[0.045]">
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.05] text-slate-400">
<i className={`fa-solid ${icon} fa-fw text-[13px]`} />
</div>
<div className="min-w-0 flex-1">
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 block">{label}</span>
<div className="mt-0.5 text-sm text-slate-200">{children}</div>
</div>
</div>
)
@@ -132,19 +186,21 @@ function InfoRow({ icon, label, children }) {
function StatCard({ icon, label, value, tone = 'sky' }) {
const tones = {
sky: 'text-sky-300 bg-sky-400/10 border-sky-300/15',
amber: 'text-amber-200 bg-amber-300/10 border-amber-300/15',
emerald: 'text-emerald-200 bg-emerald-400/10 border-emerald-300/15',
violet: 'text-violet-200 bg-violet-400/10 border-violet-300/15',
sky: { icon: 'text-sky-300 bg-sky-400/10 border-sky-300/20', bar: 'from-sky-400/60 via-sky-400/20 to-transparent', glow: 'shadow-[0_0_28px_rgba(56,189,248,0.10)]' },
amber: { icon: 'text-amber-200 bg-amber-300/10 border-amber-300/20', bar: 'from-amber-400/60 via-amber-400/20 to-transparent', glow: 'shadow-[0_0_28px_rgba(251,191,36,0.10)]' },
emerald: { icon: 'text-emerald-200 bg-emerald-400/10 border-emerald-300/20', bar: 'from-emerald-400/60 via-emerald-400/20 to-transparent', glow: 'shadow-[0_0_28px_rgba(52,211,153,0.10)]' },
violet: { icon: 'text-violet-200 bg-violet-400/10 border-violet-300/20', bar: 'from-violet-400/60 via-violet-400/20 to-transparent', glow: 'shadow-[0_0_28px_rgba(167,139,250,0.10)]' },
}
const t = tones[tone] || tones.sky
return (
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4 shadow-[0_18px_44px_rgba(2,6,23,0.18)]">
<div className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${tones[tone] || tones.sky}`}>
<i className={`fa-solid ${icon}`} />
<div className={`relative overflow-hidden rounded-[24px] border border-white/10 bg-white/[0.04] p-4 shadow-[0_18px_44px_rgba(2,6,23,0.18)] ${t.glow}`}>
<div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${t.bar}`} />
<div className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${t.icon}`}>
<i className={`fa-solid ${icon} text-base`} />
</div>
<div className="mt-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
<div className="mt-1 text-2xl font-semibold tracking-tight text-white">{value}</div>
<div className="mt-1 text-2xl font-bold tracking-tight text-white">{value}</div>
</div>
)
}
@@ -221,7 +277,7 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
id="tabpanel-about"
role="tabpanel"
aria-labelledby="tab-about"
className="mx-auto max-w-7xl px-4 pt-4 pb-10 md:px-6"
className="pt-4 pb-10"
>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
{summaryCards.map((card) => (
@@ -233,10 +289,16 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
<div className="space-y-6">
<SectionCard icon="fa-solid fa-circle-info" eyebrow="Profile story" title={`About ${displayName}`} className="bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.05))]">
{about ? (
<p className="whitespace-pre-line text-[15px] leading-8 text-slate-200/90">{about}</p>
<div className="relative">
<div className="-mt-2 mb-0 select-none font-serif text-7xl leading-none text-slate-500/20" aria-hidden="true">&ldquo;</div>
<p className="whitespace-pre-line text-[15px] leading-8 text-slate-200/90">{about}</p>
</div>
) : (
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.03] px-5 py-8 text-center text-sm text-slate-400">
This creator has not written a public bio yet.
<div className="flex flex-col items-center gap-3 rounded-2xl border border-dashed border-white/10 bg-white/[0.03] px-5 py-8 text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500">
<i className="fa-regular fa-comment-dots text-lg" />
</div>
<p className="text-sm text-slate-400">This creator has not written a public bio yet.</p>
</div>
)}
</SectionCard>
@@ -372,24 +434,27 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
{recentAchievements.slice(0, 4).map((achievement) => (
<div
key={achievement.id}
className="rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-4 transition-colors hover:bg-white/[0.05]"
className="group relative overflow-hidden rounded-2xl border border-amber-300/10 bg-white/[0.03] px-4 py-4 transition-all hover:border-amber-300/25 hover:bg-white/[0.06]"
>
<div className="absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r from-amber-400/50 via-amber-400/20 to-transparent" />
<div className="flex items-start gap-3">
<div className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-amber-300/15 bg-amber-300/10 text-amber-100">
<i className={`fa-solid ${achievement.icon || 'fa-trophy'}`} />
<div className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-amber-300/20 bg-amber-300/10 text-amber-200 shadow-[0_0_18px_rgba(251,191,36,0.12)] transition-shadow group-hover:shadow-[0_0_24px_rgba(251,191,36,0.2)]">
<i className={`fa-solid ${achievement.icon || 'fa-trophy'} text-base`} />
</div>
<div className="min-w-0 flex-1">
<div className="truncate text-sm font-semibold text-white">{achievement.name}</div>
{achievement.description ? (
<div className="mt-1 line-clamp-2 text-sm leading-relaxed text-slate-400">{achievement.description}</div>
) : null}
<div className="mt-3 flex flex-wrap gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-300/75">
<div className="mt-3 flex flex-wrap gap-2">
{achievement.unlocked_at ? (
<span className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1">
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400">
<i className="fa-solid fa-calendar-check text-[10px]" />
{formatShortDate(achievement.unlocked_at) || 'Unlocked'}
</span>
) : null}
<span className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1">
<span className="inline-flex items-center gap-1.5 rounded-full border border-amber-300/20 bg-amber-300/10 px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.14em] text-amber-200">
<i className="fa-solid fa-bolt text-[9px]" />
+{formatNumber(achievement.xp_reward ?? 0)} XP
</span>
</div>
@@ -524,34 +589,48 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
<div className="space-y-5">
{interestGroups.categories.length > 0 ? (
<div>
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Top categories</div>
<div className="mt-3 flex flex-wrap gap-2.5">
{interestGroups.categories.map((category) => (
<span
key={category.label}
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2 text-sm text-slate-200"
>
<span>{category.label}</span>
<span className="rounded-full bg-black/20 px-2 py-0.5 text-[11px] font-semibold text-slate-400">{formatNumber(category.count)}</span>
</span>
))}
<div className="mb-3 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
<i className="fa-solid fa-tag text-slate-600" />
Top categories
</div>
<div className="flex flex-wrap gap-2.5">
{interestGroups.categories.map((category) => {
const catIcon = getCategoryIcon(category.label)
return (
<span
key={category.label}
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2 text-sm text-slate-200 transition-colors hover:bg-white/[0.07]"
>
{catIcon ? <i className={`${catIcon} text-[12px] text-slate-400`} /> : null}
<span>{category.label}</span>
<span className="rounded-full bg-black/20 px-2 py-0.5 text-[11px] font-semibold text-slate-400">{formatNumber(category.count)}</span>
</span>
)
})}
</div>
</div>
) : null}
{interestGroups.contentTypes.length > 0 ? (
<div>
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Preferred formats</div>
<div className="mt-3 flex flex-wrap gap-2.5">
{interestGroups.contentTypes.map((contentType) => (
<span
key={contentType.label}
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/15 bg-sky-400/10 px-3.5 py-2 text-sm text-sky-100"
>
<span>{contentType.label}</span>
<span className="rounded-full bg-black/20 px-2 py-0.5 text-[11px] font-semibold text-sky-100/70">{formatNumber(contentType.count)}</span>
</span>
))}
<div className="mb-3 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
<i className="fa-solid fa-layer-group text-slate-600" />
Preferred formats
</div>
<div className="flex flex-wrap gap-2.5">
{interestGroups.contentTypes.map((contentType) => {
const ctIcon = getContentTypeIcon(contentType.label)
return (
<span
key={contentType.label}
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-3.5 py-2 text-sm text-sky-100 transition-colors hover:bg-sky-400/15"
>
{ctIcon ? <i className={`${ctIcon} text-[12px] text-sky-300/70`} /> : null}
<span>{contentType.label}</span>
<span className="rounded-full bg-black/20 px-2 py-0.5 text-[11px] font-semibold text-sky-100/70">{formatNumber(contentType.count)}</span>
</span>
)
})}
</div>
</div>
) : null}
@@ -572,7 +651,7 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
href={href}
target="_blank"
rel="nofollow noopener noreferrer"
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2.5 text-sm text-slate-300 transition-all hover:border-sky-400/30 hover:bg-white/[0.07] hover:text-white"
className={`inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2.5 text-sm text-slate-300 transition-all ${si.hoverClass || 'hover:border-sky-400/30 hover:bg-white/[0.07] hover:text-white'}`}
aria-label={si.label}
>
<i className={`${si.icon} fa-fw`} />