create layout

package.json

@@ -14,6 +14,7 @@
     "@daohaus/moloch-v3-data": "^0.5.0",
     "@daohaus/moloch-v3-hooks": "^0.5.0",
     "@daohaus/utils": "^0.5.0",
+    "next-themes": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",

src/App.tsx

@@ -1,11 +1,28 @@
-import { Routes } from './Routes';
+import { Link } from "react-router-dom";
+import { Routes } from "./Routes";
+import "./index.css";
+import { ThemeProvider } from "./components/theme-provider";
+import { ModeToggle } from "./components/ModeToggle";
 
 export const App = () => {
-
   return (
-    <>
-      <Routes  />
-    </>
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <div
+        className={`antialiased min-h-screen bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-50 `}
+      >
+        <div className="max-w-2xl mx-auto py-10 px-4">
+          <header>
+            <div className="flex items-center justify-between">
+              <ModeToggle />
+              <nav className="ml-auto text-sm font-medium space-x-6">
+                <Link to="/">Home</Link>
+                <Link to="/about">About</Link>
+              </nav>
+            </div>
+          </header>
+          <Routes />
+        </div>
+      </div>
+    </ThemeProvider>
   );
 };
-

src/Routes.tsx

@@ -1,24 +1,20 @@
-import {
-  Routes as Router,
-  Route,
-} from "react-router-dom";
+import { Routes as Router, Route } from "react-router-dom";
 
 import { HomeContainer } from "./components/layout/HomeContainer";
 import Home from "./pages/Home";
 import Blog from "./pages/Blog";
 import BlogDetail from "./pages/BlogDetail";
 
-
 export const Routes = () => {
-
   return (
     <Router>
       <Route path="/" element={<HomeContainer />}>
         <Route path="/" element={<Home />} />
-        <Route path="/blog/:chainId/:daoId" element={<Blog/>} />
-        <Route path="/content/:chainId/:daoId/:contentId" element={<BlogDetail/>} />
-
-
+        <Route path="/blog/:chainId/:daoId" element={<Blog />} />
+        <Route
+          path="/content/:chainId/:daoId/:contentId"
+          element={<BlogDetail />}
+        />
       </Route>
     </Router>
   );

src/components/ModeToggle.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from "next-themes";
+
+export function ModeToggle() {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="border rounded-md w-6 h-6 flex items-center justify-center"
+    >
+      <span className="sr-only">Toggle mode</span>
+      {theme !== "dark" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-4 h-4"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-4 h-4"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

src/components/layout/HomeContainer.tsx

@@ -12,11 +12,8 @@ import { Outlet } from "react-router-dom";
 
 export const HomeContainer = () => {
   return (
-    // <BlogContainerLayout>
-    <div className="flex flex-col items-start justify-center mt-8 max-w-xl">
+    <div className="flex flex-col items-start justify-center mt-8 max-w-3xl">
       <Outlet />
     </div>
-
-    // </BlogContainerLayout>
   );
 };

src/components/theme-provider.tsx

@@ -0,0 +1,6 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/index.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -69,4 +69,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+} */

src/pages/Home.tsx

@@ -3,9 +3,7 @@ function Home() {
 
   return (
     <>
-      <h1 className="text-3xl font-bold underline text-red-500">
-        Hello world!
-      </h1>
+      <h1 className="text-2xl">Welcome to DIN Blog</h1>
     </>
   );
 }

tailwind.config.js

@@ -4,5 +4,6 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  darkMode: ["class"],
+  // plugins: ["@tailwindcss/typography"],
 };

yarn.lock

@@ -4111,6 +4111,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-themes@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.3.0.tgz#b4d2a866137a67d42564b07f3a3e720e2ff3871a"
+  integrity sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==
+
 node-addon-api@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-2.0.2.tgz#432cfa82962ce494b132e9d72a15b29f71ff5d32"