feat: Add not-found page, tailwind-incator

app/(blog)/article/[slug]/page.tsx

@@ -1,19 +1,19 @@
 // import Head from "next/head";
 import Link from "next/link";
 import { Fragment } from "react";
-import Text from "@/app/ui/text";
+// import Text from "@/app/ui/text";
 import { Metadata, ResolvingMetadata } from "next";
 
-// import styles from "@/app/ui/post.module.css";
-
-import { renderBlock } from "@/app/ui/notion/render";
+import { renderBlock } from "@/app/notion/render";
 import { QueryDatabase, getPageFromSlug, getBlocks } from "@/app/api/notion";
 import Shell from "@/components/shells/shell";
 import React from "react";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import { formatDate } from "@/lib/utils";
+import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components/page-header";
+import { Separator } from "@/components/ui/separator";
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
 export const revalidate =
@@ -60,33 +60,13 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <Shell as="article">
-      <div className="space-y-2">
-        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
-          {page.last_edited_time && (
-            <time dateTime={page.last_edited_time}>
-              {formatDate(page.last_edited_time)}
-            </time>
-          )}
-          {/* {page.last_edited_time ? <div>•</div> : null} */}
-          {/* <div>{post.readingTime}min</div> */}
-        </div>
-        <h1 className="inline-block text-4xl font-bold leading-tight lg:text-5xl">
-          {title}
-          {/* <Text title={page.properties.Title?.title} /> */}
-        </h1>
-      </div>
-
-      {/* <Separator className="mb-2.5" /> */}
-      {/* <section className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"> */}
-      {/* <React.Suspense
-          fallback={Array.from({ length: 4 }).map((_, i) => (
-            <PostCardSkeleton key={i} />
-          ))}
-        > */}
-      {/* <div> */}
-      {/* <article className={styles.container}> */}
+      <PageHeader>
+        <PageHeaderDescription variant="sm">{formatDate(page.last_edited_time)}</PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        </PageHeader>
+      <Separator className="mb-2.5" />
 
-      <section>
+      <section className="">
         {blocks.map((block: any) => (
           <Fragment key={block.id}>{renderBlock(block)}</Fragment>
         ))}

app/(lobby)/layout.tsx

@@ -13,15 +13,9 @@ export default async function LobyLayout({
   }: {
     children: React.ReactNode
   }) {
-//   const user = await currentUser()
-
   return (
     <div className="relative flex min-h-screen flex-col">
-      <SiteHeader />
-      <main className="flex-1">
         {children}
-      </main>
-      <SiteFooter />
     </div>
   )
 }

app/(lobby)/page.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 import { QueryDatabase } from '@/app/api/notion';
 import '@/app/styles/globals.css'
-import Text  from '../ui/text';
+import Text  from '../notion/text';
 import Shell from '@/components/shells/shell';
 import { PageHeader, PageHeaderHeading, PageHeaderDescription } from '@/components/page-header';
 import { Separator } from '@/components/ui/separator';

app/layout.tsx

@@ -6,6 +6,9 @@ import { cn } from "@/lib/utils"
 // const inter = Inter({ subsets: ['latin'] })
 import { fontMono, fontSans } from "@/lib/fonts"
 import { ThemeProvider } from '@/components/providers'
