81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Settings } from "lucide-react";
|
|
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import FileStatistics from "@/components/file-statistics";
|
|
import { useTelegramAccount } from "@/hooks/use-telegram-account";
|
|
import Proxys from "@/components/proxys";
|
|
import SettingsForm from "@/components/settings-form";
|
|
|
|
export const SettingsDialog: React.FC = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { account, accountId } = useTelegramAccount();
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
|
<DialogTrigger
|
|
asChild
|
|
onClick={() => {
|
|
setIsOpen(!isOpen);
|
|
}}
|
|
>
|
|
<Button variant="ghost" size="icon">
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent
|
|
className="md:max-w-2/3 h-full w-full max-w-full md:h-3/4 md:w-2/3"
|
|
onPointerDownOutside={() => setIsOpen(false)}
|
|
aria-describedby={undefined}
|
|
>
|
|
<VisuallyHidden>
|
|
<DialogTitle>Settings</DialogTitle>
|
|
</VisuallyHidden>
|
|
<Tabs
|
|
defaultValue="general"
|
|
className="mt-3 flex h-full flex-col overflow-hidden"
|
|
>
|
|
<TabsList className="justify-start">
|
|
<TabsTrigger value="general">General</TabsTrigger>
|
|
<TabsTrigger value="statistics">Statistics</TabsTrigger>
|
|
<TabsTrigger value="proxys">Proxys</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="general" className="h-full">
|
|
<div className="flex flex-col overflow-hidden">
|
|
<SettingsForm />
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="statistics" className="h-full">
|
|
<div className="flex flex-col overflow-y-scroll">
|
|
{accountId ? (
|
|
<FileStatistics telegramId={accountId} />
|
|
) : (
|
|
<div className="flex flex-1 items-center justify-center">
|
|
<p className="text-lg text-muted-foreground">
|
|
Please select an account to view statistics
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="proxys" className="h-full">
|
|
<div className="flex h-full flex-col overflow-y-scroll">
|
|
<Proxys
|
|
telegramId={accountId}
|
|
proxyName={account?.proxy}
|
|
enableSelect={true}
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|