1import { type FC, useEffect } from "react";
 2import {
 3    Sheet,
 4    SheetContent,
 5    SheetHeader,
 6    SheetTitle,
 7    Table,
 8    TableBody,
 9    TableRowWithCell,
10} from "@marzneshin/components"
11import { useTranslation } from "react-i18next"
12import { HostType } from "../.."
13
14interface HostsSettingsDialogProps {
15    onOpenChange: (state: boolean) => void
16    onClose: () => void
17    open: boolean
18    entity: HostType
19}
20
21export const HostSettingsDialog: FC<HostsSettingsDialogProps> = ({ onOpenChange, open, entity, onClose }) => {
22    const { t } = useTranslation();
23
24    useEffect(() => {
25        if (!open) onClose();
26    }, [open, onClose]);
27
28    return (
29        <Sheet open={open} onOpenChange={onOpenChange}>
30            <SheetContent className="sm:min-w-full md:min-w-[700px]" >
31                <SheetHeader>
32                    <SheetTitle>
33                        {t('page.hosts.settings.title')}
34                    </SheetTitle>
35                </SheetHeader>
36                <Table>
37                    <TableBody>
38                        <TableRowWithCell label={t('remark')} value={entity.remark} />
39                        <TableRowWithCell label={t('address')} value={entity.address} />
40                        <TableRowWithCell label={t('port')} value={entity.port} />
41                        <TableRowWithCell label={t('host')} value={entity.host} />
42                        <TableRowWithCell label={t('path')} value={entity.path} />
43                        <TableRowWithCell label={t('sni')} value={entity.sni} />
44                        <TableRowWithCell label={t('alpn')} value={entity.alpn} />
45                    </TableBody>
46                </Table>
47            </SheetContent>
48        </Sheet>
49    )
50}