bender/cfda5eb0-1bf6-4cea-bfca-b2f725a4c743
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1781443484064 into main #1

Merged
bender merged 2 commits from version_2_1781443484064 into main 2026-06-14 13:27:43 +00:00
Conversation 0 Commits 2 Files Changed 4 +120 -1
4 changed files with 120 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import HomePage from './pages/HomePage';
import DashboardPage from "@/pages/DashboardPage";
export default function App() {
return (
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<HomePage />} />
<Route path="/dashboard" element={<DashboardPage />} />
</Route>
</Routes>
);

4
src/components/Layout.tsx
View File

@@ -34,7 +34,9 @@ export default function Layout() {
{
"name": "Testimonials",
"href": "#testimonials"
}
},
{ name: "Dashboard", href: "/dashboard" },
];
return (

114
src/pages/DashboardPage.tsx Normal file
View File

@@ -0,0 +1,114 @@
import React, { useState } from "react";
import { routes } from "@/routes";
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-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>
<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>
<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>
<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>
</div>
);
}

1
src/routes.ts
View File

@@ -6,4 +6,5 @@ export interface Route {
export const routes: Route[] = [
{ path: '/', label: 'Home', pageFile: 'HomePage' },
{ path: '/dashboard', label: 'Dashboard', pageFile: 'DashboardPage' },
];