hermes-web/components/navigation/settings.tsx

import Link from "next/link";
import { Button } from "../ui/button";
import UserProfile from "./userprofile";
import AdminProfile from "./adminprofile";
import RoleGate from "../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]">
        <div className="gap-5">
          <UserProfile />
          <RoleGate roles={["ADMIN"]}>
            <AdminProfile />
          </RoleGate>
        </div>
      </div>

      <div className="flex h-full z-20 inset-y-1/3 w-full">
        <ul className="rounded-lg shadow-md pl-[25px] flex flex-col w-full justify-between text-center align-center">
          <li className="text-xs text-gray-400">
            Settings
          </li>
          <li className="">
            <Link href={"/settings/connections"}>
              <Button variant="ghost" className="w-full text-lg">
                Connections
              </Button>
            </Link>
          </li>

          <li className="text-xs text-gray-400">
            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-400">
            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;