+import TailwindIndicator from '@/components/helpers/tailwind-indicator'
+import { SiteHeader } from '@/components/layouts/site-header'
+import { SiteFooter } from '@/components/layouts/site-footer'
 
 // use tempated metadata
 export const metadata: Metadata = {
@@ -37,13 +40,18 @@ export default function RootLayout({
           fontMono.variable
         )}
       >
+        <TailwindIndicator />
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
-        >
-          {children}
+        >      
+          <SiteHeader />
+            <main>
+              {children}
+            </main>
+          <SiteFooter />
           {/* <TailwindIndicator />
           <Analytics /> */}
         </ThemeProvider>

app/not-found.tsx

@@ -0,0 +1,40 @@
+import Shell from "@/components/shells/shell";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+const NotFound = async () => {
+  return (
+    <>
+      <Shell className="md:py-24">
+        <section className="text-center my-4">
+          <p className="text-[6rem] font-semibold">
+            404
+          </p>
+
+          <h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
+            Page not found
+          </h1>
+
+          <p className="mt-6 text-base leading-7">
+            Sorry, we couldn’t find the page you’re looking for.
+          </p>
+
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Link
+                href="/"
+                className={cn(
+                buttonVariants({className: "mx-auto mt-4 w-fit" })
+                )}
+            > Go back home </Link>
+            {/* <a href="#" className="text-sm font-semibold text-gray-900">
+              Contact support <span aria-hidden="true">&rarr;</span>
+            </a> */}
+          </div>
+        </section>
+      </Shell>
+    </>
+  );
+};
+
+export default NotFound;

app/ui/post.module.css → app/notion/post.module.css

@@ -23,7 +23,20 @@
   .container figcaption {
     opacity: 0.6;
   } */
-
+/*   
+  h1{
+    font-size: 64px;
+    font-weight:700;
+  }
+  h2{
+    font-size: 48px;
+    font-weight:700
+  }
+ h3{
+    font-size: 32px;
+    font-weight:700
+  } */
+
   .name {
     font-size: 36px;
   }

app/ui/notion/render.tsx → app/notion/render.tsx

@@ -1,8 +1,8 @@
 import { Fragment } from 'react';
 import Link from 'next/link';
 
-import Text from '../text';
-import styles from '../post.module.css';
+import Text from './text';
+import styles from './post.module.css';
 
 export function renderBlock(block: any) {
   const { type, id } = block;

components/helpers/tailwind-indicator.tsx

@@ -0,0 +1,21 @@
+import { env } from "@/env.mjs"
+
+const TailwindIndicator = () => {
+    if (env.NODE_ENV === "development") {
+      return (
+        <div className="fixed left-0 top-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
+          <span className="block sm:hidden">all</span>
+          <span className="hidden sm:block md:hidden">sm</span>
+          <span className="hidden md:block lg:hidden">md</span>
+          <span className="hidden lg:block xl:hidden">lg</span>
+          <span className="hidden xl:block 2xl:hidden">xl</span>
+          <span className="hidden 2xl:block">2xl</span>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  export default TailwindIndicator;
+

components/layouts/mobile-nav.tsx

@@ -75,35 +75,51 @@ export function MobileNav({ mainNavItems, sidebarNavItems }: MobileNavProps) {
               className="w-full"
             >
               {navItems?.map((item, index) => (
-                <AccordionItem value={item.title} key={index}>
-                  <AccordionTrigger className="text-sm capitalize">
-                    {item.title}
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <div className="flex flex-col space-y-2">
-                      {item.items?.map((subItem, index) =>
-                        subItem.href ? (
-                          <MobileLink
-                            key={index}
-                            href={String(subItem.href)}
-                            segment={String(segment)}
-                            setIsOpen={setIsOpen}
-                            disabled={subItem.disabled}
-                          >
-                            {subItem.title}
-                          </MobileLink>
-                        ) : (
-                          <div
-                            key={index}
-                            className="text-foreground/70 transition-colors"
-                          >
-                            {item.title}
-                          </div>
-                        )
-                      )}
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
+                item.items && (item.items?.length > 0) ? (
+                  <AccordionItem value={item.title} key={index}>
+                    <AccordionTrigger className="text-sm capitalize">
+                      {item.title}
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <div className="flex flex-col space-y-2">
+                        {item.items?.map((subItem, index) =>
+                          subItem.href ? (
+                            <MobileLink
+                              key={index}
+                              href={String(subItem.href)}
+                              segment={String(segment)}
+                              setIsOpen={setIsOpen}
+                              disabled={subItem.disabled}
+                            >
+                              {subItem.title}
+                            </MobileLink>
+                          ) : (
+                            <div
+                              key={index}
+                              className="text-foreground/70 transition-colors"
+                            >
+                              {item.title}
+                            </div>
+                          )
+                        )}
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                ) : (
+                  item.href && (
+                    <AccordionItem key={index} value={item.title}>
+                      <Link href={item.href} legacyBehavior passHref>
+                        {/* <MobileLink
+                          className={cn(navigationMenuTriggerStyle(), "h-auto")}
+                        > */}
+                        <div className="flex flex-col space-y-2 py-4 font-medium transition-all hover:underline">
+                          {item.title}
+                        </div>
+                        {/* </MobileLink> */}
+                      </Link>
+                    </AccordionItem>
+                  )
+                )
               ))}
             </Accordion>
           </div>

components/layouts/site-header.tsx

@@ -5,16 +5,17 @@ import { MainNav } from "@/components/layouts/main-nav";
 import { siteConfig } from "@/config/site";
 import { dashboardConfig } from "@/config/dashboard";
 
+// TODO: sticky can be canceled
 export function SiteHeader() {
   return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background">
-      <div className="container flex h-16 items-center">
+    <header className="sticky top-0 z-40 w-full border-b bg-background">
+      <nav className="container flex h-16 items-center">
         <MainNav items={siteConfig.mainNav} />
         <MobileNav
           mainNavItems={siteConfig.mainNav}
           sidebarNavItems={dashboardConfig.sidebarNav}
         />
-      </div>
+      </nav>
     </header>
   )
 }