Merge pull request #40 from ReoHakase/39/add-suggestion-links

提案リンクと説明文をトップページに追加した
ReoHakase · May 26, 2024 · 381ead4 · 381ead4
2 parents ee30fcb + 418a811
commit 381ead4
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 2 deletions.
diff --git a/apps/web/src/app/[statLabel]/page.tsx b/apps/web/src/app/[statLabel]/page.tsx
@@ -47,6 +47,7 @@ const GraphPage = async ({ params, searchParams }: GraphPageProps): Promise<Reac
           fontFamily: 'heading',
           fontWeight: 'bold',
           fontSize: '2xl',
+          lineClamp: 3,
           md: {
             fontSize: '4xl',
           },

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -54,6 +54,9 @@ const RootLayout: FC<RootLayoutProps> = ({ children }) => (
               flexDir: 'column',
               p: '6',
               flexGrow: '3',
+              lgDown: {
+                h: '550px', // CLS対策
+              },
             })}
           >
             {children}

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,4 +1,6 @@
+import { Building2, ArrowRight, HomeIcon, MapPin } from 'lucide-react';
 import type { ReactNode } from 'react';
+import { Link } from '@/components/Link/Link';
 import { css } from 'styled-system/css';
 
 const Home = (): ReactNode => {
@@ -9,11 +11,197 @@ const Home = (): ReactNode => {
         display: 'flex',
         flexGrow: 1,
         flexDir: 'column',
-        justifyContent: 'start',
+        justifyContent: 'center',
+        gap: '8',
         alignItems: 'center',
+        lg: {
+          minH: '80svh',
+        },
       })}
     >
-      <h1>Simple RESAS App</h1>
+      <p
+        className={css({
+          fontSize: 'lg',
+        })}
+      >
+        <Link href="https://resas.go.jp/#/13/13101" external referrerPolicy="no-referrer">
+          RESAS(地域経済分析システム)
+        </Link>
+        に掲載されている各種人口データを、都道府県別にグラフで比較できます。
+      </p>
+      <nav
+        className={css({
+          pos: 'relative',
+          zIndex: '5',
+          w: 'full',
+          maxW: '600px',
+          display: 'flex',
+          flexDir: 'column',
+          justifyContent: 'start',
+          alignItems: 'stretch',
+          gap: '4',
+        })}
+      >
+        <Link
+          href="/all?prefCodes=13,23,27,40"
+          className={css({
+            px: '6',
+            py: '4',
+            gap: '2',
+            display: 'flex',
+            flexDir: 'column',
+            bg: 'keyplate.a.1',
+            border: '1px solid',
+            borderColor: 'keyplate.6',
+            rounded: '3xl',
+            transition: 'background-color 0.2s',
+            _hover: {
+              bg: 'keyplate.a.3',
+            },
+          })}
+        >
+          <span
+            className={css({
+              display: 'flex',
+              gap: '2',
+              flexDir: 'row',
+              alignItems: 'center',
+              fontWeight: 'bold',
+            })}
+          >
+            <Building2
+              className={css({
+                color: 'amber.11',
+              })}
+            />
+            四大都市圏の総人口はどのくらい？
+          </span>
+          <span
+            className={css({
+              display: 'flex',
+              gap: '2',
+              flexDir: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              color: 'keyplate.11',
+            })}
+          >
+            東京都、愛知県、大阪府、福岡県の総人口
+            <ArrowRight />
+          </span>
+        </Link>
+        <Link
+          href="/young?prefCodes=8,12,13"
+          className={css({
+            px: '6',
+            py: '4',
+            gap: '2',
+            display: 'flex',
+            flexDir: 'column',
+            bg: 'keyplate.a.1',
+            border: '1px solid',
+            borderColor: 'keyplate.6',
+            rounded: '3xl',
+            transition: 'background-color 0.2s',
+            _hover: {
+              bg: 'keyplate.a.3',
+            },
+          })}
+        >
+          <span
+            className={css({
+              display: 'flex',
+              gap: '2',
+              flexDir: 'row',
+              alignItems: 'center',
+              fontWeight: 'bold',
+            })}
+          >
+            <HomeIcon
+              className={css({
+                color: 'green.11',
+              })}
+            />
+            都市部と近郊の子供の数の違いは？
+          </span>
+          <span
+            className={css({
+              display: 'flex',
+              gap: '2',
+              flexDir: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              color: 'keyplate.11',
+            })}
+          >
+            東京都、茨城県、千葉県の年少人口
+            <ArrowRight />
+          </span>
+        </Link>
+        <Link
+          href="/all?prefCodes=1,47"
+          className={css({
+            px: '6',
+            py: '4',
+            gap: '2',
+            display: 'flex',
+            flexDir: 'column',
+            bg: 'keyplate.a.1',
+            border: '1px solid',
+            borderColor: 'keyplate.6',
+            rounded: '3xl',
+            transition: 'background-color 0.2s',
+            _hover: {
+              bg: 'keyplate.a.3',
+            },
+          })}
+        >
+          <span
+            className={css({
+              display: 'flex',
+              gap: '2',
+              flexDir: 'row',
+              alignItems: 'center',
+              fontWeight: 'bold',
+            })}
+          >
+            <MapPin
+              className={css({
+                color: 'crimson.11',
+              })}
+            />
+            北と南で総人口が多いのは？
+          </span>
+          <span
+            className={css({
+              display: 'flex',
+              gap: '2',
+              flexDir: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              color: 'keyplate.11',
+            })}
+          >
+            北海道、沖縄県の総人口
+            <ArrowRight />
+          </span>
+        </Link>
+      </nav>
+      <small
+        className={css({
+          fontSize: 'sm',
+          color: 'keyplate.11',
+        })}
+      >
+        <Link external href="https://www.yumemi.co.jp/" referrerPolicy="no-referrer">
+          株式会社ゆめみ
+        </Link>
+        のフロントエンド課題の一環で
+        <Link href="https://github.com/ReoHakase" external referrerPolicy="no-referrer">
+          白田連大 @ReoHakase
+        </Link>
+        により作成されました。
+      </small>
     </main>
   );
 };