lesson 11 solution

React-in-Thai · Aug 30, 2024 · 0495ce3 · 0495ce3
1 parent 26c30ab
commit 0495ce3
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 80 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,89 +9,92 @@ import Typography from "@mui/material/Typography";
 import Link from "@mui/material/Link";
 import Divider from "@mui/material/Divider";
 import SvgIcon from "@mui/material/SvgIcon";
+import AppTheme from "./AppTheme";
 
 function App() {
   return (
-    <Box
-      sx={{
-        padding: "2rem",
-        maxWidth: "400px",
-        margin: "auto",
-        marginTop: "10vh",
-        border: "1px solid #eee",
-        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.08)",
-        borderRadius: "4px",
-      }}
-    >
-      <Stack spacing={2}>
-        <CssBaseline /> {/* Reset CSS */}
-        <Typography variant="h1" sx={{ fontSize: "2rem", fontWeight: 500 }}>
-          Sign in
-        </Typography>
-        <TextField
-          label="Email"
-          id="email"
-          type="email"
-          name="email"
-          placeholder="your@email.com"
-          autoComplete="email"
-          autoFocus
-          required
-          fullWidth
-          variant="outlined"
-        />
-        <TextField
-          label="Password"
-          name="password"
-          placeholder="••••••"
-          type="password"
-          id="password"
-          autoComplete="current-password"
-          required
-          fullWidth
-          variant="outlined"
-        />
-        <FormControlLabel
-          control={<Checkbox value="remember" color="primary" />}
-          label="Remember me"
-          sx={{
-            marginLeft: "-12px",
-            "& .MuiFormControlLabel-label": { userSelect: "none" },
-          }}
-        />
-        <Button type="submit" variant="contained">
-          Sign in
-        </Button>
-        <Typography
-          component="div"
-          variant="body2"
-          sx={{ textAlign: "center" }}
-        >
-          Don&apos;t have an account?{" "}
-          <span>
-            <Link href="#" variant="body2">
-              Sign up
-            </Link>
-          </span>
-        </Typography>
-        <Divider sx={{ fontSize: "0.785rem" }}>or</Divider>
-        <Button
-          startIcon={<GoogleIcon />}
-          variant="outlined"
-          fullWidth
-          sx={{
-            "& .MuiSvgIcon-root": {
-              fontSize: "1rem",
-            },
-          }}
-        >
-          Sign in with Google
-        </Button>
-        <Button startIcon={<FacebookIcon />} variant="outlined" fullWidth>
-          Sign in with Facebook
-        </Button>
-      </Stack>
-    </Box>
+    <AppTheme>
+      <Box
+        sx={{
+          padding: "2rem",
+          maxWidth: "400px",
+          margin: "auto",
+          marginTop: "10vh",
+          border: "1px solid #eee",
+          boxShadow: "0 2px 10px rgba(0, 0, 0, 0.08)",
+          borderRadius: "4px",
+        }}
+      >
+        <Stack spacing={2}>
+          <CssBaseline /> {/* Reset CSS */}
+          <Typography variant="h1" sx={{ fontSize: "2rem", fontWeight: 500 }}>
+            Sign in
+          </Typography>
+          <TextField
+            label="Email"
+            id="email"
+            type="email"
+            name="email"
+            placeholder="your@email.com"
+            autoComplete="email"
+            autoFocus
+            required
+            fullWidth
+            variant="outlined"
+          />
+          <TextField
+            label="Password"
+            name="password"
+            placeholder="••••••"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+            required
+            fullWidth
+            variant="outlined"
+          />
+          <FormControlLabel
+            control={<Checkbox value="remember" color="primary" />}
+            label="Remember me"
+            sx={{
+              marginLeft: "-12px",
+              "& .MuiFormControlLabel-label": { userSelect: "none" },
+            }}
+          />
+          <Button type="submit" variant="contained">
+            Sign in
+          </Button>
+          <Typography
+            component="div"
+            variant="body2"
+            sx={{ textAlign: "center" }}
+          >
+            Don&apos;t have an account?{" "}
+            <span>
+              <Link href="#" variant="body2">
+                Sign up
+              </Link>
+            </span>
+          </Typography>
+          <Divider sx={{ fontSize: "0.785rem" }}>or</Divider>
+          <Button
+            startIcon={<GoogleIcon />}
+            variant="outlined"
+            fullWidth
+            sx={{
+              "& .MuiSvgIcon-root": {
+                fontSize: "1rem",
+              },
+            }}
+          >
+            Sign in with Google
+          </Button>
+          <Button startIcon={<FacebookIcon />} variant="outlined" fullWidth>
+            Sign in with Facebook
+          </Button>
+        </Stack>
+      </Box>
+    </AppTheme>
   );
 }
 

diff --git a/src/AppTheme.tsx b/src/AppTheme.tsx
@@ -0,0 +1,14 @@
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import React from "react";
+
+const theme = createTheme({
+  palette: {
+    background: {
+      default: "#f5f5f5",
+    },
+  },
+});
+
+export default function AppTheme({ children }: React.PropsWithChildren) {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}