feat: add site footer

app/(lobby)/layout.tsx

@@ -0,0 +1,27 @@
+// import { currentUser } from "@clerk/nextjs"
+
+import { SiteFooter } from "@/components/layouts/site-footer"
+import { SiteHeader } from "@/components/layouts/site-header"
+
+// interface LobyLayoutProps
+//   extends React.PropsWithChildren<{
+//     modal: React.ReactNode
+//   }> {}
+
+export default async function LobyLayout({
+    children,
+  }: {
+    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/page.tsx → app/(lobby)/page.tsx

@@ -1,8 +1,8 @@
 // import Image from 'next/image'
 import Link from 'next/link';
 import { getDatabase } from '@/app/lib/notion';
-import './globals.css'
-import Text  from './ui/text';
+import '@/app/styles/globals.css'
+import Text  from '../ui/text';
 
 // export default function Home() {
 //   return (

app/article/[slug]/layout.tsx

@@ -1,3 +1,6 @@
+import { SiteFooter } from "@/components/layouts/site-footer"
+import { SiteHeader } from "@/components/layouts/site-header"
+
 export default function ArticleLayout({
     children, // will be a page or nested layout
   }: {
@@ -9,8 +12,11 @@ export default function ArticleLayout({
         {/* <seciton className="w-full flex-none md:w-64">
           <SideNav />
         </seciton> */}
-
-      <div className="grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+        <SiteHeader />
+          <main className="grow p-6 md:overflow-y-auto md:p-12">
+            {children}
+          </main>
+        <SiteFooter />
       </div>
     )
   }

app/config/site.ts

@@ -0,0 +1,172 @@
+import type { FooterItem, MainNavItem } from "@/types"
+
+// import { productCategories } from "@/config/products"
+// import { slugify } from "@/lib/utils"
+
+export type SiteConfig = typeof siteConfig
+
+const links = {
+  twitter: "https://twitter.com/gelco",
+  github: "https://github.com/alex-guoba",
+  githubAccount: "https://github.com/alex-guoba",
+//   discord: "https://discord.com/gelco",
+//   calDotCom: "https://cal.com/gelco",
+}
+
+export const siteConfig = {
+  name: "Utopian",
+  description:
+    "An open source blog build with everything new in Next.js.",
+  url: "https://skateshop.sadmn.com",
+  ogImage: "https://skateshop.sadmn.com/opengraph-image.png",
+  links,
+  mainNav: [
+    {
+      title: "Utopian",
+      items: [
+        {
+          title: "Products",
+          href: "/products",
+          description: "All the products we have to offer.",
+          items: [],
+        },
+        {
+          title: "Build a Board",
+          href: "/build-a-board",
+          description: "Build your own custom skateboard.",
+          items: [],
+        },
+        {
+          title: "Blog",
+          href: "/blog",
+          description: "Read our latest blog posts.",
+          items: [],
+        },
+      ],
+    },
+    // ...productCategories.map((category) => ({
+    //   title: category.title,
+    //   items: [
+    //     {
+    //       title: "All",
+    //       href: `/categories/${slugify(category.title)}`,
+    //       description: `All ${category.title}.`,
+    //       items: [],
+    //     },
+    //     ...category.subcategories.map((subcategory) => ({
+    //       title: subcategory.title,
+    //       href: `/categories/${slugify(category.title)}/${subcategory.slug}`,
+    //       description: subcategory.description,
+    //       items: [],
+    //     })),
+    //   ],
+    // })),
+  ] satisfies MainNavItem[],
+  footerNav: [
+    {
+      title: "Credits",
+      items: [
+        {
+          title: "OneStopShop",
+          href: "https://onestopshop.jackblatch.com",
+          external: true,
+        },
+        {
+          title: "Acme Corp",
+          href: "https://acme-corp.jumr.dev",
+          external: true,
+        },
+        {
+          title: "craft.mxkaske.dev",
+          href: "https://craft.mxkaske.dev",
+          external: true,
+        },
+        {
+          title: "Taxonomy",
+          href: "https://tx.shadcn.com/",
+          external: true,
+        },
+        {
+          title: "shadcn/ui",
+          href: "https://ui.shadcn.com",
+          external: true,
+        },
+      ],
+    },
+    {
+      title: "Help",
+      items: [
+        {
+          title: "About",
+          href: "/pages/about",
+          external: false,
+        },
+        {
+          title: "Contact",
+          href: "/pages/Contact",
+          external: false,
+        },
+        {
+          title: "Terms",
+          href: "/pages/terms",
+          external: false,
+        },
+        {
+          title: "Privacy",
+          href: "/pages/privacy",
+          external: false,
+        },
+      ],
+    },
+    {
+      title: "Social",
+      items: [
+        {
+          title: "Twitter",
+          href: links.twitter,
+          external: true,
+        },
+        {
+          title: "GitHub",
+          href: links.githubAccount,
+          external: true,
+        },
+        {
+          title: "Discord",
+          href: links.discord,
+          external: true,
+        },
+        {
+          title: "cal.com",
+          href: links.calDotCom,
+          external: true,
+        },
+      ],
+    },
+    {
+      title: "Lofi",
+      items: [
+        {
+          title: "beats to study to",
+          href: "https://www.youtube.com/watch?v=jfKfPfyJRdk",
+          external: true,
+        },
+        {
+          title: "beats to chill to",
+          href: "https://www.youtube.com/watch?v=rUxyKA_-grg",
+          external: true,
+        },
+        {
+          title: "a fresh start",
+          href: "https://www.youtube.com/watch?v=rwionZbOryo",
+          external: true,
+        },
+        {
+          title: "coffee to go",
+          href: "https://www.youtube.com/watch?v=2gliGzb2_1I",
+          external: true,
+        },
+      ],
+    },
+  ] satisfies FooterItem[],
+}

app/layout.tsx

@@ -1,27 +1,52 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata, Viewport } from 'next'
+// import { Inter } from 'next/font/google'
+import '@/app/styles/globals.css'
+import { cn } from "@/lib/utils"
 
-const inter = Inter({ subsets: ['latin'] })
+// const inter = Inter({ subsets: ['latin'] })
+import { fontMono, fontSans } from "@/lib/fonts"
+import { ThemeProvider } from '@/components/providers'
 
 // use tempated metadata
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 }
 
+export const viewport: Viewport = {
+  colorScheme: "dark light",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
+}
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={`${inter.className} bg-gray-50 text-gray-950`}>
-        <div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] dark:bg-[#946263]"></div>
-        <div className="bg-[#dbd7fb] absolute top-[-1rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem] dark:bg-[#676394]"></div>
-
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      {/* <body className={`${inter.className} min-h-screen bg-background antialiased`}> */}
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable,
+          fontMono.variable
+        )}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          {/* <TailwindIndicator />
+          <Analytics /> */}
+        </ThemeProvider>
       </body>
     </html>
   )