Use container component in vite app

brijeshb42 · Jun 17, 2024 · f775c42 · f775c42
1 parent 3600587
commit f775c42
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 93 deletions.
diff --git a/apps/pigment-css-vite-app/src/pages/index.tsx b/apps/pigment-css-vite-app/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Stack from '@pigment-css/react/Stack';
+import Container from '@pigment-css/react/Container';
 import { styled, css } from '@pigment-css/react';
 
 type StackProps = React.ComponentProps<typeof Stack>;
@@ -66,99 +67,101 @@ export default function InteractiveStack() {
 `;
 
   return (
-    <Stack sx={{ flexGrow: 1 }}>
-      <Stack direction="row" justifyContent="space-between">
-        <fieldset>
-          <legend>Direction</legend>
-          {['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="direction"
-                value={item}
-                checked={item === direction}
-                onChange={handleChange}
-              />
-            </label>
+    <Container maxWidth="md">
+      <Stack sx={{ flexGrow: 1 }}>
+        <Stack direction="row" justifyContent="space-between">
+          <fieldset>
+            <legend>Direction</legend>
+            {['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
+              <label key={item} className={labelClass}>
+                {item}
+                <input
+                  type="radio"
+                  name="direction"
+                  value={item}
+                  checked={item === direction}
+                  onChange={handleChange}
+                />
+              </label>
+            ))}
+          </fieldset>
+          <fieldset sx={{ mt: 1 }}>
+            <legend>justifyContent</legend>
+            {[
+              'flex-start',
+              'center',
+              'flex-end',
+              'space-between',
+              'space-around',
+              'space-evenly',
+            ].map((item) => (
+              <label key={item} className={labelClass}>
+                {item}
+                <input
+                  type="radio"
+                  name="justify-content"
+                  value={item}
+                  checked={item === justifyContent}
+                  onChange={handleChange}
+                />
+              </label>
+            ))}
+          </fieldset>
+        </Stack>
+        <Stack direction="row" justifyContent="space-between">
+          <fieldset sx={{ mt: 1 }}>
+            <legend>alignItems</legend>
+            {[
+              'flex-start',
+              'center',
+              'flex-end',
+              'stretch',
+              'baseline',
+              'space-between',
+              'space-around',
+              'space-evenly',
+            ].map((item) => (
+              <label key={item} className={labelClass}>
+                {item}
+                <input
+                  type="radio"
+                  name="align-items"
+                  value={item}
+                  checked={item === alignItems}
+                  onChange={handleChange}
+                />
+              </label>
+            ))}
+          </fieldset>
+          <fieldset sx={{ mt: 1 }}>
+            <legend>Spacing</legend>
+            {[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
+              <label key={item} className={labelClass}>
+                {item}
+                <input
+                  type="radio"
+                  name="spacing"
+                  value={item}
+                  checked={item === spacing}
+                  onChange={handleChange}
+                />
+              </label>
+            ))}
+          </fieldset>
+        </Stack>
+        <Stack
+          direction={direction}
+          justifyContent={justifyContent}
+          alignItems={alignItems}
+          spacing={spacing}
+          sx={{ height: 240, width: '100%' }}
+        >
+          {[0, 1, 2].map((value) => (
+            <Card key={value}>{`Item ${value + 1}`}</Card>
           ))}
-        </fieldset>
-        <fieldset sx={{ mt: 1 }}>
-          <legend>justifyContent</legend>
-          {[
-            'flex-start',
-            'center',
-            'flex-end',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="justify-content"
-                value={item}
-                checked={item === justifyContent}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
-      </Stack>
-      <Stack direction="row" justifyContent="space-between">
-        <fieldset sx={{ mt: 1 }}>
-          <legend>alignItems</legend>
-          {[
-            'flex-start',
-            'center',
-            'flex-end',
-            'stretch',
-            'baseline',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="align-items"
-                value={item}
-                checked={item === alignItems}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
-        <fieldset sx={{ mt: 1 }}>
-          <legend>Spacing</legend>
-          {[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="spacing"
-                value={item}
-                checked={item === spacing}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
-      </Stack>
-      <Stack
-        direction={direction}
-        justifyContent={justifyContent}
-        alignItems={alignItems}
-        spacing={spacing}
-        sx={{ height: 240, width: '100%' }}
-      >
-        {[0, 1, 2].map((value) => (
-          <Card key={value}>{`Item ${value + 1}`}</Card>
-        ))}
+        </Stack>
+        <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
       </Stack>
-      <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
-    </Stack>
+    </Container>
   );
 }
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material';
 
 const theme = extendTheme({
   getSelector: function getSelector(colorScheme, css) {