initial commit

components/dns-manager.tsx

@@ -0,0 +1,104 @@
+"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>
+  );
+}