Implement Person Page (#4)

* Added Some * Added Tailwindcss + components, and introduced the first PersonDetailSelection * Adjusted parts of my code to be more consistent * For review * Fixed eslint and any type props * Replaced img to Image and fixed eslint * Fixed an Image issue * Improved the mobile view a lot * Adjusted some breakpoints and fixed a use client
sublinks · Dec 14, 2023 · 66a887a · 66a887a
1 parent 05c1b91
commit 66a887a
Show file tree

Hide file tree

Showing 12 changed files with 4,676 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
+    "@material-tailwind/react": "^2.1.5",
     "@uiw/react-md-editor": "^4.0.1",
     "classnames": "^2.3.2",
     "next": "14.0.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,8 @@ import cx from 'classnames';
 import Header from '@/components/header';
 import BottomNav from '@/components/bottom-nav';
 
+import { ThemeProvider } from '@/components/TailwindMaterial';
+
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -35,15 +37,18 @@ const RootLayout = ({
   children: React.ReactNode
 }) => (
   <html lang="en" className="h-full">
-    <body className={cx(inter.className, 'flex flex-col h-full bg-secondary dark:bg-secondary-dark max-md:pb-48')}>
-      <Header />
-      <BottomNav />
-      <main className="relative flex-grow bg-primary dark:bg-primary-dark w-full l:max-w-[1352px] xl:max-w-[1524px] m-auto md:pt-24">
-        <CurvedCorner left />
-        <CurvedCorner right />
-        {children}
-      </main>
-    </body>
+    <ThemeProvider>
+      <body className={cx(inter.className, 'flex flex-col h-full bg-secondary dark:bg-secondary-dark max-md:pb-48')}>
+        <Header />
+        <BottomNav />
+        <main className="relative flex-grow bg-primary dark:bg-primary-dark w-full l:max-w-[1352px] xl:max-w-[1524px] m-auto md:pt-24">
+          <CurvedCorner left />
+          <CurvedCorner right />
+          {children}
+        </main>
+      </body>
+    </ThemeProvider>
+
   </html>
 );