diff --git a/web/src/pages/dashboard/subscriptions.tsx b/web/src/pages/dashboard/subscriptions.tsx new file mode 100644 index 00000000..6c0523dd --- /dev/null +++ b/web/src/pages/dashboard/subscriptions.tsx @@ -0,0 +1,54 @@ +import { useState } from 'react' +import { useNavigate } from '@tanstack/react-router' +import { useTranslation } from 'react-i18next' +import { SkillCard } from '@/features/skill/skill-card' +import { Pagination } from '@/shared/components/pagination' +import { useMySubscriptionsPage } from '@/shared/hooks/use-user-queries' +import { Card } from '@/shared/ui/card' +import { DashboardPageHeader } from '@/shared/components/dashboard-page-header' + +const PAGE_SIZE = 12 + +export function MySubscriptionsPage() { + const { t } = useTranslation() + const navigate = useNavigate() + const [page, setPage] = useState(0) + const { data, isLoading } = useMySubscriptionsPage({ page, size: PAGE_SIZE }) + const skills = data?.items ?? [] + const totalPages = data ? Math.max(Math.ceil(data.total / data.size), 1) : 1 + + if (isLoading) { + return ( +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+ ))} +
+ ) + } + + return ( +
+ + + {!skills || skills.length === 0 ? ( + {t('subscriptions.empty')} + ) : ( + <> +
+ {skills.map((skill) => ( + navigate({ to: `/space/${skill.namespace}/${encodeURIComponent(skill.slug)}` })} + /> + ))} +
+ {data && data.total > PAGE_SIZE ? ( + + ) : null} + + )} +
+ ) +}