422 lines
24 KiB
TypeScript
422 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import {
|
|
Book,
|
|
Bot,
|
|
LayoutDashboard,
|
|
MessageSquare,
|
|
Shield,
|
|
Terminal,
|
|
Zap,
|
|
Menu,
|
|
X,
|
|
ChevronRight,
|
|
Sparkles
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const sections = [
|
|
{
|
|
id: "getting-started",
|
|
title: "Getting Started",
|
|
icon: <Zap className="w-5 h-5" />,
|
|
items: [
|
|
{ id: "introduction", title: "Introduction" },
|
|
{ id: "inviting-bot", title: "Inviting the Bot" },
|
|
],
|
|
},
|
|
{
|
|
id: "commands",
|
|
title: "Commands",
|
|
icon: <Terminal className="w-5 h-5" />,
|
|
items: [
|
|
{ id: "leveling-commands", title: "Leveling" },
|
|
{ id: "utility-commands", title: "Utility" },
|
|
{ id: "fun-commands", title: "Fun & AI" },
|
|
],
|
|
},
|
|
{
|
|
id: "dashboard",
|
|
title: "Dashboard",
|
|
icon: <LayoutDashboard className="w-5 h-5" />,
|
|
items: [
|
|
{ id: "leaderboard", title: "Leaderboard" },
|
|
{ id: "leveling-system", title: "Leveling System" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function DocsPage() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [activeSection, setActiveSection] = useState("introduction");
|
|
|
|
React.useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setActiveSection(entry.target.id);
|
|
}
|
|
});
|
|
},
|
|
{
|
|
rootMargin: "-100px 0px -80% 0px",
|
|
}
|
|
);
|
|
|
|
const ids = sections.flatMap((section) => section.items.map((item) => item.id));
|
|
ids.forEach((id) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
observer.observe(element);
|
|
}
|
|
});
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const scrollToSection = (id: string) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
setActiveSection(id);
|
|
setMobileMenuOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black text-white selection:bg-blue-500/30">
|
|
{/* Mobile Header */}
|
|
<div className="lg:hidden sticky top-0 z-50 border-b border-white/10 bg-black/80 backdrop-blur-md px-4 py-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2 font-bold text-xl">
|
|
<img src="/void_sentinel.png" alt="Void Sentinel Logo" className="w-6 h-6 rounded-full" />
|
|
<span>Void Sentinel</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="p-2 hover:bg-white/5 rounded-lg transition-colors"
|
|
>
|
|
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 flex flex-col lg:flex-row gap-8 py-8">
|
|
{/* Sidebar Navigation */}
|
|
<aside className={cn(
|
|
"lg:w-64 flex-shrink-0 fixed lg:sticky top-[4rem] lg:top-8 h-[calc(100vh-6rem)] lg:h-[calc(100vh-4rem)] overflow-y-auto z-40 bg-black lg:bg-transparent transition-transform duration-300 left-0 w-full lg:translate-x-0 border-r lg:border-r-0 border-white/10 lg:block p-4 lg:p-0",
|
|
mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
|
|
)}>
|
|
<div className="space-y-6">
|
|
<div className="hidden lg:flex items-center gap-2 font-bold text-2xl mb-8 px-2">
|
|
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
|
<img src="/void_sentinel.png" alt="Void Sentinel Logo" className="w-8 h-8 rounded-full" />
|
|
<span>Void Sentinel</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{sections.map((section) => (
|
|
<div key={section.id} className="space-y-2">
|
|
<div className="flex items-center gap-2 px-2 text-sm font-semibold text-gray-400 uppercase tracking-wider">
|
|
{section.icon}
|
|
{section.title}
|
|
</div>
|
|
<div className="space-y-1">
|
|
{section.items.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => scrollToSection(item.id)}
|
|
className={cn(
|
|
"w-full text-left px-3 py-2 rounded-lg text-sm transition-all duration-200 border border-transparent",
|
|
activeSection === item.id
|
|
? "bg-blue-500/10 text-blue-400 border-blue-500/20 shadow-[0_0_15px_rgba(59,130,246,0.1)]"
|
|
: "text-gray-400 hover:text-white hover:bg-white/5"
|
|
)}
|
|
>
|
|
{item.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div className="pt-6 mt-6 border-t border-white/10">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 px-3 py-2 text-sm text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
Back to Home
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 min-w-0 lg:pl-8">
|
|
<div className="max-w-3xl mx-auto space-y-16 pb-20">
|
|
{/* Getting Started */}
|
|
<section id="introduction" className="space-y-6 scroll-mt-24">
|
|
<h1 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-200 to-slate-400">
|
|
Documentation
|
|
</h1>
|
|
<p className="text-xl text-gray-300 leading-relaxed">
|
|
Welcome to the official documentation for Void Sentinel. A powerful, modern Discord bot designed to elevate your server's engagement through advanced leveling, utility tools, and AI-powered interactions.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="inviting-bot" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
|
|
<h2 className="text-3xl font-bold flex items-center gap-3">
|
|
Inviting the Bot
|
|
</h2>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
Currently, Void Sentinel is in <span className="text-yellow-400 font-semibold">Beta</span>. Access is restricted to approved servers.
|
|
</p>
|
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-4 flex gap-3">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<Shield className="w-5 h-5 text-yellow-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-yellow-400">Restricted Access</h4>
|
|
<p className="text-sm text-yellow-200/80 mt-1">
|
|
To invite Void Sentinel to your server, you must request access by sending a DM to <span className="font-mono bg-black/30 px-1 rounded">_void_x_</span> on Discord. Once approved, you can use the invite link provided in the dashboard.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Commands */}
|
|
<section id="leveling-commands" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
|
|
<h2 className="text-3xl font-bold flex items-center gap-3">
|
|
Leveling Commands
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<CommandCard
|
|
command="/leaderboard"
|
|
description="Displays the top 10 members in the server leaderboard. Generates a custom image with ranks, avatars, and XP progress."
|
|
/>
|
|
<CommandCard
|
|
command="/set_levelup_message_channel"
|
|
description="Sets the channel where level-up notifications will be sent."
|
|
args={["channel: The target channel (optional, defaults to current)"]}
|
|
permission="MANAGE_GUILD"
|
|
/>
|
|
<CommandCard
|
|
command="/set_levelup_message"
|
|
description="Sets the custom message template for level-up notifications."
|
|
args={["message: Use {user.mention} and {user.level} as placeholders."]}
|
|
permission="MANAGE_GUILD"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="utility-commands" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
|
|
<h2 className="text-3xl font-bold flex items-center gap-3">
|
|
Utility Commands
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<CommandCard
|
|
command="/auto_response"
|
|
description="Create an automatic response trigger."
|
|
args={[
|
|
"msg: The trigger message",
|
|
"response: The bot's response",
|
|
"mention_reply: Whether to reply with a ping (default: false)"
|
|
]}
|
|
permission="MANAGE_MESSAGES"
|
|
/>
|
|
<CommandCard
|
|
command="/view_auto_responses"
|
|
description="List all configured auto-responses for the server."
|
|
permission="MANAGE_MESSAGES"
|
|
/>
|
|
<CommandCard
|
|
command="/delete_auto_response"
|
|
description="Delete an existing auto-response."
|
|
args={["msg: The trigger message to delete"]}
|
|
permission="MANAGE_MESSAGES"
|
|
/>
|
|
<CommandCard
|
|
command="/edit_auto_response"
|
|
description="Edit an existing auto-response."
|
|
args={[
|
|
"msg: The trigger message",
|
|
"new_response: New response text (optional)",
|
|
"new_mention_reply: New reply setting (optional)"
|
|
]}
|
|
permission="MANAGE_MESSAGES"
|
|
/>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="fun-commands" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
|
|
<h2 className="text-3xl font-bold flex items-center gap-3">
|
|
Fun & AI Commands
|
|
</h2>
|
|
|
|
<div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 mb-6">
|
|
<p className="text-sm text-blue-200">
|
|
<strong className="text-blue-400">Note:</strong> AI-powered features are currently experimental and restricted.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<CommandCard
|
|
command="/ai_chat"
|
|
description="Toggle AI chat mode for the current channel. The bot will respond to messages in this channel."
|
|
permission="BOT_OWNER"
|
|
tag="Restricted"
|
|
/>
|
|
<CommandCard
|
|
command="/urban"
|
|
description="Search for a term on Urban Dictionary."
|
|
args={["term: The word to search for"]}
|
|
/>
|
|
<CommandCard
|
|
command="/say"
|
|
description="Make the bot say something, optionally impersonating another user via webhook."
|
|
args={[
|
|
"msg: The message content",
|
|
"user: User to impersonate (optional)"
|
|
]}
|
|
/>
|
|
<CommandCard
|
|
command="/summary"
|
|
description="Summarizes a referenced message or the replied message using AI."
|
|
args={["message: Link to message (or reply to one)"]}
|
|
tag="Restricted"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Dashboard Guide */}
|
|
|
|
<section id="leaderboard" className="space-y-6 scroll-mt-24 border-t border-white/10 pt-10">
|
|
<h2 className="text-3xl font-bold flex items-center gap-3">
|
|
Leaderboard
|
|
</h2>
|
|
<p className="text-gray-300">
|
|
View your server's leveling leaderboard through the dashboard. This list displays all members ranked by their accumulated XP and current level.
|
|
</p>
|
|
<div className="rounded-xl overflow-hidden border border-white/10 bg-black/20">
|
|
<img
|
|
src="/leaderboard_example.png"
|
|
alt="Leaderboard Example"
|
|
className="w-full h-auto opacity-90 hover:opacity-100 transition-opacity"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="leveling-system" className="space-y-6 scroll-mt-24 border-t border-white/10 pt-10">
|
|
<h2 className="text-3xl font-bold flex items-center gap-3">
|
|
Leveling System Setup
|
|
</h2>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
The dashboard allows you to configure multi-track leveling systems. Here's how to set it up:
|
|
</p>
|
|
|
|
<div className="space-y-6">
|
|
<div className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-3">
|
|
<h3 className="text-xl font-semibold text-white flex items-center gap-2">
|
|
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">1</span>
|
|
Create Leveling Roles
|
|
</h3>
|
|
<ul className="list-disc list-inside space-y-1 ml-1 text-gray-300">
|
|
<li>Create all the level roles you intend to use in your Discord server first.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-4">
|
|
<h3 className="text-xl font-semibold text-white flex items-center gap-2">
|
|
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">2</span>
|
|
Add to Multi-Track Leveling System
|
|
</h3>
|
|
<ul className="list-disc list-inside space-y-2 ml-1 text-gray-300">
|
|
<li>Go to the dashboard and click on <strong>Leveling</strong> in the sidebar.</li>
|
|
<li>In the <strong>Level Tracks</strong> section, click on <strong>Add New Track</strong>.</li>
|
|
<li>Give your track a unique name (e.g., "Mage", "Warrior").</li>
|
|
<li>Select an <strong>Initial Role</strong>. <span className="text-sm text-gray-400 block ml-6 mt-1 mb-2 border-l-2 border-white/10 pl-3 italic">This role identifies which track a user belongs to.</span></li>
|
|
<li>Add your level roles and assign the specific levels they unlock at.</li>
|
|
<li>Click <strong>Save Changes</strong> to apply your configuration.</li>
|
|
</ul>
|
|
<div className="text-sm text-blue-300/80 bg-blue-500/10 border border-blue-500/20 p-3 rounded-lg flex items-center gap-2">
|
|
Free servers can have up to 4 tracks. Premium servers support up to 10 tracks.
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-4">
|
|
<h3 className="text-xl font-semibold text-white flex items-center gap-2">
|
|
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">3</span>
|
|
Set Level Bridgers
|
|
</h3>
|
|
<p className="text-gray-300 text-sm">
|
|
Level Bridgers help restrict users to their initial track and integrate seamlessly with Discord onboarding or reaction roles.
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 ml-1 text-gray-300">
|
|
<li>Select a <strong>Recruit Role</strong> (the role given by onboarding/reaction).</li>
|
|
<li>Select the corresponding <strong>Initial Role</strong> defined in your Level Track.</li>
|
|
<li>Click on <strong>Add Bridger</strong>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-4">
|
|
<h4 className="flex items-center gap-2 font-semibold text-yellow-400 mb-2">
|
|
<Shield className="w-4 h-4" />
|
|
Changing Tracks
|
|
</h4>
|
|
<p className="text-sm text-yellow-200/80">
|
|
If a user wants to switch to a different track, they must rest their progress. Use the command <code className="bg-black/30 px-1.5 py-0.5 rounded font-mono text-yellow-100">/level reset</code>.
|
|
This will reset their level and XP to 0 and remove all roles associated with their current level track.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CommandCard({ command, description, args, permission, tag }: { command: string, description: string, args?: string[], permission?: string, tag?: string }) {
|
|
return (
|
|
<div className="group rounded-xl bg-white/5 border border-white/5 overflow-hidden hover:bg-white/[0.07] transition-all duration-300">
|
|
<div className="p-4 border-b border-white/5 flex flex-wrap items-center justify-between gap-2 bg-black/20">
|
|
<div className="flex items-center gap-3">
|
|
<code className="px-2.5 py-1 rounded-md bg-blue-500/20 text-blue-400 font-mono text-sm font-semibold">
|
|
{command}
|
|
</code>
|
|
{permission && (
|
|
<span className="px-2 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider bg-red-500/10 text-red-400 border border-red-500/20">
|
|
{permission}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{tag && (
|
|
<span className="px-2 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
|
|
{tag}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="p-4 space-y-3">
|
|
<p className="text-gray-300 text-sm leading-relaxed">{description}</p>
|
|
{args && args.length > 0 && (
|
|
<div className="space-y-1">
|
|
<p className="text-xs font-semibold text-gray-500 uppercase tracking-widest">Parameters</p>
|
|
<ul className="space-y-1">
|
|
{args.map((arg, i) => (
|
|
<li key={i} className="text-xs text-gray-400 font-mono pl-2 border-l-2 border-white/10">
|
|
{arg}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|