機能一覧ページ追加

Author: su-u

src/app/home/FeatureCard.tsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { Card } from 'antd';
+import Link from 'next/link';
+import React, { FC } from 'react';
+import { FeatureItemType } from '@/components/common/Features';
+
+type CardProps = FeatureItemType;
+export const FeatureCard: FC<CardProps> = ({ title, path, description }) => {
+  return (
+    <Link href={path} style={{ textDecoration: 'none' }}>
+      <StyleCard style={{ width: 200 }} title={title}>
+        {description}
+      </StyleCard>
+    </Link>
+  );
+};
+
+const StyleCard = styled(Card)`
+  transition: 0.2s;
+
+  .ant-card-head {
+    min-height: 38px;
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  .ant-card-body {
+    height: 120px;
+  }
+
+  &:hover {
+    box-shadow:
+      0 6px 16px -8px #00000014,
+      0 9px 28px #0000000d,
+      0 12px 48px 16px #00000008;
+    transform: scale(1.02);
+  }
+`;

src/app/home/Home.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { Flex } from 'antd';
+import React, { FC } from 'react';
+import { AppLayout } from '@/Layout/App';
+import { FeatureCard } from '@/app/home/FeatureCard';
+import { features } from '@/components/common/Features';
+
+export const HomePage: FC = () => {
+  const list = features.map(({ items }) => [...items]).flat();
+  console.log(list);
+
+  return (
+    <AppLayout>
+      <Flex style={{ margin: 8 }} wrap="wrap" gap="small">
+        {list.map((feature) => (
+          <FeatureCard key={feature.key} {...feature} />
+        ))}
+      </Flex>
+    </AppLayout>
+  );
+};

src/app/page.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
-import { AppLayout } from '@/Layout/App';
+import { HomePage } from '@/app/home/Home';
 
 export const metadata = {
   title: 'Dev Toolkit',
 };
 const indexPage: FC = () => {
-  return <AppLayout />;
+  return <HomePage />;
 };
 
 export default indexPage;

src/components/common/Features.tsx

@@ -3,11 +3,13 @@ import GrowthIcon from '@rsuite/icons/Growth';
 import ListOl from '@rsuite/icons/legacy/ListOl';
 import React from 'react';
 
-type FeatureItemType = {
+export type FeatureItemType = {
   key: string;
   title: string;
+  shortTitle?: string;
   path: string;
   icon?: string;
+  description?: React.ReactNode;
 };
 
 type FeatureGroupType = {
@@ -25,18 +27,24 @@ export const features: FeatureGroupType[] = [
     items: [
       {
         key: 'punycode',
-        title: 'Punycode',
+        title: 'Punycodeエンコード',
+        shortTitle: 'Punycode',
         path: '/punycode',
+        description: '文字列をpunycodeエンコードします',
       },
       {
         key: 'base64',
-        title: 'Base64',
+        title: 'Base64エンコード',
+        shortTitle: 'Base64',
         path: '/base64',
+        description: '文字列をBase64エンコードします',
       },
       {
         key: 'urlencode',
-        title: 'URL',
+        title: 'URLエンコード',
+        shortTitle: 'URL',
         path: '/urlencode',
+        description: '文字列をURLエンコードします',
       },
     ],
   },
@@ -49,6 +57,7 @@ export const features: FeatureGroupType[] = [
         key: 'character_count',
         title: '文字数カウント',
         path: '/character_count',
+        description: '文字数や行数をカウントします',
       },
       {
         key: 'character_replace',
@@ -81,11 +90,13 @@ export const features: FeatureGroupType[] = [
         key: 'date_converter',
         title: '日時の変換',
         path: '/date_converter',
+        description: '日付のフォーマットを変換します',
       },
       {
         key: 'date_diff',
         title: '日数計算',
         path: '/date_diff',
+        description: '2つの時間から差分の時間を計算します',
       },
     ],
   },
@@ -98,6 +109,7 @@ export const features: FeatureGroupType[] = [
         key: 'hash',
         title: 'Hash',
         path: '/hash',
+        description: '文字列からハッシュを生成します',
       },
       // {
       //   key: 'dummy',
@@ -108,11 +120,13 @@ export const features: FeatureGroupType[] = [
         key: 'uuid',
         title: 'UUID',
         path: '/uuid',
+        description: '複数のUUIDを生成します',
       },
       {
         key: 'image_generator',
         title: '画像生成',
         path: '/image_generator',
+        description: 'ダミー用の画像を生成します',
       },
     ],
   },

src/components/common/SideNavBar.tsx

@@ -39,7 +39,7 @@ export const SideNavBar: FC = () => {
                       href={item.path}
                       expanded={expanded}
                     >
-                      {item.title}
+                      {item.shortTitle || item.title}
                     </NavItem>
                   ))}
                 </Nav.Menu>