Skip to content

Commit 163bdd3

Browse files
nikukyugamernikukyugamer
authored
トップページを作成した (#46)
* feat: 🎸 $ yarn add --dev @next/font * feat: 🎸 フォントとスタイルを調整した * feat: 🎸 <Link> を仮置きした * feat: 🎸 微修正
1 parent ebb8402 commit 163bdd3

File tree

5 files changed

+50
-86
lines changed

5 files changed

+50
-86
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "election-bulletin-2023",
33
"version": "0.1.0",
44
"devDependencies": {
5+
"@next/font": "^13.4.7",
56
"@types/node": "20.3.3",
67
"@types/react": "18.2.14",
78
"@types/react-dom": "18.2.6",

‎src/app/globals.css

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
45

5-
/* :root {
6+
:root {
67
--foreground-rgb: 0, 0, 0;
78
--background-start-rgb: 214, 219, 220;
89
--background-end-rgb: 255, 255, 255;
@@ -17,11 +18,12 @@
1718
}
1819

1920
body {
21+
font-family: 'Noto Serif JP', serif;
2022
color: rgb(var(--foreground-rgb));
2123
background: linear-gradient(
2224
to bottom,
2325
transparent,
2426
rgb(var(--background-end-rgb))
2527
)
2628
rgb(var(--background-start-rgb));
27-
} */
29+
}

‎src/app/layout.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import './globals.css'
2-
import { Inter } from 'next/font/google'
32
import Script from 'next/script'
43

5-
const inter = Inter({ subsets: ['latin'] })
6-
74
const siteName = '幻水総選挙2023 投票対象リスト'
85
const description =
96
'幻水総選挙2023における投票対象のリストを紹介しているサイトです。'
@@ -60,7 +57,7 @@ export default function RootLayout({
6057
}}
6158
/>
6259
</head>
63-
<body className={inter.className}>{children}</body>
60+
<body>{children}</body>
6461
</html>
6562
)
6663
}

‎src/app/page.tsx

+39-80
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,52 @@
1-
import cities from '@/app/resource/cities.json'
2-
3-
async function mySrvComponent() {
4-
return cities
5-
}
6-
// export const generateStaticParams = async () => {
7-
// const response = await fetch('https://jsonplaceholder.typicode.com/users')
8-
// const users: any = await response.json()
9-
10-
// return users.map((user: any) => ({
11-
// id: user.id.toString(),
12-
// }))
13-
// // const filePath = './resource/cities.json'
14-
15-
// // return cities
16-
// }
1+
import Link from 'next/link'
172

183
const Home = async () => {
19-
const holidays: any = await mySrvComponent()
20-
214
return (
22-
<div className="relative overflow-hidden">
5+
<div className="relative overflow-hidden pt-20">
236
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-24">
247
<div className="text-center">
25-
<h1 className="text-4xl sm:text-6xl font-bold text-black dark:text-black py-2">
26-
幻水総選挙2023 街部門
27-
</h1>
28-
<h1 className="text-4xl sm:text-6xl font-bold text-black dark:text-black py-2">
29-
対象名所一覧
8+
<h1 className="text-5xl sm:text-6xl font-bold text-white dark:text-white py-3">
9+
幻水総選挙2023
3010
</h1>
31-
</div>
32-
<div className="my-6">
33-
<hr />
34-
</div>
35-
36-
<h2 className="pl-1 pb-1">五十音</h2>
37-
<select className="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
38-
<option selected>全て</option>
39-
<option>ア行</option>
40-
<option>カ行</option>
41-
<option>サ行</option>
42-
<option>その他</option>
43-
</select>
44-
45-
<div className="my-6" />
46-
47-
<h2 className="pl-1 pb-1">作品名</h2>
48-
<select className="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
49-
<option selected>全て</option>
50-
<option>I</option>
51-
<option>II</option>
52-
<option>III</option>
53-
<option>IV</option>
54-
<option>V</option>
55-
</select>
56-
</div>
57-
58-
<div className="text-center">
59-
<h1 className="text-4xl sm:text-6xl font-bold text-black dark:text-black py-2">
60-
キャラ
61-
</h1>
62-
63-
{/* holidaysを箇条書き */}
64-
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
65-
{holidays.map((city: any, index: number) => (
66-
<div className="hoge" key={index}>
67-
<p className="fuga">
68-
{city.city}（{city.title}）
69-
</p>
70-
</div>
71-
))}
11+
<h3 className="text-4xl sm:text-4xl font-bold text-white dark:text-white py-3">
12+
投票対象リスト
13+
</h3>
14+
<div className="my-6">
15+
<hr />
16+
</div>
17+
<p className="text-3xl py-4">
18+
{/* リンクに下線を引きたい。下線と文字の縦の間隔は少し空けたい */}
19+
<Link
20+
href="/cities"
21+
passHref
22+
style={{
23+
textDecoration: 'underline',
24+
textUnderlineOffset: '0.2em',
25+
}}
26+
>
27+
本拠地施設キャラ部門
28+
</Link>
29+
</p>
30+
<p className="text-3xl py-4">
31+
<Link
32+
href="/cities"
33+
passHref
34+
style={{
35+
textDecoration: 'underline',
36+
textUnderlineOffset: '0.2em',
37+
}}
38+
>
39+
街部門
40+
</Link>
41+
</p>
42+
<div className="my-6">
43+
<hr />
44+
</div>
45+
<div className="py-2">2023 （株）幻水総選挙</div>
7246
</div>
7347
</div>
7448
</div>
7549
)
7650
}
7751

7852
export default Home
79-
80-
{
81-
/* // return (
82-
// <div>
83-
// {/* cities を回す indexをユニークにつける */
84-
}
85-
// {holidays.map((city: any, index: number) => (
86-
// <div classNameName="hoge" key={index}>
87-
// <p classNameName="fuga">
88-
// {city.title}::{city.country}::{city.city}
89-
// </p>
90-
// </div>
91-
// ))}
92-
// </div>
93-
// ) */}

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,11 @@
119119
dependencies:
120120
glob "7.1.7"
121121

122+
"@next/font@^13.4.7":
123+
version "13.4.7"
124+
resolved "https://registry.yarnpkg.com/@next/font/-/font-13.4.7.tgz#32f9e2c4a856e23370d2be4b46eddaccce11b88d"
125+
integrity sha512-l28ifb3pjKznQeXmiCD5VXkmqdpMrcUQMr4ZChAgTKrjckl/aGyRLOIlL/ABhTHmzMujdt/TTWUsdABArNK5gA==
126+
122127
"@next/[email protected]":
123128
version "13.4.7"
124129
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7.tgz#5e36c26dda5b0bc0ea15d8555d0abd71a1ef4b5d"

0 commit comments

Comments
 (0)