From 5cb7bad7b92ea994fd3b459a8c3d2fba31a485da Mon Sep 17 00:00:00 2001
From: takecchi <takecchi.kobayashi@gmail.com>
Date: Sun, 6 Aug 2023 01:28:04 +0900
Subject: [PATCH] =?UTF-8?q?=E6=A8=AA=E5=B9=85=E3=81=AE=E5=88=B6=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/Caption.tsx       |  9 +++++++++
 src/app/_components/WidthProvider.tsx | 26 ++++++++++++++++++++++++++
 src/app/page.tsx                      |  8 +++++++-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/app/_components/Caption.tsx
 create mode 100644 src/app/_components/WidthProvider.tsx

diff --git a/src/app/_components/Caption.tsx b/src/app/_components/Caption.tsx
new file mode 100644
index 0000000..23e5aca
--- /dev/null
+++ b/src/app/_components/Caption.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+import WidthProvider from '@/app/_components/WidthProvider';
+
+const Caption = () => {
+  return <WidthProvider>TEST</WidthProvider>;
+};
+
+export default Caption;
diff --git a/src/app/_components/WidthProvider.tsx b/src/app/_components/WidthProvider.tsx
new file mode 100644
index 0000000..b269054
--- /dev/null
+++ b/src/app/_components/WidthProvider.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { ReactNode } from 'react';
+import styled from '@mui/material/styles/styled';
+
+/**
+ * 横幅を制限する
+ * @constructor
+ */
+const WidthProvider = ({ children }: { children: ReactNode }) => {
+  return <StyledDiv>{children}</StyledDiv>;
+};
+
+const paddingSide = '20px';
+
+const StyledDiv = styled('div')`
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  width: ${({ theme }) =>
+    `calc(${theme.breakpoints.values.desktop}px + calc(2 * ${paddingSide}))`};
+  padding-left: ${paddingSide};
+  padding-right: ${paddingSide};
+`;
+
+export default WidthProvider;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f4e7b5a..a728319 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,9 @@
+import Caption from '@/app/_components/Caption';
+
 export default function Home() {
-  return <main>Home</main>;
+  return (
+    <main>
+      <Caption />
+    </main>
+  );
 }