MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: session auto-commit

Browse Source
This commit is contained in:
MythEclipse
2026-06-04 14:16:59 +07:00
parent 458f20d5c3
commit 3ecb7bd15c
3 changed files with 201 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/features/analytics/components/TopicList.tsx
+42 -28
View File
@@ -14,11 +14,16 @@ interface TopicListProps {
loading: boolean;
}
export function TopicList({ topics, loading }: TopicListProps) {
if (loading && !topics?.length) {
return <LoadingBox />;
}
const TOPIC_COLORS = [
"from-primary to-sky-300",
"from-accent to-pink-300",
"from-orange-400 to-yellow-300",
"from-emerald-400 to-teal-300",
"from-violet-400 to-purple-300",
];
export function TopicList({ topics, loading }: TopicListProps) {
if (loading && !topics?.length) return <LoadingBox />;
if (!topics?.length) {
return (
<Card>
@@ -44,31 +49,40 @@ export function TopicList({ topics, loading }: TopicListProps) {
</CardHeader>
<CardContent className="p-0">
<ScrollArea className="max-h-[260px]">
<div className="divide-y divide-sky-50">
{topics.map((topic, i) => (
<div
key={topic.topic}
className="flex items-center gap-3 px-5 py-2 text-sm border-l-2 border-l-primary"
>
<span className="w-5 shrink-0 text-right font-mono text-[10px] text-muted-foreground">
{i + 1}
</span>
<span className="flex-1 truncate font-medium">
{topic.topic}
</span>
<div className="flex items-center gap-2">
<div className="h-1.5 w-12 overflow-hidden rounded-full bg-sky-50">
<div
className="h-full rounded-full bg-gradient-to-r from-primary to-pink-300"
style={{ width: `${(topic.count / maxCount) * 100}%` }}
/>
</div>
<span className="w-8 text-right font-mono text-xs tabular-nums text-muted-foreground">
{topic.count}
<div className="divide-y divide-muted/30">
{topics.map((topic, i) => {
const colorClass =
TOPIC_COLORS[i % TOPIC_COLORS.length];
return (
<div
key={topic.topic}
className="flex items-center gap-3 px-5 py-2.5 text-sm border-l-2"
style={{
borderLeftColor: `hsl(${199 + i * 35}, 80%, 50%)`,
}}
>
<span className="w-5 shrink-0 text-right font-mono text-[10px] text-muted-foreground">
{i + 1}
</span>
<span className="flex-1 truncate font-medium text-xs">
{topic.topic}
</span>
<div className="flex items-center gap-2">
<div className="h-2 w-16 overflow-hidden rounded-md bg-muted/30">
<div
className={`h-full rounded-md bg-gradient-to-r ${colorClass}`}
style={{
width: `${(topic.count / maxCount) * 100}%`,
}}
/>
</div>
<span className="w-8 text-right font-mono text-xs tabular-nums text-muted-foreground">
{topic.count}
</span>
</div>
</div>
</div>
))}
);
})}
</div>
</ScrollArea>
</CardContent>
@@ -80,7 +94,7 @@ function LoadingBox() {
return (
<Card>
<CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
<span className="h-4 w-4 animate-spin rounded-sm border-2 border-current border-t-transparent" />
<span className="ml-2">Memuat data...</span>
</CardContent>
</Card>