1import {
 2    Card,
 3    CardContent,
 4    CardFooter,
 5    CardHeader,
 6    CardTitle,
 7    Page,
 8    Loading,
 9} from '@marzneshin/components'
10import { InboundHostsTable } from '@marzneshin/features/hosts'
11import { SudoRoute } from '@marzneshin/features/sudo-routes'
12import { createFileRoute, Outlet } from '@tanstack/react-router'
13import { useTranslation } from 'react-i18next'
14import { Suspense } from 'react';
15
16export const HostsPage = () => {
17    const { t } = useTranslation()
18    return (
19        <Page>
20            <Card className="border-0 sm:w-screen md:w-full">
21                <CardHeader>
22                    <CardTitle>
23                        {t('hosts')}
24                    </CardTitle>
25                </CardHeader>
26                <CardContent>
27                    <InboundHostsTable />
28                    <Suspense fallback={<Loading />}>
29                        <Outlet />
30                    </Suspense>
31                </CardContent>
32                <CardFooter>
33                </CardFooter>
34            </Card>
35        </Page>
36    )
37}
38
39export const Route = createFileRoute('/_dashboard/hosts')({
40    component: () => <SudoRoute><HostsPage /></SudoRoute>
41})