Skip to content

add: Homeページのレイアウト作成 #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
koudaihirata merged 2 commits into from
Oct 7, 2025
Merged

add: Homeページのレイアウト作成 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc5c5a1
add: Homeページのレイアウト作成
okonakona Oct 2, 2025
143fb8b
画像名修正
okonakona Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/assets/arrow2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/success.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
119 changes: 111 additions & 8 deletions src/pages/Home/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,114 @@
import { GenreColor } from '@/utils/Color/_genre'
import { Link } from 'react-router-dom'
import styles from './style.module.css'
import { useState } from 'react'

export default function Home() {
return (
<>
<p style={{ color: GenreColor.HTML }}>ホームのページ</p>
<Link to={'/createProblem'}>問題作成</Link>
</>
)
const [filter, setFilter] = useState('stillAns')

const tasks = [
{
id: 1,
title: '見出し表示',
category: 'HTML',
level: '1-1',
author: '上森拓翔',
status: 'stillAns',
},
{
id: 2,
title: 'レイヤー弄り',
category: 'Illustrator',
level: '1-1',
author: '平田晃大',
status: 'alreadyAns',
},
{
id: 3,
title: 'モーダルウィンドウ',
category: 'JavaScript',
level: '1-1',
author: '高木湊二郎',
status: 'recommendTask',
},
]

// 選択中フィルターで絞り込み
const filteredTasks = tasks.filter((task) =>
filter === 'all' ? true : task.status === filter,
)

return (
<>
<div className={styles.content}>
<h1>平田晃大</h1>
<div className={styles.filterNav}>
<div className={styles.filterWrap}>
<select name="genre" id="genreFilter">
<option value="all">all</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="Illustrator">Illustrator</option>
<option value="Photoshop">Photoshop</option>
<option value="Figma">Figma</option>
<option value="色彩検定">色彩検定</option>
</select>
<h2>
0<span>問正解</span>
</h2>
</div>
</div>
<div className={styles.taskTable}>
<div className={styles.taskFilter}>
<input
type="radio"
name="taskFilter"
id="stillAns"
value="stillAns"
checked={filter === 'stillAns'}
onChange={(e) => setFilter(e.target.value)}
/>
<label htmlFor="stillAns">解答途中</label>
<input
type="radio"
name="taskFilter"
id="alreadyAns"
value="alreadyAns"
checked={filter === 'alreadyAns'}
onChange={(e) => setFilter(e.target.value)}
/>
<label htmlFor="alreadyAns">解答済み</label>
<input
type="radio"
name="taskFilter"
id="recommendTask"
value="recommendTask"
checked={filter === 'recommendTask'}
onChange={(e) => setFilter(e.target.value)}
/>
<label htmlFor="recommendTask">推奨課題</label>
</div>
<table>
<thead>
<tr>
<td>タイトル</td>
<td>カテゴリー</td>
<td>レベル</td>
<td>作成者</td>
</tr>
</thead>
<tbody>
{filteredTasks.map((task) => (
<tr key={task.id}>
<td>{task.title}</td>
<td>{task.category}</td>
<td>{task.level}</td>
<td>{task.author}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</>
)
}
121 changes: 121 additions & 0 deletions src/pages/Home/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
@import '../../utils/Color/_variables.css';

.content{
margin: 50px 0;
h1{
text-align: center;
margin: 20px 0;
}
}

.filterNav{
display: flex;
justify-content: center;
margin: 20px 0;
.filterWrap{
display: flex;
align-items: center;
width: 450px;
border-radius: 50px;
background: var(--bgHover);
select{
background: var(--bgHover);
border: none;
font-size: 1.5rem;
margin: 0 30px;
height: 40px;
width: 100px;
}
h2{
border-left: solid 1px var(--grayText);
span{
font-weight: normal;
font-size: 1rem;
margin: 0.5rem;
}
&::before{
content: url("../../assets/success.svg");
margin: 0 30px;
width: 20px;
}
}
}
}

.taskFilter{
background-color: var(--mouseColor);
border-radius: 10px 10px 0 0;
margin: 2px;
padding: 10px;
input{
display: none;
}
label{
color: var(--whiteText);
margin: 0 5px;
padding: 15px 30px;
&:hover{
background: var(--whiteAlpha70);
color: var(--grayText);
border-radius: 10px 10px 0 0;
padding: 15px 30px;

}
}
input[type=radio]:checked + label{
background: var(--whiteText);
color: var(--textColor);
border-radius: 10px 10px 0 0;
padding: 15px 30px;
border-bottom: solid 1px var(--grayText);

}
}

.taskTable{
border: solid 3px var(--mouseColor);
border-radius: 16px;
width: 1123px;
height: 480px;
margin: auto;
table{
margin: auto;
width: 1000px;
margin-top: 25px;
tr{
display: flex;
justify-content: space-between;
border-bottom: solid 1px var(--grayText);
padding: 5px 0;
td{
width: 250px;
margin-left: 15px;
&:nth-last-child(1){
width: 100px;
}
}
}
thead{
tr{
border-bottom: solid 3px var(--textColor);
&::after{
content: "";
width: 15px;
}

}
}
tbody{
tr{
&::after{
content: url("../../assets/arrow2.svg");
width: 15px;
}
&:hover{
background-color: var(--bgHover);
}
}
}
}
}