add the rest of demos

siriwatknp · Feb 21, 2024 · b6f3ed3 · b6f3ed3
1 parent 1f8e0ea
commit b6f3ed3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/apps/zero-runtime-next-app/package.json b/apps/zero-runtime-next-app/package.json
@@ -13,7 +13,9 @@
     "@mui/utils": "file:../../packages/mui-utils/build",
     "@mui/zero-runtime": "file:../../packages/zero-runtime",
     "@mui/material": "file:../../packages/mui-material/build",
+    "@mui/material-nextjs": "workspace:^",
     "@mui/icons-material": "file:../../packages/mui-icons-material/build",
+    "@emotion/cache": "latest",
     "local-ui-lib": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/zero-runtime-next-app/src/app/alert/page.tsx b/apps/zero-runtime-next-app/src/app/alert/page.tsx
@@ -1,10 +1,16 @@
 import { styled } from '@mui/zero-runtime';
 import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts';
+import ColorAlerts from '../../../../../docs/data/material/components/alert/ColorAlerts';
+import DescriptionAlerts from '../../../../../docs/data/material/components/alert/DescriptionAlerts';
+import FilledAlerts from '../../../../../docs/data/material/components/alert/FilledAlerts';
+import IconAlerts from '../../../../../docs/data/material/components/alert/IconAlerts';
+import OutlinedAlerts from '../../../../../docs/data/material/components/alert/OutlinedAlerts';
+import SimpleAlert from '../../../../../docs/data/material/components/alert/SimpleAlert';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  gap: '16px',
+  gap: '32px',
   marginInline: 'auto',
   maxWidth: '900px',
   paddingBlock: '16px',
@@ -19,9 +25,21 @@ const Main = styled('div')(({ theme }) => ({
 export default function MaterialUILayout() {
   return (
     <Main>
-      <h1>Material-UI</h1>
-      <p>This is an example app using Material-UI.</p>
+      <h1>Alert</h1>
+      <h2>Basic</h2>
       <BasicAlerts />
+      <h2>Color</h2>
+      <ColorAlerts />
+      <h2>Description</h2>
+      <DescriptionAlerts />
+      <h2>Filled</h2>
+      <FilledAlerts />
+      <h2>Icon</h2>
+      <IconAlerts />
+      <h2>Outlined</h2>
+      <OutlinedAlerts />
+      <h2>Simple</h2>
+      <SimpleAlert />
     </Main>
   );
 }
diff --git a/apps/zero-runtime-next-app/src/app/layout.tsx b/apps/zero-runtime-next-app/src/app/layout.tsx
@@ -1,5 +1,8 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme';
 import '@mui/zero-runtime/styles.css';
 
 import './globals.css';
@@ -14,7 +17,11 @@ export const metadata: Metadata = {
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{props.children}</body>
+      <body className={inter.className}>
+        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+          <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+        </AppRouterCacheProvider>
+      </body>
     </html>
   );
 }
diff --git a/apps/zero-runtime-next-app/src/app/theme.ts b/apps/zero-runtime-next-app/src/app/theme.ts
@@ -0,0 +1,12 @@
+'use client';
+import { createTheme } from '@mui/material/styles';
+
+export default createTheme({
+  components: {
+    MuiStack: {
+      defaultProps: {
+        useFlexGap: true,
+      },
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml