tvone/app/components/layout/admin/sidebar.tsx

import { getUserProfile } from "@/src/lib/auth/get-user-profile";
import { redirect } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { AdminSidebarNav } from "./admin-sidebar-nav";

export const AdminSideBar = async () => {
  const user = await getUserProfile();

  if (!user) {
    redirect("/login");
  }

  return (
    <aside className="w-64 backdrop-blur-xl bg-white/80 p-6 flex flex-col">
      <div className="flex items-center gap-2 mb-10 px-2">
        <Link href="/admin/dashboard" className="flex items-center gap-2 group">
          <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold italic  group-hover:ring-blue-200 transition-shadow">
            <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>
        </Link>
      </div>

      <AdminSidebarNav />

      <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>
  );
};

function ActivityItem({ user, action }: { user: string; action: string }) {
  return (
    <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>
  );
}