create dashboard group (#1562)

* refactor: move files into dashboard group * chore: remove horizonal padding from routes * feat: add error and not found page, provided by nextjs example
guildxyz · Nov 25, 2024 · 27136f8 · 27136f8
1 parent fe568d4
commit 27136f8
Show file tree

Hide file tree

Showing 20 changed files with 81 additions and 17 deletions.
diff --git a/src/app/[guild]/page.tsx → src/app/(dashboard)/[guild]/page.tsx b/src/app/[guild]/page.tsx → src/app/(dashboard)/[guild]/page.tsx
diff --git a/...te-guild/components/CreateGuildButton.tsx → ...te-guild/components/CreateGuildButton.tsx b/...te-guild/components/CreateGuildButton.tsx → ...te-guild/components/CreateGuildButton.tsx
diff --git a/...eate-guild/components/CreateGuildForm.tsx → ...eate-guild/components/CreateGuildForm.tsx b/...eate-guild/components/CreateGuildForm.tsx → ...eate-guild/components/CreateGuildForm.tsx
diff --git a/...ld/components/CreateGuildFormProvider.tsx → ...ld/components/CreateGuildFormProvider.tsx b/...ld/components/CreateGuildFormProvider.tsx → ...ld/components/CreateGuildFormProvider.tsx
diff --git a/src/app/create-guild/page.tsx → src/app/(dashboard)/create-guild/page.tsx b/src/app/create-guild/page.tsx → src/app/(dashboard)/create-guild/page.tsx
@@ -12,7 +12,7 @@ export const metadata = {
 };
 
 const CreateGuild = () => (
-  <main className="container mx-auto grid max-w-lg gap-8 px-4 py-16">
+  <main className="container mx-auto grid max-w-lg gap-8 py-16">
     <div
       className="-z-10 absolute inset-0 opacity-40 dark:opacity-60"
       style={{

diff --git a/src/app/explorer/atoms.ts → src/app/(dashboard)/explorer/atoms.ts b/src/app/explorer/atoms.ts → src/app/(dashboard)/explorer/atoms.ts
diff --git a/...p/explorer/components/CreateGuildLink.tsx → ...)/explorer/components/CreateGuildLink.tsx b/...p/explorer/components/CreateGuildLink.tsx → ...)/explorer/components/CreateGuildLink.tsx
diff --git a/src/app/explorer/components/GuildCard.tsx → ...hboard)/explorer/components/GuildCard.tsx b/src/app/explorer/components/GuildCard.tsx → ...hboard)/explorer/components/GuildCard.tsx
diff --git a/.../explorer/components/HeaderBackground.tsx → .../explorer/components/HeaderBackground.tsx b/.../explorer/components/HeaderBackground.tsx → .../explorer/components/HeaderBackground.tsx
diff --git a/...lorer/components/InfiniteScrollGuilds.tsx → ...lorer/components/InfiniteScrollGuilds.tsx b/...lorer/components/InfiniteScrollGuilds.tsx → ...lorer/components/InfiniteScrollGuilds.tsx
diff --git a/src/app/explorer/components/StickyNavbar.tsx → ...ard)/explorer/components/StickyNavbar.tsx b/src/app/explorer/components/StickyNavbar.tsx → ...ard)/explorer/components/StickyNavbar.tsx
diff --git a/src/app/explorer/components/StickySearch.tsx → ...ard)/explorer/components/StickySearch.tsx b/src/app/explorer/components/StickySearch.tsx → ...ard)/explorer/components/StickySearch.tsx
diff --git a/src/app/explorer/constants.ts → src/app/(dashboard)/explorer/constants.ts b/src/app/explorer/constants.ts → src/app/(dashboard)/explorer/constants.ts
diff --git a/src/app/explorer/fetchers.ts → src/app/(dashboard)/explorer/fetchers.ts b/src/app/explorer/fetchers.ts → src/app/(dashboard)/explorer/fetchers.ts
diff --git a/src/app/explorer/page.tsx → src/app/(dashboard)/explorer/page.tsx b/src/app/explorer/page.tsx → src/app/(dashboard)/explorer/page.tsx
@@ -37,7 +37,7 @@ export default async function Explorer() {
 
   return (
     <>
-      <main className="container mx-auto grid max-w-screen-lg gap-4 px-4 py-8">
+      <main className="container grid gap-4 py-16">
         <section className="pt-6 pb-8">
           <h1
             className="font-black font-display text-5xl tracking-tight"

diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
@@ -1,19 +1,14 @@
+import { DashboardContainer } from "@/components/DashboardContainer";
+import { Header } from "@/components/Header";
 import type { PropsWithChildren } from "react";
 
 const Dashboard = ({ children }: PropsWithChildren) => {
-  return <>{children}</>;
-  //<Layout>
-  //  <LayoutHero className="pb-28">
-  //    <Header />
-  //    <LayoutHeadline className="max-w-screen-md">
-  //      <LayoutTitle className="text-foreground">Privacy Policy</LayoutTitle>
-  //    </LayoutHeadline>
-  //  </LayoutHero>
-  //
-  //  <LayoutMain className="prose flex max-w-screen-md flex-col prose-headings:font-display prose-headings:text-foreground prose-li:text-foreground text-foreground marker:text-foreground">
-  //    {children}
-  //  </LayoutMain>
-  //</Layout>
+  return (
+    <>
+      <Header />
+      <DashboardContainer>{children}</DashboardContainer>
+    </>
+  );
 };
 
 export default Dashboard;
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect } from "react";
+
+const ErrorBoundary = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h1>Something went wrong!</h1>
+      <button
+        type="button"
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+};
+
+export default ErrorBoundary;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
-import { Header } from "@/components/Header";
 import { PreloadResources } from "@/components/PreloadResources";
 import { Providers } from "@/components/Providers";
 import { SignInDialog } from "@/components/SignInDialog";
@@ -28,7 +27,6 @@ const RootLayout = ({
       <body className={cn(dystopian.variable)}>
         <PreloadResources />
         <Providers>
-          <Header />
           {children}
 
           {/* TODO: maybe load this dynamically? */}

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div>
+      <h1>Not Found</h1>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  );
+}
diff --git a/src/components/DashboardContainer.tsx b/src/components/DashboardContainer.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/cssUtils";
+import { Slot } from "@radix-ui/react-slot";
+import type { HTMLAttributes } from "react";
+
+interface DashboardContainerProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+export const DashboardContainer = ({
+  children,
+  className,
+  asChild = false,
+  ...props
+}: DashboardContainerProps) => {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      className={cn(
+        "mx-auto w-full max-w-screen-lg px-4 sm:px-8 md:px-10",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};