1import { useServicesQuery } from '@marzneshin/features/services';
 2import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 3import { Link } from '@tanstack/react-router'
 4import { useTranslation } from 'react-i18next';
 5import {
 6    Alert,
 7    AlertDescription,
 8    AlertTitle,
 9} from '@marzneshin/components';
10
11export const UsersNoServiceAlert = () => {
12    const { t } = useTranslation();
13    const { data } = useServicesQuery({ page: 1, size: 10 });
14    return (data && data.pageCount === 0) && (
15        <Alert>
16            <ExclamationTriangleIcon className="mr-2" />
17            <AlertTitle className="font-semibold text-primary">{t('page.users.services-alert.title')}</AlertTitle>
18            <AlertDescription>
19                {t('page.users.services-alert.desc')}
20                <Link className="m-1 font-semibold text-secondary-foreground" to="/services">{t('page.nodes.certificate-alert.click')}</Link>
21            </AlertDescription>
22        </Alert>
23    )
24}
25