diff --git a/dashboard/src/components/index.ts b/dashboard/src/components/index.ts
@@ -7,3 +7,4 @@ export * from './nav-dir'
export * from './header'
export * from './entity-table'
export * from './copy-button'
+export * from './page'
diff --git a/dashboard/src/components/page/index.tsx b/dashboard/src/components/page/index.tsx
@@ -0,0 +1,17 @@
+import { FC, PropsWithChildren } from 'react'
+import { ScrollArea } from '@marzneshin/components'
+
+interface PageProps extends PropsWithChildren { }
+
+/* WARN: The current page height which effect the scroll
+* area activness, is calculated based on height of header
+* and margin.
+*/
+
+export const Page: FC<PageProps> = ({ children }) => {
+ return (
+ <ScrollArea style={{ height: `calc(100vh - 4.5rem)` }} className="m-3">
+ {children}
+ </ScrollArea>
+ );
+}
diff --git a/dashboard/src/routes/_dashboard/hosts.tsx b/dashboard/src/routes/_dashboard/hosts.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@marzneshin/components'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle, Page } from '@marzneshin/components'
import { InboundHostsTable } from '@marzneshin/features/hosts'
import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
@@ -6,18 +6,20 @@ import { useTranslation } from 'react-i18next'
export const HostsPage = () => {
const { t } = useTranslation()
return (
- <Card className="m-2">
- <CardHeader>
- <CardTitle>
- {t('hosts')}
- </CardTitle>
- </CardHeader>
- <CardContent>
- <InboundHostsTable />
- </CardContent>
- <CardFooter>
- </CardFooter>
- </Card>
+ <Page>
+ <Card>
+ <CardHeader>
+ <CardTitle>
+ {t('hosts')}
+ </CardTitle>
+ </CardHeader>
+ <CardContent>
+ <InboundHostsTable />
+ </CardContent>
+ <CardFooter>
+ </CardFooter>
+ </Card>
+ </Page>
)
}
diff --git a/dashboard/src/routes/_dashboard/nodes.tsx b/dashboard/src/routes/_dashboard/nodes.tsx
@@ -1,4 +1,14 @@
-import { Alert, AlertDescription, AlertTitle, Card, CardContent, CardFooter, CardHeader, CardTitle } from '@marzneshin/components';
+import {
+ Alert,
+ AlertDescription,
+ AlertTitle,
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+ Page
+} from '@marzneshin/components';
import { NodesTable } from '@marzneshin/features/nodes';
import { Link, createFileRoute } from '@tanstack/react-router'
import { Info } from 'lucide-react';
@@ -8,26 +18,29 @@ import { useTranslation } from 'react-i18next';
export const NodesPage: FC = () => {
const { t } = useTranslation();
return (
- <Card className="m-3">
- <CardHeader>
- <CardTitle>
- {t('nodes')}
- </CardTitle>
- </CardHeader>
- <CardContent>
- <NodesTable />
- </CardContent>
- <CardFooter>
- <Alert>
- <Info className="mr-2" />
- <AlertTitle className="font-semibold text-primary">{t('page.nodes.certificate-alert.title')}</AlertTitle>
- <AlertDescription>
- {t('page.nodes.certificate-alert.desc')}
- <Link className="m-1 font-semibold text-secondary-foreground" to="/settings">{t('page.nodes.certificate-alert.click')}</Link>
- </AlertDescription>
- </Alert>
- </CardFooter>
- </Card >)
+ <Page>
+ <Card>
+ <CardHeader>
+ <CardTitle>
+ {t('nodes')}
+ </CardTitle>
+ </CardHeader>
+ <CardContent>
+ <NodesTable />
+ </CardContent>
+ <CardFooter>
+ <Alert>
+ <Info className="mr-2" />
+ <AlertTitle className="font-semibold text-primary">{t('page.nodes.certificate-alert.title')}</AlertTitle>
+ <AlertDescription>
+ {t('page.nodes.certificate-alert.desc')}
+ <Link className="m-1 font-semibold text-secondary-foreground" to="/settings">{t('page.nodes.certificate-alert.click')}</Link>
+ </AlertDescription>
+ </Alert>
+ </CardFooter>
+ </Card >
+ </Page>
+ )
};
export const Route = createFileRoute('/_dashboard/nodes')({
diff --git a/dashboard/src/routes/_dashboard/services.tsx b/dashboard/src/routes/_dashboard/services.tsx
@@ -3,7 +3,8 @@ import {
CardContent,
CardFooter,
CardHeader,
- CardTitle
+ CardTitle,
+ Page
} from '@marzneshin/components'
import { ServicesTable } from '@marzneshin/features/services';
import { createFileRoute } from '@tanstack/react-router'
@@ -13,18 +14,20 @@ import { useTranslation } from 'react-i18next';
export const ServicesPage: FC = () => {
const { t } = useTranslation();
return (
- <Card className="m-3">
- <CardHeader>
- <CardTitle>
- {t('services')}
- </CardTitle>
- </CardHeader>
- <CardContent>
- <ServicesTable />
- </CardContent>
- <CardFooter>
- </CardFooter>
- </Card >
+ <Page>
+ <Card>
+ <CardHeader>
+ <CardTitle>
+ {t('services')}
+ </CardTitle>
+ </CardHeader>
+ <CardContent>
+ <ServicesTable />
+ </CardContent>
+ <CardFooter>
+ </CardFooter>
+ </Card >
+ </Page>
)
};
diff --git a/dashboard/src/routes/_dashboard/settings.tsx b/dashboard/src/routes/_dashboard/settings.tsx
@@ -1,5 +1,5 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@marzneshin/components'
+import { Card, CardContent, CardHeader, CardTitle, Page } from '@marzneshin/components'
import { CertificateButton } from '@marzneshin/features/settings'
import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
@@ -7,16 +7,18 @@ import { useTranslation } from 'react-i18next'
export const Settings = () => {
const { t } = useTranslation()
return (
- <Card className="m-3">
- <CardContent>
- <CardHeader>
- <CardTitle>
- {t('settings')}
- </CardTitle>
- </CardHeader>
- <CertificateButton />
- </CardContent>
- </Card>
+ <Page>
+ <Card className="m-3">
+ <CardContent>
+ <CardHeader>
+ <CardTitle>
+ {t('settings')}
+ </CardTitle>
+ </CardHeader>
+ <CertificateButton />
+ </CardContent>
+ </Card>
+ </Page>
)
}
diff --git a/dashboard/src/routes/_dashboard/users.tsx b/dashboard/src/routes/_dashboard/users.tsx
@@ -1,4 +1,14 @@
-import { Alert, AlertDescription, AlertTitle, Card, CardContent, CardFooter, CardHeader, CardTitle } from '@marzneshin/components';
+import {
+ Alert,
+ AlertDescription,
+ AlertTitle,
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+ Page
+} from '@marzneshin/components';
import { useServicesQuery } from '@marzneshin/features/services';
import { UsersTable } from '@marzneshin/features/users';
import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
@@ -6,33 +16,34 @@ import { Link, createFileRoute } from '@tanstack/react-router'
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
-
export const UsersPage: FC = () => {
const { data } = useServicesQuery();
const { t } = useTranslation();
return (
- <Card className="m-3">
- <CardHeader>
- <CardTitle>
- {t('users')}
- </CardTitle>
- </CardHeader>
- <CardContent>
- <UsersTable />
- </CardContent>
- <CardFooter>
- {(data && data.length === 0) && (
- <Alert>
- <ExclamationTriangleIcon className="mr-2" />
- <AlertTitle className="font-semibold text-primary">{t('page.users.services-alert.title')}</AlertTitle>
- <AlertDescription>
- {t('page.users.services-alert.desc')}
- <Link className="m-1 font-semibold text-secondary-foreground" to="/services">{t('page.nodes.certificate-alert.click')}</Link>
- </AlertDescription>
- </Alert>
- )}
- </CardFooter>
- </Card >
+ <Page>
+ <Card >
+ <CardHeader>
+ <CardTitle>
+ {t('users')}
+ </CardTitle>
+ </CardHeader>
+ <CardContent>
+ <UsersTable />
+ </CardContent>
+ <CardFooter>
+ {(data && data.length === 0) && (
+ <Alert>
+ <ExclamationTriangleIcon className="mr-2" />
+ <AlertTitle className="font-semibold text-primary">{t('page.users.services-alert.title')}</AlertTitle>
+ <AlertDescription>
+ {t('page.users.services-alert.desc')}
+ <Link className="m-1 font-semibold text-secondary-foreground" to="/services">{t('page.nodes.certificate-alert.click')}</Link>
+ </AlertDescription>
+ </Alert>
+ )}
+ </CardFooter>
+ </Card>
+ </Page>
)
};