Kishor/void-sentinel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added popup message when clicking on Request Access

Browse Source
This commit is contained in:
Kishor Ramanan
2026-01-03 22:59:40 +05:30
parent 5ed739f981
commit 5d4eb5a505
3 changed files with 97 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/dashboard/[guildId]/layout.tsx
View File

@@ -4,6 +4,8 @@ import { getUserGuilds } from "@/lib/discord";
import ServerSwitcher from "@/components/ServerSwitcher";
import DashboardSidebar from "@/components/DashboardSidebar";
import UserProfile from "@/components/UserProfile";
import RequestAccessButton from "@/components/RequestAccessButton";
export default async function DashboardLayout({
@@ -74,13 +76,9 @@ export default async function DashboardLayout({
Add to Server
</a>
) : (
<button
disabled
className="inline-flex items-center gap-2 px-6 sm:px-8 py-2.5 sm:py-3 bg-white/5 text-gray-400 rounded-full font-bold text-base sm:text-lg cursor-not-allowed border border-white/10"
>
Request Access
</button>
<RequestAccessButton guildId={currentGuild.id} />
)}
</div>
</div>
</div>

10
web/app/dashboard/page.tsx
View File

@@ -4,6 +4,8 @@ import Link from "next/link"
import { getUserGuilds } from "@/lib/discord"
import Toast from "@/components/Toast"
import UserProfile from "@/components/UserProfile"
import RequestAccessButton from "@/components/RequestAccessButton"
export default async function Dashboard() {
@@ -74,13 +76,9 @@ export default async function Dashboard() {
Add to Server
</a>
) : (
<button
disabled
className="px-4 py-2 bg-white/5 text-gray-500 rounded-lg border border-white/5 cursor-not-allowed w-full flex items-center justify-center gap-2"
>
Request Access
</button>
<RequestAccessButton guildId={guild.id} />
)}
</div>
</div>
))}

89
web/components/RequestAccessButton.tsx Normal file
View File

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