53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import Link from "next/link";
|
|
import { Smartphone, QrCode, ArrowRight } from "lucide-react";
|
|
|
|
export function LinkDeviceSection() {
|
|
return (
|
|
<div
|
|
id="link-device"
|
|
className="bg-[#111] rounded-lg p-6 border border-[#1c1c1c]"
|
|
>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-lg bg-purple-500/10">
|
|
<Smartphone className="w-5 h-5 text-purple-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium text-white">Link Mobile Device</h3>
|
|
<p className="text-sm text-gray-400">
|
|
Connect your phone without typing passwords
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-400 mb-4">
|
|
Generate a QR code or 6-digit code to quickly link your mobile device.
|
|
No need to type your server URL or password on your phone.
|
|
</p>
|
|
|
|
<Link
|
|
href="/device"
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-400 rounded-lg transition-colors border border-purple-500/30"
|
|
>
|
|
<QrCode className="w-4 h-4" />
|
|
<span>Link a Device</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|