pageの作成

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>
+ );
+}

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>
+ );
+}

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="📕"