Custom protected routes?

const Admin = () => {
  const { data: sessionData } = useSession();

  const { data: isAdmin, isLoading: isAdminLoading } =
    api.user.isAdmin.useQuery(
      {
        userId: sessionData?.user?.id as string,
      },
      {
        enabled: sessionData?.user !== undefined,
      }
    );

  if (!isAdmin)
    return (
      <div>
        <H1>You are not authorized to view this page</H1>
      </div>
    );

  return <div>Admin</div>;
};

export default Admin;

  isAdmin: publicProcedure
    .input(
      z.object({
        userId: z.string(),
      })
    )
    .query(async ({ ctx, input }): Promise<boolean> => {
      return await ctx.prisma.user
        .findUnique({
          where: {
            id: input.userId,
          },
        })
        .then((user) => {
          if (user?.role === "ADMIN") return true;
          return false;
        });
    }),