Bob AI: Populate the newly-created page at src/pages/DashboardPage.t
This commit is contained in:
kudinDmitriyUp
@@ -1,74 +1,114 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import MetricsSimpleCards from "@/components/sections/metrics/MetricsSimpleCards";
|
||||
import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
|
||||
import FooterMinimal from "@/components/sections/footer/FooterMinimal";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Card from "@/components/ui/Card";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
import { LogIn, Database, Users, Activity, CheckCircle2 } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground flex flex-col">
|
||||
<NavbarCentered
|
||||
logo="DiscordDash"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Login with Discord", href: "/login" }}
|
||||
/>
|
||||
<div className="min-h-svh bg-background text-foreground flex flex-col">
|
||||
<main className="flex-grow flex flex-col items-center justify-center px-6">
|
||||
{!isLoggedIn ? (
|
||||
<Card className="w-full max-w-content-width p-8 flex flex-col items-center text-center gap-6">
|
||||
<div className="size-16 rounded-full bg-primary-cta/10 flex items-center justify-center mb-2">
|
||||
<LogIn className="size-8 text-primary-cta" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-2">Server Authentication</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Connect your Discord account to access your personalized dashboard and Supabase database.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
text="Login with Discord"
|
||||
variant="primary"
|
||||
onClick={() => setIsLoggedIn(true)}
|
||||
className="w-full"
|
||||
/>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="w-full max-w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-4xl font-bold">Discord Server Dashboard</h1>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Manage your server data synced in real-time with Supabase.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<main className="flex-grow">
|
||||
<HeroSplit
|
||||
tag="Authentication"
|
||||
title="Manage Your Discord Community"
|
||||
description="Connect your Discord account to access your personalized dashboard. Powered by Supabase for secure, real-time user data storage and seamless integration."
|
||||
primaryButton={{ text: "Login with Discord", href: "/auth/discord" }}
|
||||
secondaryButton={{ text: "View Documentation", href: "/docs" }}
|
||||
imageSrc="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?auto=format&fit=crop&w=800&q=80"
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="size-10 rounded-full bg-primary-cta/10 flex items-center justify-center">
|
||||
<Database className="size-5 text-primary-cta" />
|
||||
</div>
|
||||
<Tag text="Connected" icon={CheckCircle2} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Database Connection</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">Supabase Postgres DB is online and responding.</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<MetricsSimpleCards
|
||||
tag="Overview"
|
||||
title="Server Statistics"
|
||||
description="Real-time insights from your connected Discord server, synced instantly via Supabase."
|
||||
metrics={[
|
||||
{ value: "12.4k", description: "Total Registered Users" },
|
||||
{ value: "850", description: "Active Voice Sessions" },
|
||||
{ value: "99.9%", description: "Database Uptime" }
|
||||
]}
|
||||
/>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="size-10 rounded-full bg-primary-cta/10 flex items-center justify-center">
|
||||
<Users className="size-5 text-primary-cta" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">User Data Storage</h3>
|
||||
<p className="text-3xl font-bold mt-2">1,204 <span className="text-sm font-normal text-muted-foreground">Members</span></p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<FeaturesIconCards
|
||||
tag="Database"
|
||||
title="Powered by Supabase"
|
||||
description="Secure, scalable, and real-time data storage for your community's custom needs."
|
||||
features={[
|
||||
{
|
||||
icon: "🗄️",
|
||||
title: "User Profiles",
|
||||
description: "Store and manage custom user data, roles, and preferences securely in Postgres."
|
||||
},
|
||||
{
|
||||
icon: "📊",
|
||||
title: "Activity Logs",
|
||||
description: "Track message counts, voice time, and server interactions with real-time inserts."
|
||||
},
|
||||
{
|
||||
icon: "💰",
|
||||
title: "Economy System",
|
||||
description: "Built-in support for virtual currencies and inventory management using Supabase RPCs."
|
||||
},
|
||||
{
|
||||
icon: "⚡",
|
||||
title: "Real-time Sync",
|
||||
description: "Instant updates across all connected clients using Supabase real-time subscriptions."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="size-10 rounded-full bg-primary-cta/10 flex items-center justify-center">
|
||||
<Activity className="size-5 text-primary-cta" />
|
||||
</div>
|
||||
<Tag text="Active" icon={CheckCircle2} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Realtime Sync</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">Listening to presence and message events.</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 flex flex-col gap-6">
|
||||
<h3 className="text-xl font-semibold">Recent Users</h3>
|
||||
<div className="flex flex-col gap-4">
|
||||
{[
|
||||
{ name: "Alex", role: "Admin", status: "Online" },
|
||||
{ name: "Sarah", role: "Moderator", status: "Online" },
|
||||
{ name: "Mike", role: "Member", status: "Offline" },
|
||||
{ name: "Emma", role: "Member", status: "Online" },
|
||||
].map((user, i) => (
|
||||
<div key={i} className="flex items-center justify-between p-4 rounded-lg border border-border/50 bg-background/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="size-10 rounded-full bg-primary-cta/20 flex items-center justify-center text-primary-cta font-bold">
|
||||
{user.name[0]}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{user.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{user.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`size-2 rounded-full ${user.status ==='Online' ? 'bg-green-500' : 'bg-gray-500'}`} />
|
||||
<span className="text-sm text-muted-foreground">{user.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<FooterMinimal
|
||||
brand="DiscordDash"
|
||||
copyright="© 2024 DiscordDash. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user