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