diff --git a/frontend/src/App.css b/frontend/src/App.css index 6fb5bfb..4d8a3e6 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -2806,6 +2806,60 @@ a.app-footer__repo:hover { line-height: 1.4; } +/* ── Creator Featured Technique ─────────────────────────────────────── */ + +.creator-featured { + display: block; + max-width: 100%; + margin-bottom: 1.25rem; + padding: 1.25rem 1.5rem; + background: var(--color-bg-surface); + border: 1px solid transparent; + border-image: linear-gradient(135deg, #22d3ee, #a855f7) 1; + text-decoration: none; + color: inherit; + position: relative; +} + +.creator-featured__label { + margin-bottom: 0.5rem; +} + +.creator-featured__title { + display: block; + font-size: 1.25rem; + font-weight: 700; + color: var(--color-text); + margin-bottom: 0.5rem; + line-height: 1.3; +} + +.creator-featured:hover .creator-featured__title { + color: var(--color-accent-hover); +} + +.creator-featured__summary { + font-size: 0.875rem; + color: var(--color-text-secondary); + line-height: 1.5; + margin-bottom: 0.75rem; + margin-top: 0; +} + +.creator-featured__meta { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 0.5rem; +} + +.creator-featured__moments { + font-size: 0.75rem; + color: var(--color-text-tertiary); + white-space: nowrap; +} + /* ══════════════════════════════════════════════════════════════════════════════ TOPICS BROWSE — Card Grid Layout ══════════════════════════════════════════════════════════════════════════════ */ diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts index 30d9c60..723ebc0 100644 --- a/frontend/src/api/public-client.ts +++ b/frontend/src/api/public-client.ts @@ -178,6 +178,9 @@ export interface CreatorTechniqueItem { title: string; slug: string; topic_category: string; + summary: string | null; + topic_tags: string[] | null; + key_moment_count: number; created_at: string; } diff --git a/frontend/src/pages/CreatorDetail.tsx b/frontend/src/pages/CreatorDetail.tsx index b58a978..3da76fc 100644 --- a/frontend/src/pages/CreatorDetail.tsx +++ b/frontend/src/pages/CreatorDetail.tsx @@ -14,6 +14,7 @@ import { import CreatorAvatar from "../components/CreatorAvatar"; import { SocialIcon } from "../components/SocialIcons"; import SortDropdown from "../components/SortDropdown"; +import TagList from "../components/TagList"; import { catSlug } from "../utils/catSlug"; import { useDocumentTitle } from "../hooks/useDocumentTitle"; import { useSortPreference } from "../hooks/useSortPreference"; @@ -184,25 +185,75 @@ export default function CreatorDetail() { {techniques.length === 0 ? (
+ {featured.summary} +
+ )} + + + {featured.topic_category} + + {featured.topic_tags && featured.topic_tags.length > 0 && ( +