90 lines
4.1 KiB
TypeScript
90 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { Lock, Copy, Check, X } from "lucide-react";
|
|
|
|
interface RequestAccessButtonProps {
|
|
guildId: string;
|
|
}
|
|
|
|
export default function RequestAccessButton({ guildId }: RequestAccessButtonProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(guildId);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => setIsOpen(true)}
|
|
className="px-4 py-2 bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white rounded-lg border border-white/5 hover:border-white/20 transition-all w-full flex items-center justify-center gap-2 group"
|
|
>
|
|
<Lock className="w-4 h-4 text-gray-500 group-hover:text-gray-300" />
|
|
Request Access
|
|
</button>
|
|
|
|
{isOpen && createPortal(
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200"
|
|
onClick={() => setIsOpen(false)}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="relative w-full max-w-md bg-[#09090b] border border-white/10 rounded-2xl shadow-2xl p-6 animate-in zoom-in-95 duration-200">
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="absolute top-4 right-4 text-gray-500 hover:text-white transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="flex flex-col items-center text-center space-y-4">
|
|
<div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center border border-blue-500/20 text-blue-400 mb-2">
|
|
<Lock className="w-6 h-6" />
|
|
</div>
|
|
|
|
<h3 className="text-xl font-bold text-white">
|
|
Beta Access Required
|
|
</h3>
|
|
|
|
<p className="text-gray-300 text-sm leading-relaxed">
|
|
Please send a DM to <span className="font-mono bg-blue-500/20 text-blue-300 px-1.5 py-0.5 rounded">_void_x_</span> on Discord to enable beta access for your server.
|
|
<br />
|
|
Make sure to include your Server ID:
|
|
</p>
|
|
|
|
<div className="w-full flex items-center gap-2 bg-black/40 border border-white/10 rounded-lg p-3 group hover:border-white/20 transition-colors">
|
|
<code className="flex-1 font-mono text-sm text-gray-300 truncate text-left">
|
|
{guildId}
|
|
</code>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="p-1.5 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white"
|
|
title="Copy ID"
|
|
>
|
|
{copied ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors mt-2"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</>
|
|
);
|
|
}
|