setup MUI

pagevamp · Jan 16, 2024 · 6855513 · 6855513
1 parent f3a835a
commit 6855513
Show file tree

Hide file tree

Showing 4 changed files with 572 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -18,12 +18,19 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.15.4",
+    "@mui/material-nextjs": "^5.15.3",
     "@prisma/client": "^5.7.1",
     "@vercel/postgres": "^0.5.1",
     "next": "14.0.4",
     "prisma": "^5.7.1",
     "react": "^18",
     "react-dom": "^18"
+
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,18 +1,80 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
+import * as React from 'react';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import HomeIcon from '@mui/icons-material/Home';
+import StarIcon from '@mui/icons-material/Star';
+import ChecklistIcon from '@mui/icons-material/Checklist';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SupportIcon from '@mui/icons-material/Support';
+import LogoutIcon from '@mui/icons-material/Logout';
+import theme from '@/theme';
 
-const inter = Inter({ subsets: ['latin'] });
+import Grid from '@mui/material/Unstable_Grid2';
+import CssBaseline from '@mui/material/CssBaseline';
+import Drawer from '@mui/material/Drawer';
 
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+export const metadata = {
+  title: 'Next.js App Router + Material UI v5',
+  description: 'Next.js App Router + Material UI v5',
 };
 
+const DRAWER_WIDTH = 240;
+
+const teams = [
+  { id: 1, name: 'Planetaria', href: '#', initial: 'P', current: false },
+  { id: 2, name: 'Protocol', href: '#', initial: 'P', current: false },
+  { id: 3, name: 'Tailwind Labs', href: '#', initial: 'T', current: false },
+];
+const statuses = {
+  offline: 'text-gray-500 bg-gray-100/10',
+  online: 'text-green-400 bg-green-400/10',
+  error: 'text-rose-400 bg-rose-400/10',
+};
+const environments = {
+  Preview: 'text-gray-400 bg-gray-400/10 ring-gray-400/20',
+  Production: 'text-indigo-400 bg-indigo-400/10 ring-indigo-400/30',
+};
+const deployments = [
+  {
+    id: 1,
+    href: '#',
+    projectName: 'ios-app',
+    teamName: 'Planetaria',
+    status: 'offline',
+    statusText: 'Initiated 1m 32s ago',
+    description: 'Deploys from GitHub',
+    environment: 'Preview',
+  },
+  // More deployments...
+];
+const activityItems = [
+  {
+    user: {
+      name: 'Michael Foster',
+      imageUrl:
+        'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+    },
+    projectName: 'ios-app',
+    commit: '2d89f0c8',
+    branch: 'main',
+    date: '1h',
+    dateTime: '2023-01-23T11:00',
+  },
+  // More items...
+];
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className="h-full">
+      <body className="h-full">
+        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+          <ThemeProvider theme={theme}>
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+            <div>{children}</div>
+          </ThemeProvider>
+        </AppRouterCacheProvider>
+      </body>
     </html>
   );
 }
diff --git a/src/theme.ts b/src/theme.ts
@@ -0,0 +1,34 @@
+'use client';
+import { Roboto } from 'next/font/google';
+import { createTheme } from '@mui/material/styles';
+
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    background: {
+      default: '#fff',
+    },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
+  components: {
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.severity === 'info' && {
+            backgroundColor: '#60a5fa',
+          }),
+        }),
+      },
+    },
+  },
+});
+
+export default theme;