hermes-web/components/navigation/settings.tsx

import Link from "next/link";
import { Button } from "@/components/ui/button";
import UserProfile from "./userprofile";
import AdminProfile from "./adminprofile";
import RoleGate from "@/components/auth/role-gate";

const SettingsNavigation = async () => {
  return ( 
    <div>
      <div className="text-4xl flex pl-[15px] pb-[33px]">Hermes</div>

      <div className="w-full pl-[30px] pr-[30px] pb-[50px]">
        <UserProfile />
        <RoleGate roles={["ADMIN"]}>
          <AdminProfile />
        </RoleGate>
      </div>

      <div className="flex flex-grow h-full w-full">
        <ul className="rounded-lg shadow-md flex flex-col w-full justify-between text-center align-center">
          <li className="text-xs text-gray-200">
            Settings
          </li>
          <li>
            <Link href={"/settings/connections"} className="m-0 p-0 gap-0">
              <Button variant="ghost" className="w-full text-lg">
                Connections
              </Button>
            </Link>
          </li>

          <li className="text-xs text-gray-200">
            Text to Speech
          </li>
          <li className="">
            <Link href={"/settings/tts/voices"}>
              <Button variant="ghost" className="w-full text-lg">
                Voices
              </Button>
            </Link>
          </li>
          <li className="">
            <Link href={"/settings/tts/filters"}>
              <Button variant="ghost" className="w-full text-lg">
                Filters
              </Button>
            </Link>
          </li>

          <li className="text-xs text-gray-200">
            API
          </li>
          <li className="">
            <Link href={"/settings/api/keys"}>
              <Button variant="ghost" className="w-full text-lg">
                Keys
              </Button>
            </Link>
          </li>
        </ul>
      </div>
    </div>
   );
}
 
export default SettingsNavigation;