From 088ae09216adc92ccc2e34be88334bde7f142c7d Mon Sep 17 00:00:00 2001
From: Koki Sakano <kosakanoki@gmail.com>
Date: Wed, 12 Jul 2023 11:18:17 +0900
Subject: [PATCH] =?UTF-8?q?page=E3=81=AE=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/converter/layout.tsx | 18 ++++++++++++++++++
 src/app/converter/page.tsx   | 21 +++++++++++++++++++++
 src/app/page.tsx             |  6 ++++++
 3 files changed, 45 insertions(+)
 create mode 100644 src/app/converter/layout.tsx
 create mode 100644 src/app/converter/page.tsx

diff --git a/src/app/converter/layout.tsx b/src/app/converter/layout.tsx
new file mode 100644
index 00000000..65362a9c
--- /dev/null
+++ b/src/app/converter/layout.tsx
@@ -0,0 +1,18 @@
+export const metadata = {
+  title: 'Converter',
+  description:
+    '数値の基数の変換やカラーコードの変換など、便利な変換処理を提供します。',
+};
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-2xl font-bold">Converter</h2>
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/converter/page.tsx b/src/app/converter/page.tsx
new file mode 100644
index 00000000..ac61ed50
--- /dev/null
+++ b/src/app/converter/page.tsx
@@ -0,0 +1,21 @@
+import { BaseConverter } from './components/base-converter';
+import { ColorConverter } from './components/color-converter';
+
+export default function Page() {
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <h3 className="text-l font-medium">進数</h3>
+        <div className="rounded-md bg-white p-4 shadow-md">
+          <BaseConverter />
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <h3 className="text-l font-medium">カラーコード</h3>
+        <div className="rounded-md bg-white p-4 shadow-md">
+          <ColorConverter />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bc1b9c3b..7a742baa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,12 @@ export default function Home() {
         title="Characters"
         description="テキストエリアに入力した文字数をカウントする機能など、文字に対する操作についての機能を提供するサービスです。"
       />
+      <AppCard
+        link="/converter"
+        emotion="🔢"
+        title="Converter"
+        description="入力した数値の進数変換など、いくつかの変換処理を提供します。"
+      />
       <AppCard
         link="/blog"
         emotion="📕"