verification warning for non-verified users

src/app/(main)/_components/header.tsx

@@ -8,7 +8,7 @@ export const Header = async () => {
   const { user } = await validateRequest();
 
   return (
-    <header className="sticky top-0 border-b bg-background/80 p-0">
+    <header className="sticky top-0 z-10 border-b bg-background/80 p-0">
       <div className="container flex items-center gap-2 px-2 py-2 lg:px-4">
         <Link className="flex items-center justify-center text-xl font-medium" href="/">
           <RocketIcon className="mr-2 h-5 w-5" /> {APP_TITLE} Dashboard

src/app/(main)/dashboard/_components/verificiation-warning.tsx

@@ -0,0 +1,28 @@
+import { ExclamationTriangleIcon } from "@/components/icons";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { validateRequest } from "@/lib/auth/validate-request";
+import Link from "next/link";
+
+export async function VerificiationWarning() {
+  const { user } = await validateRequest();
+
+  return user?.emailVerified === false ? (
+    <Alert className="rounded-lg bg-yellow-50 text-yellow-700 dark:bg-gray-800 dark:text-yellow-400">
+      <ExclamationTriangleIcon className="h-5 w-5 !text-yellow-700 dark:!text-yellow-400" />
+      <div className="flex lg:items-center">
+        <div className="w-full">
+          <AlertTitle>Account verification required</AlertTitle>
+          <AlertDescription>
+            A verification email has been sent to your email address. Please verify your account to
+            access all features.
+          </AlertDescription>
+        </div>
+        <Button size="sm" asChild>
+          <Link href="/verify-email">Verify Email</Link>
+        </Button>
+      </div>
+    </Alert>
+  ) : null;
+}

src/app/(main)/dashboard/billing/page.tsx

@@ -25,26 +25,21 @@ export default async function BillingPage() {
     redirect("/signin");
   }
 
-  const stripePromises = Promise.all([
-    api.stripe.getPlans.query(),
-    api.stripe.getPlan.query(),
-  ]);
+  const stripePromises = Promise.all([api.stripe.getPlans.query(), api.stripe.getPlan.query()]);
 
   return (
-    <div className="grid gap-8 py-10 md:py-8">
-      <div className="mb-6">
+    <div className="grid gap-8">
+      <div>
         <h1 className="text-3xl font-bold md:text-4xl">Billing</h1>
-        <p className="text-sm text-muted-foreground">
-          Manage your billing and subscription
-        </p>
+        <p className="text-sm text-muted-foreground">Manage your billing and subscription</p>
       </div>
       <section>
         <Alert className="p-6 [&>svg]:left-6 [&>svg]:top-6 [&>svg~*]:pl-10">
           <ExclamationTriangleIcon className="h-6 w-6" />
           <AlertTitle>This is a demo app.</AlertTitle>
           <AlertDescription>
-            {APP_TITLE} app is a demo app using a Stripe test environment. You
-            can find a list of test card numbers on the{" "}
+            {APP_TITLE} app is a demo app using a Stripe test environment. You can find a list of
+            test card numbers on the{" "}
             <a
               href="https://stripe.com/docs/testing#cards"
               target="_blank"

src/app/(main)/dashboard/layout.tsx

@@ -1,14 +1,20 @@
 import { DashboardNav } from "./_components/dashboard-nav";
+import { VerificiationWarning } from "./_components/verificiation-warning";
 
 interface Props {
   children: React.ReactNode;
 }
 
 export default function DashboardLayout({ children }: Props) {
   return (
-    <div className="container flex min-h-[calc(100vh-180px)] flex-col gap-6 px-2 pt-6 md:flex-row md:px-4 lg:gap-10">
-      <DashboardNav className="flex flex-shrink-0 gap-2 md:w-48 md:flex-col lg:w-80" />
-      <main className="w-full">{children}</main>
+    <div className="container min-h-[calc(100vh-180px)] px-2 pt-6 md:px-4">
+      <div className="flex flex-col gap-6 md:flex-row lg:gap-10">
+        <DashboardNav className="flex flex-shrink-0 gap-2 md:w-48 md:flex-col lg:w-80" />
+        <main className="w-full space-y-4">
+          <VerificiationWarning />
+          <div>{children}</div>
+        </main>
+      </div>
     </div>
   );
 }

src/app/(main)/dashboard/page.tsx

@@ -39,7 +39,7 @@ export default async function DashboardPage({ searchParams }: Props) {
   const promises = Promise.all([api.post.myPosts.query({ page }), api.stripe.getPlan.query()]);
 
   return (
-    <div className="py-10 md:py-8">
+    <div>
       <div className="mb-6">
         <h1 className="text-3xl font-bold md:text-4xl">Posts</h1>
         <p className="text-sm text-muted-foreground">Manage your posts here</p>

src/app/(main)/dashboard/settings/page.tsx

@@ -18,12 +18,10 @@ export default async function BillingPage() {
   }
 
   return (
-    <div className="grid gap-8 py-10 md:py-8">
-      <div className="mb-4">
+    <div className="grid gap-8">
+      <div>
         <h1 className="text-3xl font-bold md:text-4xl">Settings</h1>
-        <p className="text-sm text-muted-foreground">
-          Manage your account settings
-        </p>
+        <p className="text-sm text-muted-foreground">Manage your account settings</p>
       </div>
       <p>Work in progress...</p>
     </div>