From f66b643d460480a98fa67c83d76373dd8adc9dc8 Mon Sep 17 00:00:00 2001
From: Kyle Dickey <k@kyle.so>
Date: Wed, 31 Jul 2024 04:08:15 -0600
Subject: [PATCH 1/2] feat: add welcome name

---
 src/app/(dashboard)/app/page.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/app/page.tsx b/src/app/(dashboard)/app/page.tsx
index 04a45731..9ec6d335 100644
--- a/src/app/(dashboard)/app/page.tsx
+++ b/src/app/(dashboard)/app/page.tsx
@@ -1,9 +1,23 @@
+'use client';
+
+import { useUser } from '@clerk/nextjs';
+
 export default function DashboardHome() {
+  const { user } = useUser();
+
   return (
     <div className="flex flex-1">
       <div className="flex-1">
         <div className="space-y-3">
-          <h1 className="text-4xl font-semibold">Good afternoon, Ahmed!</h1>
+          <h1 className="text-4xl font-semibold">
+            Good afternoon,{' '}
+            {user?.firstName
+              ? user.firstName
+              : user?.emailAddresses[0]?.emailAddress
+                  .split('@')[0]
+                  ?.split('.')[0]}
+            !
+          </h1>
           <p className="max-w-prose text-balance text-sm leading-6 text-foreground-muted">
             “The final wisdom of life requires not the annulment of incongruity
             but the achievement of serenity within and above it.” - Reinhold

From ab149420ab6fdb451ed52385cf18d5fae073503c Mon Sep 17 00:00:00 2001
From: Kyle Dickey <k@kyle.so>
Date: Fri, 2 Aug 2024 09:41:44 -0600
Subject: [PATCH 2/2] refactor: move welcome msg to comp

---
 .../app/_components/welcome-message.tsx       | 24 +++++++++++++++++++
 src/app/(dashboard)/app/page.tsx              | 23 ++----------------
 2 files changed, 26 insertions(+), 21 deletions(-)
 create mode 100644 src/app/(dashboard)/app/_components/welcome-message.tsx

diff --git a/src/app/(dashboard)/app/_components/welcome-message.tsx b/src/app/(dashboard)/app/_components/welcome-message.tsx
new file mode 100644
index 00000000..d23008ae
--- /dev/null
+++ b/src/app/(dashboard)/app/_components/welcome-message.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { useUser } from '@clerk/nextjs';
+
+export function WelcomeMessage() {
+  const { user } = useUser();
+
+  if (user === null || user === undefined) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      <h1 className="text-4xl font-semibold">
+        Good afternoon,{' '}
+        {user.firstName ?? user.emailAddresses[0]?.emailAddress.split('@')[0]}!
+      </h1>
+      <p className="max-w-prose text-balance text-sm leading-6 text-foreground-muted">
+        “The final wisdom of life requires not the annulment of incongruity but
+        the achievement of serenity within and above it.” - Reinhold Niebuhr
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/app/page.tsx b/src/app/(dashboard)/app/page.tsx
index 9ec6d335..20adafe6 100644
--- a/src/app/(dashboard)/app/page.tsx
+++ b/src/app/(dashboard)/app/page.tsx
@@ -1,29 +1,10 @@
-'use client';
-
-import { useUser } from '@clerk/nextjs';
+import { WelcomeMessage } from './_components/welcome-message';
 
 export default function DashboardHome() {
-  const { user } = useUser();
-
   return (
     <div className="flex flex-1">
       <div className="flex-1">
-        <div className="space-y-3">
-          <h1 className="text-4xl font-semibold">
-            Good afternoon,{' '}
-            {user?.firstName
-              ? user.firstName
-              : user?.emailAddresses[0]?.emailAddress
-                  .split('@')[0]
-                  ?.split('.')[0]}
-            !
-          </h1>
-          <p className="max-w-prose text-balance text-sm leading-6 text-foreground-muted">
-            “The final wisdom of life requires not the annulment of incongruity
-            but the achievement of serenity within and above it.” - Reinhold
-            Niebuhr
-          </p>
-        </div>
+        <WelcomeMessage />
         <div>More content</div>
       </div>
       <div className="min-w-[280px] rounded-lg border p-4">Right side</div>