MythEclipseandClaude Opus 4.8
c48a0c5e3b
- Extract services into services/{frontend,backend,discord-gateway}
- Create packages/shared/ for shared logger, errors, utils, types
- Setup Modular MVC pattern in backend (controller→service→repository)
- Setup event-driven architecture in discord-gateway with Redis pub/sub
- Move Docker files to infra/docker/ with per-service Dockerfiles
- Update docker-compose.yml to use Traefik-only routing (no port exposes)
- Update GitHub Actions deploy workflow for multi-service matrix build
- Fix all import paths and resolve type errors across all services
- All 3 services pass tsc --noEmit clean
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { Flame } from "lucide-react";
|
|
import type { TopicTrend } from "../../../shared/api/client";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
ScrollArea,
|
|
} from "../../../shared/ui";
|
|
|
|
interface TopicListProps {
|
|
topics: TopicTrend[];
|
|
loading: boolean;
|
|
}
|
|
|
|
export function TopicList({ topics, loading }: TopicListProps) {
|
|
if (loading && !topics?.length) {
|
|
return <LoadingBox />;
|
|
}
|
|
|
|
if (!topics?.length) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
|
|
Topik akan muncul setelah AI selesai menganalisis.
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const maxCount = Math.max(...topics.map((t) => t.count), 1);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
|
<Flame className="h-4 w-4 text-orange-400" />
|
|
Topik Trending
|
|
</CardTitle>
|
|
<CardDescription className="text-xs">
|
|
Yang paling ramai dibicarakan.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<ScrollArea className="max-h-[260px]">
|
|
<div className="divide-y divide-border/30">
|
|
{topics.map((topic, i) => (
|
|
<div
|
|
key={topic.topic}
|
|
className="flex items-center gap-3 px-5 py-2 text-sm"
|
|
>
|
|
<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-muted">
|
|
<div
|
|
className="h-full rounded-full bg-blue-500/60"
|
|
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>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
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="ml-2">Memuat data...</span>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|