optimize page

2026-04-20 21:45:33 +00:00 · 2026-04-19 00:53:01 +01:00
parent a6d475ed13
commit 662a8a400b
9 changed files with 477 additions and 409 deletions
@@ -0,0 +1,34 @@
+import { getUserProfile } from "@/src/lib/auth/get-user-profile";
+import { redirect } from "next/navigation";
+
+export const AdminHeaderPage = async () => {
+    const user = await getUserProfile();
+
+    if (!user) {
+      redirect("/login");
+    }
+
+  return (
+    <header className="h-16 border-b border-slate-200 bg-white/50 backdrop-blur-md sticky top-0 z-10 px-8 flex items-center justify-between">
+        <div className="w-1/3">
+        <input 
+            type="text" 
+            placeholder="Pesquisar artigos..." 
+            className="w-full bg-slate-100 border-none rounded-full px-4 py-1.5 text-sm focus:ring-2 focus:ring-blue-500/20 outline-none"
+        />
+        </div>
+        <div className="flex items-center gap-4">
+        <div className="text-right">
+            <p className="text-xs font-bold">{user?.name ?? "Loading..."}</p>
+            <p className="text-[10px] text-slate-500">Editor</p>
+        </div>
+        <div className="w-8 h-8 bg-slate-300 rounded-full border border-white shadow-sm overflow-hidden">
+            <img
+            src={user?.picture ?? "https://ui-avatars.com/api/?name=User"}
+            alt="User"
+            />
+        </div>
+        </div>
+    </header>
+  );
+};
@@ -0,0 +1,67 @@
+import { getUserProfile } from "@/src/lib/auth/get-user-profile";
+import { BarChart3, HelpCircle, LayoutDashboard, Newspaper, Settings, Users } from "lucide-react";
+import { redirect } from "next/navigation";
+import Image from 'next/image';
+
+export const AdminSideBar = async () => {
+    const user = await getUserProfile();
+
+    if (!user) {
+      redirect("/login");
+    }
+
+  return (
+    <aside className="w-64 backdrop-blur-xl bg-white/80 border-r border-slate-200 p-6 flex flex-col">
+    <div className="flex items-center gap-2 mb-10 px-2">
+    <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold italic">
+        <Image src="/logo.png" alt="TVone" width={50} height={50} />
+      </div>
+      <span className="font-bold text-sm tracking-tight leading-tight uppercase">
+        TVone<br/><span className="text-blue-600 text-[10px]">de Notícias</span>
+      </span>
+    </div>
+
+    <nav className="flex-1 space-y-1">
+      <NavItem icon={<LayoutDashboard size={18}/>} label="Painel" />
+      <NavItem icon={<Newspaper size={18}/>} label="Meus Artigos" />
+      <NavItem icon={<Users size={18}/>} label="Equipa" />
+      <NavItem icon={<BarChart3 size={18}/>} label="Análises" />
+      <NavItem icon={<Newspaper size={18}/>} label="Adicionar Notícia" active />
+      <NavItem icon={<Settings size={18}/>} label="Definições" />
+      <NavItem icon={<HelpCircle size={18}/>} label="Ajuda" />
+    </nav>
+
+    {/* User Activity Feed */}
+    <div className="mt-auto pt-6 border-t border-slate-200">
+      <h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 px-2 tracking-widest">Atividade Recente</h4>
+      <div className="space-y-3 px-2">
+        <ActivityItem user="James Wilson" action="atualizou 'Mercado'" />
+        <ActivityItem user="Sarah Johnson" action="criou 'Startups'" />
+      </div>
+    </div>
+  </aside>
+  );
+};
+
+
+
+
+// Componentes Auxiliares para Limpeza de Código
+const NavItem = ({ icon, label, active = false }: { icon: any, label: string, active?: boolean }) => (
+    <div className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all cursor-pointer ${
+      active ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-500 hover:bg-slate-100'
+    }`}>
+      {icon}
+      {label}
+    </div>
+  );
+  
+  const ActivityItem = ({ user, action }: { user: string, action: string }) => (
+    <div className="flex gap-2">
+      <div className="w-6 h-6 bg-slate-200 rounded-full shrink-0" />
+      <p className="text-[10px] leading-tight text-slate-600">
+        <span className="font-bold block text-slate-900">{user}</span> {action}
+      </p>
+    </div>
+  );
+