diff --git a/src/assets/arrow2.svg b/src/assets/arrow2.svg new file mode 100644 index 0000000..76998c4 --- /dev/null +++ b/src/assets/arrow2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/success.svg b/src/assets/success.svg new file mode 100644 index 0000000..386a478 --- /dev/null +++ b/src/assets/success.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Home/page.tsx b/src/pages/Home/page.tsx index f1bc086..eee45da 100644 --- a/src/pages/Home/page.tsx +++ b/src/pages/Home/page.tsx @@ -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 ( - <> -

ホームのページ

- 問題作成 - - ) + 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 ( + <> +
+

平田晃大

+
+
+ +

+ 0問正解 +

+
+
+
+
+ setFilter(e.target.value)} + /> + + setFilter(e.target.value)} + /> + + setFilter(e.target.value)} + /> + +
+ + + + + + + + + + + {filteredTasks.map((task) => ( + + + + + + + ))} + +
タイトルカテゴリーレベル作成者
{task.title}{task.category}{task.level}{task.author}
+
+
+ + ) } diff --git a/src/pages/Home/style.module.css b/src/pages/Home/style.module.css new file mode 100644 index 0000000..f1e9a90 --- /dev/null +++ b/src/pages/Home/style.module.css @@ -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); + } + } + } + } +} +