More progress

Author: cte

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

@@ -16,12 +16,12 @@ export default function DashboardLayout({
   return (
     <>
       <div className="shadow-md">
-        <div className="mx-auto flex max-w-screen-xl items-center justify-between px-3 py-4">
+        <div className="mx-auto flex max-w-screen-lg items-center justify-between px-4 py-4">
           <DashboardHeader />
         </div>
       </div>
       <div className="min-h-[calc(100vh-72px)] bg-muted">
-        <div className="mx-auto max-w-screen-xl px-3 pb-16 pt-6">
+        <div className="mx-auto max-w-screen-lg px-4 pb-16 pt-6">
           {children}
         </div>
       </div>

src/app/(authenticated)/dashboard/org/[[...organization-profile]]/OrgProfile.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { dark } from '@clerk/themes';
+import { OrganizationProfile } from '@clerk/nextjs';
+
+export const OrgProfile = () => {
+  const { resolvedTheme } = useTheme();
+  const baseTheme = resolvedTheme === 'dark' ? dark : undefined;
+
+  return (
+    <OrganizationProfile
+      appearance={{ baseTheme }}
+      routing="path"
+      path="/dashboard/org"
+      afterLeaveOrganizationUrl="/onboarding/select-org"
+    />
+  );
+};

src/app/(authenticated)/dashboard/org/[[...organization-profile]]/page.tsx

@@ -0,0 +1,5 @@
+import { OrgProfile } from './OrgProfile';
+
+export default function Page() {
+  return <OrgProfile />;
+}

src/app/(authenticated)/dashboard/organization-profile/[[...organization-profile]]/page.tsx

@@ -2,36 +2,10 @@ import { useTranslations } from 'next-intl';
 
 import { TitleBar } from '@/components/dashboard/TitleBar';
 
-const DashboardIndexPage = () => {
+export default function Page() {
   const t = useTranslations('DashboardIndex');
 
   return (
-    <>
-      <TitleBar
-        title={t('title_bar')}
-        description={t('title_bar_description')}
-      />
-      <div className="flex h-[600px] flex-col items-center justify-center rounded-md bg-card p-5">
-        <div className="size-16 rounded-full bg-muted p-3 [&_svg]:stroke-muted-foreground [&_svg]:stroke-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M0 0h24v24H0z" stroke="none" />
-            <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3M12 12l8-4.5M12 12v9M12 12L4 7.5" />
-          </svg>
-        </div>
-        <div className="mt-3 text-center">
-          <div className="text-xl font-semibold">
-            {t('message_state_title')}
-          </div>
-        </div>
-      </div>
-    </>
+    <TitleBar title={t('title_bar')} description={t('title_bar_description')} />
   );
-};
-
-export default DashboardIndexPage;
+}

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

@@ -0,0 +1,18 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { dark } from '@clerk/themes';
+import { UserProfile as ClerkUserProfile } from '@clerk/nextjs';
+
+export const UserProfile = () => {
+  const { resolvedTheme } = useTheme();
+  const baseTheme = resolvedTheme === 'dark' ? dark : undefined;
+
+  return (
+    <ClerkUserProfile
+      appearance={{ baseTheme }}
+      routing="path"
+      path="/dashboard/user"
+    />
+  );
+};

src/app/(authenticated)/dashboard/user-profile/[[...user-profile]]/page.tsx

@@ -0,0 +1,5 @@
+import { UserProfile } from './UserProfile';
+
+export default function Page() {
+  return <UserProfile />;
+}

src/app/(authenticated)/dashboard/user/[[...user-profile]]/UserProfile.tsx

@@ -1,7 +1,7 @@
 import { redirect } from 'next/navigation';
 import { auth as clerkAuth } from '@clerk/nextjs/server';
 
-export default async function CenteredLayout({
+export default async function AuthenticatedLayout({
   children,
 }: {
   children: React.ReactNode;

src/app/(authenticated)/dashboard/user/[[...user-profile]]/page.tsx

@@ -6,7 +6,7 @@ import { getLocale } from 'next-intl/server';
 import { enUS, frFR } from '@clerk/localizations';
 import { ClerkProvider } from '@clerk/nextjs';
 
-import { ThemeProvider } from '@/components/ThemeProvider';
+import { ThemeProvider } from '@/components/layout/ThemeProvider';
 
 export const metadata: Metadata = {
   icons: [