77 lines
3.3 KiB
TypeScript
77 lines
3.3 KiB
TypeScript
import { Card } from './ui/card';
|
|
import { Button } from './ui/button';
|
|
import { Wifi, HelpCircle, BookOpen, ExternalLink } from 'lucide-react';
|
|
import { Input, Label } from './ui';
|
|
|
|
export function DhcpComponent() {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Educational Intro Section */}
|
|
<Card className="p-6 bg-gradient-to-r from-purple-50 to-violet-50 dark:from-purple-950/20 dark:to-violet-950/20 border-purple-200 dark:border-purple-800">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
|
|
<BookOpen className="h-6 w-6 text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-purple-900 dark:text-purple-100 mb-2">
|
|
What is DHCP?
|
|
</h3>
|
|
<p className="text-purple-800 dark:text-purple-200 mb-3 leading-relaxed">
|
|
DHCP (Dynamic Host Configuration Protocol) is like an automatic "address assignment system" for your network.
|
|
When a device joins your network, DHCP automatically gives it an IP address, tells it how to connect to the internet,
|
|
and provides other network settings - no manual configuration needed!
|
|
</p>
|
|
<p className="text-purple-700 dark:text-purple-300 mb-4 text-sm">
|
|
Without DHCP, you'd need to manually assign IP addresses to every device. DHCP makes it so you can just connect
|
|
a phone, laptop, or smart device and it automatically gets everything it needs to work on your network.
|
|
</p>
|
|
<Button variant="outline" size="sm" className="text-purple-700 border-purple-300 hover:bg-purple-100 dark:text-purple-300 dark:border-purple-700 dark:hover:bg-purple-900/20">
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
Learn more about DHCP
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-6">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="p-2 bg-primary/10 rounded-lg">
|
|
<Wifi className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-semibold">DHCP Configuration</h2>
|
|
<p className="text-muted-foreground">
|
|
Manage DHCP settings and IP address allocation
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<span className="text-sm font-medium">Status:</span>
|
|
<span className="text-sm text-green-600">Active</span>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="dhcpRange">IP Range</Label>
|
|
<div className="flex w-full items-center mt-1">
|
|
<Input id="dhcpRange" value="192.168.8.100,192.168.8.239" readOnly/>
|
|
<Button variant="ghost">
|
|
<HelpCircle/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 justify-end mt-4">
|
|
<Button variant="outline" onClick={() => console.log('View DHCP clients')}>
|
|
View Clients
|
|
</Button>
|
|
<Button onClick={() => console.log('Configure DHCP')}>
|
|
Configure
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |