This commit is contained in:
2026-04-05 00:43:23 +05:30
commit 8be37d3e92
425 changed files with 101853 additions and 0 deletions

View File

@@ -0,0 +1,188 @@
"use client";
import Link from "next/link";
import Sidebar from "@/components/Sidebar";
function Icon({ name, className = "" }: { name: string; className?: string }) {
return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
}
function StatChip({ label, value, icon }: { label: string; value: string; icon: string }) {
return (
<div className="flex flex-col items-center justify-center p-4 rounded-xl border border-white/[0.06] text-center gap-1" style={{ background: "#0f0a1f" }}>
<Icon name={icon} className="text-[#B7A6FB] text-xl mb-1" />
<span className="text-xl font-black text-white">{value}</span>
<span className="text-[10px] text-slate-500 uppercase tracking-wider font-mono">{label}</span>
</div>
);
}
function ActionBtn({ icon, label, sub }: { icon: string; label: string; sub: string }) {
return (
<button className="flex items-center gap-3 rounded-xl p-4 border border-white/[0.06] hover:border-[#B7A6FB]/30 hover:bg-[#B7A6FB]/5 transition-all text-left group" style={{ background: "#0f0a1f" }}>
<Icon name={icon} className="text-[#B7A6FB] text-2xl group-hover:scale-110 transition-transform" />
<div>
<p className="text-white font-medium text-sm">{label}</p>
<p className="text-slate-500 text-xs">{sub}</p>
</div>
</button>
);
}
export default function ProfilePage() {
const displayName = "Anirban Basak";
const initials = "AB";
const username = "@anirbanbasak";
const telegramId = "#7291048";
const personality = "Balanced";
const voiceId = "tHnMa72bKS";
const joinedAt = "January 12, 2026";
const accountRows = [
{ label: "Display Name", value: displayName },
{ label: "Telegram Handle", value: username },
{ label: "Telegram ID", value: telegramId },
{ label: "Personality", value: personality },
{ label: "Member Since", value: joinedAt },
];
return (
<div className="flex h-screen w-full overflow-hidden bg-[#020105] text-slate-300 relative">
{/* grid bg */}
<div
className="absolute inset-0 pointer-events-none"
style={{
backgroundImage:
"linear-gradient(rgba(183,166,251,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(183,166,251,0.03) 1px,transparent 1px)",
backgroundSize: "40px 40px",
}}
/>
<Sidebar />
<main className="flex-1 flex flex-col h-full overflow-hidden relative z-10">
{/* Top bar */}
<header className="h-14 flex items-center justify-between px-6 bg-[#020105]/90 backdrop-blur-md border-b border-white/[0.06] sticky top-0 z-30 shrink-0">
<div className="flex items-center gap-3">
<Link href="/dashboard" className="p-1.5 rounded-lg text-slate-500 hover:text-white hover:bg-white/5 transition-all">
<Icon name="arrow_back" className="text-lg" />
</Link>
<h2 className="text-sm font-semibold text-white tracking-tight">User Profile</h2>
</div>
<div className="flex items-center gap-2">
<button className="size-8 flex items-center justify-center rounded-lg bg-white/[0.04] border border-white/[0.08] text-slate-500 hover:text-white hover:border-white/20 transition-all" title="Settings">
<Icon name="settings" className="text-base" />
</button>
<button className="size-8 flex items-center justify-center rounded-lg bg-white/[0.04] border border-white/[0.08] text-slate-500 hover:text-red-400 hover:border-red-400/20 transition-all" title="Logout">
<Icon name="logout" className="text-base" />
</button>
</div>
</header>
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto p-6">
<div className="max-w-2xl mx-auto flex flex-col gap-6">
{/* Profile hero */}
<div
className="flex flex-col items-center gap-5 py-8 px-6 rounded-2xl border border-white/[0.06] relative overflow-hidden"
style={{ background: "rgba(183,166,251,0.04)" }}
>
<div className="absolute inset-0 bg-gradient-to-b from-[#B7A6FB]/5 to-transparent pointer-events-none" />
{/* Avatar */}
<div className="relative z-10">
<div
className="size-28 rounded-full border-2 border-[#B7A6FB] p-1"
style={{ boxShadow: "0 0 24px rgba(183,166,251,0.25)" }}
>
<div className="size-full rounded-full bg-gradient-to-br from-[#B7A6FB]/30 to-[#22d3ee]/20 flex items-center justify-center">
<span className="text-3xl font-black text-white">{initials}</span>
</div>
</div>
<div className="absolute bottom-1 right-1 size-5 bg-emerald-500 border-4 border-[#020105] rounded-full" />
</div>
<div className="flex flex-col items-center text-center z-10">
<h1 className="text-3xl font-bold text-white tracking-tight">{displayName}</h1>
<p className="text-[#B7A6FB] font-medium mt-1">{username}</p>
<p className="text-slate-500 text-sm mt-1">
Telegram ID: <span className="text-slate-400 font-mono">{telegramId}</span>
</p>
<div className="mt-3 flex items-center gap-1.5 px-3 py-1 rounded-full border border-emerald-500/20 bg-emerald-500/10 text-emerald-400 text-[11px] font-bold uppercase tracking-wider">
<span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
Active
</div>
</div>
</div>
{/* Stats row */}
<div className="grid grid-cols-3 gap-3">
<StatChip icon="smart_toy" label="Persona" value={personality} />
<StatChip icon="record_voice_over" label="Voice ID" value={voiceId + "…"} />
<StatChip icon="bolt" label="Status" value="Online" />
</div>
{/* Account details */}
<div className="flex flex-col gap-3">
<h3 className="text-slate-100 text-sm font-semibold px-1">Account Details</h3>
<div
className="rounded-2xl border border-white/[0.06] p-5 flex flex-col gap-4"
style={{ background: "rgba(183,166,251,0.03)" }}
>
{accountRows.map(({ label, value }, i) => (
<div
key={label}
className={`flex justify-between items-center${i < accountRows.length - 1 ? " pb-4 border-b border-white/[0.05]" : ""}`}
>
<span className="text-slate-500 text-sm">{label}</span>
<span className="text-slate-100 font-medium text-sm font-mono">{value}</span>
</div>
))}
</div>
</div>
{/* Active agent */}
<div className="flex flex-col gap-3">
<h3 className="text-slate-100 text-sm font-semibold px-1">Active Agent Status</h3>
<div
className="rounded-2xl border border-white/[0.06] p-5 flex items-center justify-between"
style={{ background: "rgba(183,166,251,0.03)" }}
>
<div className="flex items-center gap-4">
<div className="size-10 rounded-lg bg-[#B7A6FB]/15 flex items-center justify-center text-[#B7A6FB]">
<Icon name="smart_toy" className="text-xl" />
</div>
<div>
<p className="text-slate-100 font-medium text-sm">Mesh-Core-Alpha</p>
<p className="text-slate-500 text-xs">Primary Computing Node</p>
</div>
</div>
<div className="px-3 py-1 rounded-full border border-emerald-500/20 bg-emerald-500/10 text-emerald-400 text-[11px] font-bold uppercase tracking-wider">
Operational
</div>
</div>
</div>
{/* Quick actions */}
<div className="flex flex-col gap-3">
<h3 className="text-slate-100 text-sm font-semibold px-1">Quick Actions</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<ActionBtn icon="edit_square" label="Edit Profile" sub="Update your information" />
<ActionBtn icon="shield_lock" label="Security Settings" sub="Manage 2FA and keys" />
<ActionBtn icon="notifications" label="Notifications" sub="Alert preferences" />
<ActionBtn icon="link" label="Connected Apps" sub="Telegram, UPI & more" />
</div>
</div>
{/* Footer */}
<div className="flex justify-center py-6">
<p className="text-slate-700 text-xs font-mono">negoT8 v2.0.0 © 2026</p>
</div>
</div>
</div>
</main>
</div>
);
}