feat: add unauthorized state

src/app/(authenticated)/(dashboard)/[publicId]/settings/api/page.tsx

@@ -1,4 +1,5 @@
 import EmptyState from "@/components/common/empty-state";
+import { UnAuthorizedState } from "@/components/ui/un-authorized-state";
 import { serverAccessControl } from "@/lib/rbac/access-control";
 import { api } from "@/trpc/server";
 import { RiTerminalBoxFill } from "@remixicon/react";
@@ -16,14 +17,7 @@ const ApiSettingsPage = async () => {
   const data = await allow(api.apiKey.listAll.query(), ["api-keys", "read"]);
 
   if (!data) {
-    return (
-      <EmptyState
-        bordered={false}
-        icon={<RiTerminalBoxFill />}
-        title="Un Authorized"
-        subtitle=""
-      />
-    );
+    return <UnAuthorizedState />;
   }
 
   return (

src/components/common/empty-state.tsx

@@ -11,7 +11,7 @@
 
 import { cn } from "@/lib/utils";
 
-type EmptyStateProps = {
+export type EmptyStateProps = {
   title?: string;
   bordered?: boolean;
   subtitle: string | React.ReactNode;
@@ -27,7 +27,7 @@ const EmptyState = ({
   children,
 }: EmptyStateProps) => {
   return (
-    <section className="overflow-hidden">
+    <div role="alert" className="overflow-hidden">
       <div className="container mx-auto px-4">
         <div
           className={cn(
@@ -46,7 +46,7 @@ const EmptyState = ({
           </div>
         </div>
       </div>
-    </section>
+    </div>
   );
 };
 

src/components/ui/un-authorized-state.tsx

@@ -0,0 +1,14 @@
+import { RiProhibitedLine } from "@remixicon/react";
+import EmptyState, { type EmptyStateProps } from "../common/empty-state";
+
+export function UnAuthorizedState(props: Partial<EmptyStateProps>) {
+  return (
+    <EmptyState
+      bordered={false}
+      icon={<RiProhibitedLine />}
+      title="Un Authorized"
+      subtitle="you don't have access to view this content."
+      {...props}
+    />
+  );
+}