xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Replaced run-on dot-separated topic stats on CreatorDetail with c…

Browse source 
- "frontend/src/pages/CreatorDetail.tsx"
- "frontend/src/App.css"

GSD-Task: S02/T02
This commit is contained in:
jlightner 2026-03-31 08:32:09 +00:00
parent a9b65fcea9
commit b01e5949b6
2 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/App.css
View file

@ -2122,6 +2122,13 @@ a.app-footer__repo:hover {
color: var(--color-text-secondary);
}
.creator-detail__topic-pills {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
align-items: center;
}
.creator-techniques {
margin-top: 1.5rem;
}

30
frontend/src/pages/CreatorDetail.tsx
View file

@ -14,6 +14,7 @@ import {
type TechniqueListItem,
} from "../api/public-client";
import CreatorAvatar from "../components/CreatorAvatar";
import { catSlug } from "../utils/catSlug";
export default function CreatorDetail() {
const { slug } = useParams<{ slug: string }>();
@ -109,20 +110,21 @@ export default function CreatorDetail() {
{techniques.length > 0 && (
<>
<span className="queue-card__separator">·</span>
{Object.entries(
techniques.reduce<Record<string, number>>((acc, t) => {
const cat = t.topic_category || "Uncategorized";
acc[cat] = (acc[cat] || 0) + 1;
return acc;
}, {}),
)
.sort(([, a], [, b]) => b - a)
.map(([cat, count], i) => (
<span key={cat} className="creator-detail__topic-stat">
{i > 0 && <span className="queue-card__separator">·</span>}
{cat}: {count}
</span>
))}
<span className="creator-detail__topic-pills">
{Object.entries(
techniques.reduce<Record<string, number>>((acc, t) => {
const cat = t.topic_category || "Uncategorized";
acc[cat] = (acc[cat] || 0) + 1;
return acc;
}, {}),
)
.sort(([, a], [, b]) => b - a)
.map(([cat, count]) => (
<span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
{cat}: {count}
</span>
))}
</span>
</>
)}
</span>