買い物かごの中身を出力するコンテナを作成しよう：その１

s-yoshiii · Sep 12, 2022 · a1721c2 · a1721c2
1 parent c8048e1
commit a1721c2
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import CartContainer from "./components/CartContainer";
 import Navbar from "./components/Navbar";
 
 function App() {
@@ -7,7 +8,7 @@ function App() {
   return (
     <div className="App">
       <Navbar />
-      Shopping Cart
+      <CartContainer />
     </div>
   );
 }

diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx
@@ -0,0 +1,23 @@
+import { Box, Container, Typography } from "@mui/material";
+import React from "react";
+import { useAppSelector } from "../store";
+
+const CartContainer = () => {
+  const { amount } = useAppSelector((store) => store.cart);
+  if (amount < 1) {
+    return (
+      <Container>
+        <Box sx={{ my: 14 }}>
+          <Typography variant="h2" gutterBottom>
+            Cart
+          </Typography>
+          <Typography variant="h6" gutterBottom>
+            何も入っていません。
+          </Typography>
+        </Box>
+      </Container>
+    );
+  }
+};
+
+export default CartContainer;