Add resources layout

src/app/configuration/resources/[resourceId]/account/page.tsx

@@ -0,0 +1,18 @@
+import { Separator } from "@/components/ui/separator"
+import { AccountForm } from "@/components/account-form"
+
+export default function SettingsAccountPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Account</h3>
+        <p className="text-sm text-muted-foreground">
+          Update your account settings. Set your preferred language and
+          timezone.
+        </p>
+      </div>
+      <Separator />
+      <AccountForm />
+    </div>
+  )
+}

src/app/configuration/resources/[resourceId]/appearance/page.tsx

@@ -0,0 +1,18 @@
+import { Separator } from "@/components/ui/separator"
+import { AppearanceForm } from "@/components/appearance-form"
+
+export default function SettingsAppearancePage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Appearance</h3>
+        <p className="text-sm text-muted-foreground">
+          Customize the appearance of the app. Automatically switch between day
+          and night themes.
+        </p>
+      </div>
+      <Separator />
+      <AppearanceForm />
+    </div>
+  )
+}

src/app/configuration/resources/[resourceId]/display/page.tsx

@@ -0,0 +1,17 @@
+import { Separator } from "@/components/ui/separator"
+import { DisplayForm } from "@/components/display-form"
+
+export default function SettingsDisplayPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Display</h3>
+        <p className="text-sm text-muted-foreground">
+          Turn items on or off to control what&apos;s displayed in the app.
+        </p>
+      </div>
+      <Separator />
+      <DisplayForm />
+    </div>
+  )
+}

src/app/configuration/resources/[resourceId]/layout.tsx

@@ -0,0 +1,76 @@
+import { Metadata } from "next"
+import Image from "next/image"
+
+import { Separator } from "@/components/ui/separator"
+import { SidebarNav } from "@/components/sidebar-nav"
+
+export const metadata: Metadata = {
+    title: "Forms",
+    description: "Advanced form example using react-hook-form and Zod.",
+}
+
+const sidebarNavItems = [
+    {
+        title: "Profile",
+        href: "/configuration/resources/{resourceId}/",
+    },
+    {
+        title: "Account",
+        href: "/configuration/resources/{resourceId}/account",
+    },
+    {
+        title: "Appearance",
+        href: "/configuration/resources/{resourceId}/appearance",
+    },
+    {
+        title: "Notifications",
+        href: "/configuration/resources/{resourceId}/notifications",
+    },
+    {
+        title: "Display",
+        href: "/configuration/resources/{resourceId}/display",
+    },
+]
+
+interface SettingsLayoutProps {
+    children: React.ReactNode,
+    params: { resourceId: string }
+}
+
+export default function SettingsLayout({ children, params }: SettingsLayoutProps) {
+    return (
+        <>
+            <div className="md:hidden">
+                <Image
+                    src="/configuration/forms-light.png"
+                    width={1280}
+                    height={791}
+                    alt="Forms"
+                    className="block dark:hidden"
+                />
+                <Image
+                    src="/configuration/forms-dark.png"
+                    width={1280}
+                    height={791}
+                    alt="Forms"
+                    className="hidden dark:block"
+                />
+            </div>
+            <div className="hidden space-y-6 p-10 pb-16 md:block">
+                <div className="space-y-0.5">
+                    <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
+                    <p className="text-muted-foreground">
+                        Manage your account settings and set e-mail preferences.
+                    </p>
+                </div>
+                <Separator className="my-6" />
+                <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+                    <aside className="-mx-4 lg:w-1/5">
+                        <SidebarNav items={sidebarNavItems.map(i => { i.href = i.href.replace("{resourceId}", params.resourceId); return i})} />
+                    </aside>
+                    <div className="flex-1 lg:max-w-2xl">{children}</div>
+                </div>
+            </div>
+        </>
+    )
+}

src/app/configuration/resources/[resourceId]/notifications/page.tsx

@@ -0,0 +1,17 @@
+import { Separator } from "@/components/ui/separator"
+import { NotificationsForm } from "@/components/notifications-form"
+
+export default function SettingsNotificationsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Notifications</h3>
+        <p className="text-sm text-muted-foreground">
+          Configure how you receive notifications.
+        </p>
+      </div>
+      <Separator />
+      <NotificationsForm />
+    </div>
+  )
+}

src/app/configuration/resources/[resourceId]/page.tsx

@@ -0,0 +1,17 @@
+import { Separator } from "@/components/ui/separator"
+import { ProfileForm } from "@app/components/profile-form"
+
+export default function SettingsProfilePage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Profile</h3>
+        <p className="text-sm text-muted-foreground">
+          This is how others will see you on the site.
+        </p>
+      </div>
+      <Separator />
+      <ProfileForm />
+    </div>
+  )
+}

src/app/configuration/resources/page.tsx

@@ -0,0 +1,7 @@
+export default async function Page() {
+    return (
+        <>
+           <p>This is where the table goes...</p>
+        </>
+    );
+}