import { useQuery } from '@tanstack/react-query'
import { reposApi } from '../lib/api'
import LoadingSpinner from '../components/LoadingSpinner'
import RepoCard from '../components/RepoCard'
export default function Overview() {
const { data, isLoading, error } = useQuery({
queryKey: ['repos'],
queryFn: async () => {
const response = await reposApi.list()
return response.data
},
})
if (isLoading) return <LoadingSpinner />
if (error) {
return (
<div className="text-red-500 p-4">
Error loading repos: {error instanceof Error ? error.message : 'Unknown error'}
</div>
)
}
const repos = (data as { repos?: Array<{
name: string
ref: string
refType: string
extractedAt: string
extractors: string[]
}> })?.repos || []
return (
<div>
<h1 className="text-3xl font-bold mb-6">Ecosystem Overview</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{repos.map((repo) => (
<RepoCard
key={repo.name}
name={repo.name}
gitRef={repo.ref}
refType={repo.refType}
extractedAt={repo.extractedAt}
extractors={repo.extractors}
/>
))}
</div>
{repos.length === 0 && (
<div className="text-center py-12 text-gray-400">
No repos found. Run extraction to get started.
</div>
)}
</div>
)
}
export { Overview }
