1import {
 2    AlertCard,
 3    Card,
 4    CardContent,
 5    CardFooter,
 6    CardHeader,
 7    CardTitle,
 8    Page,
 9    Loading,
10} from '@marzneshin/components';
11import { NodesTable } from '@marzneshin/features/nodes';
12import { Link, createFileRoute, Outlet } from '@tanstack/react-router'
13import { type FC, Suspense } from 'react';
14import { useTranslation } from 'react-i18next';
15import { SudoRoute } from "@marzneshin/features/sudo-routes";
16
17export const NodesPage: FC = () => {
18    const { t } = useTranslation();
19    return (
20        <Page>
21            <Card className="border-0 sm:w-screen md:w-full">
22                <CardHeader>
23                    <CardTitle>
24                        {t('nodes')}
25                    </CardTitle>
26                </CardHeader>
27                <CardContent>
28                    <NodesTable />
29                    <Suspense fallback={<Loading />}>
30                        <Outlet />
31                    </Suspense>
32                </CardContent>
33                <CardFooter>
34                    <AlertCard
35                        title={t('page.nodes.certificate-alert.title')}
36                        desc={
37                            <>
38                                {t('page.nodes.certificate-alert.desc')}
39                                <Link className="m-1 font-semibold text-secondary-foreground" to="/settings">{t('page.nodes.certificate-alert.click')}</Link>
40                            </>
41                        }
42                    />
43                </CardFooter>
44            </Card >
45        </Page>
46    )
47};
48
49export const Route = createFileRoute('/_dashboard/nodes')({
50    component: () => <SudoRoute> <NodesPage /> </SudoRoute>
51})