105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import { ApiKeyForm } from './api-key-form';
|
|
import { DomainsList } from './domains-list';
|
|
import { RecordsList } from './records-list';
|
|
import { ApiLogs } from './api-logs';
|
|
import { ThemeToggle } from './theme-toggle';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
|
|
export function DNSManager() {
|
|
const [apiKey, setApiKey] = useState<string | null>(null);
|
|
const [selectedDomain, setSelectedDomain] = useState<string | null>(null);
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 min-h-screen flex flex-col">
|
|
<header className="py-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Vultr DNS Manager</h1>
|
|
<p className="text-muted-foreground mt-1">Manage your DNS records with ease</p>
|
|
</div>
|
|
<ThemeToggle />
|
|
</header>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="flex-1 flex flex-col gap-6">
|
|
{!apiKey ? (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Welcome to Vultr DNS Manager</CardTitle>
|
|
<CardDescription>
|
|
Enter your Vultr API key to get started
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ApiKeyForm onApiKeySubmit={setApiKey} />
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 flex-1">
|
|
<div className="md:col-span-3 flex flex-col">
|
|
<Card className="flex-1">
|
|
<CardHeader>
|
|
<CardTitle>Domains</CardTitle>
|
|
<CardDescription>Select a domain to manage</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DomainsList
|
|
apiKey={apiKey}
|
|
onSelectDomain={setSelectedDomain}
|
|
selectedDomain={selectedDomain}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="md:col-span-9 flex flex-col">
|
|
<Card className="flex-1">
|
|
{selectedDomain ? (
|
|
<Tabs defaultValue="records" className="w-full h-full flex flex-col">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle>{selectedDomain}</CardTitle>
|
|
<TabsList>
|
|
<TabsTrigger value="records">Records</TabsTrigger>
|
|
<TabsTrigger value="logs">API Logs</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
<CardDescription>
|
|
Manage DNS records for this domain
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1">
|
|
<TabsContent value="records" className="mt-0 h-full">
|
|
<RecordsList apiKey={apiKey} domain={selectedDomain} />
|
|
</TabsContent>
|
|
<TabsContent value="logs" className="mt-0 h-full">
|
|
<ApiLogs />
|
|
</TabsContent>
|
|
</CardContent>
|
|
</Tabs>
|
|
) : (
|
|
<CardHeader>
|
|
<CardTitle>No Domain Selected</CardTitle>
|
|
<CardDescription>
|
|
Please select a domain from the list to manage its DNS records
|
|
</CardDescription>
|
|
</CardHeader>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<footer className="mt-8 py-4 text-center text-sm text-muted-foreground">
|
|
<p>© {new Date().getFullYear()} Vultr DNS Manager</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|