77 lines
3.6 KiB
TypeScript
77 lines
3.6 KiB
TypeScript
import { useRepos } from '../api/queries/repos'
|
|
import { RepoCard } from '../components/repos/RepoCard'
|
|
import { RepoListSkeleton } from '../ui/Skeleton'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
export default function ReposPage() {
|
|
const { data: repos, isLoading, isError } = useRepos()
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto px-4 md:px-6 py-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-xl font-semibold text-[#172B4D]">Repositories</h1>
|
|
{repos && (
|
|
<p className="text-sm text-[#5E6C84] mt-0.5">{repos.length} repositor{repos.length === 1 ? 'y' : 'ies'}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Link
|
|
to="/repos/import"
|
|
className="flex items-center gap-1.5 px-3 py-2 rounded border border-[#DFE1E6] text-sm text-[#172B4D] hover:bg-[#F4F5F7] font-medium min-h-[36px]"
|
|
>
|
|
Import
|
|
</Link>
|
|
<Link
|
|
to="/repos/new"
|
|
className="flex items-center gap-2 px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[36px]"
|
|
>
|
|
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
New repository
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<RepoListSkeleton />
|
|
) : isError ? (
|
|
<NotSignedIn />
|
|
) : !repos?.length ? (
|
|
<div className="py-16 text-center">
|
|
<svg width="48" height="48" fill="none" stroke="#97A0AF" strokeWidth="1" viewBox="0 0 24 24" className="mx-auto mb-4">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
|
|
</svg>
|
|
<p className="text-sm font-medium text-[#172B4D] mb-1">No repositories yet</p>
|
|
<p className="text-xs text-[#5E6C84] mb-4">Create your first repository to get started.</p>
|
|
<Link to="/repos/new" className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF]">
|
|
Create repository
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
{repos.map(r => <RepoCard key={r.id} repo={r} />)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function NotSignedIn() {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-12 border border-dashed border-[#DFE1E6] rounded text-center gap-3">
|
|
<svg width="36" height="36" fill="none" stroke="#97A0AF" strokeWidth="1.5" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
<div>
|
|
<p className="text-sm font-medium text-[#172B4D]">Sign in to see your repositories</p>
|
|
<p className="text-xs text-[#5E6C84] mt-1">You need to be signed in to view and create repositories.</p>
|
|
</div>
|
|
<Link to="/login" className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[44px] flex items-center">
|
|
Sign in
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|