鐵人賽 (15th) Day 11 開一個新 Katakana Table
Tags: 2023-15th-ironman, 鐵人賽
GitHub
- 丟上 Render
我要學50音
- 實作後的成果
- 隨著每天的更新都會變化唷唷~~
GitHub
- 丟上 Render
我要學50音
- 實作後的成果
- 隨著每天的更新都會變化唷唷~~
katakanaList
export const katakanaList = [
{
name: "ア",
roots: "a",
あ: "ア",
い: "イ",
う: "ウ",
え: "エ",
お: "オ",
words: ["ア", "イ", "ウ", "エ", "オ", ""],
},
{
name: "カ",
roots: "k",
あ: "カ",
い: "キ",
う: "ク",
え: "ケ",
お: "コ",
words: ["カ", "キ", "ク", "ケ", "コ", ""],
},
{
name: "サ",
roots: "s",
あ: "サ",
い: "シ",
う: "ス",
え: "セ",
お: "ソ",
words: ["サ", "シ", "ス", "セ", "ソ", ""],
},
{
name: "タ",
roots: "t",
あ: "タ",
い: "チ",
う: "ツ",
え: "テ",
お: "ト",
words: ["タ", "チ", "ツ", "テ", "ト", ""],
},
{
name: "ナ",
roots: "n",
あ: "ナ",
い: "ニ",
う: "ヌ",
え: "ネ",
お: "ノ",
words: ["ナ", "ニ", "ヌ", "ネ", "ノ", ""],
},
{
name: "ハ",
roots: "h",
あ: "ハ",
い: "ヒ",
う: "フ",
え: "ヘ",
お: "ホ",
words: ["ハ", "ヒ", "フ", "ヘ", "ホ", ""],
},
{
name: "マ",
roots: "m",
あ: "マ",
い: "ミ",
う: "ム",
え: "メ",
お: "モ",
words: ["マ", "ミ", "ム", "メ", "モ", ""],
},
{
name: "ヤ",
roots: "y",
あ: "ヤ",
い: " ",
う: "ユ",
え: " ",
お: "ヨ",
words: ["ヤ", " ", "ユ", " ", "ヨ", ""],
},
{
name: "ラ",
roots: "r",
あ: "ラ",
い: "リ",
う: "ル",
え: "レ",
お: "ロ",
words: ["ラ", "リ", "ル", "レ", "ロ", ""],
},
{
name: "ワ",
roots: "w",
あ: "ワ",
い: " ",
う: " ",
え: " ",
お: "ヲ",
words: ["ワ", " ", " ", " ", "ヲ", ""],
},
{
name: "ン",
roots: "n",
あ: "",
い: " ",
う: " ",
え: " ",
お: " ",
words: [" ", " ", " ", " ", " ", "ン"],
},
];
Day11.js
import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { Box, Grid } from "@mui/material";
import { katakanaList } from "../../shared/model/aiueoObj";
//
// IMPORT ZONE
//
const Day11 = () => {
const katakanaRow = [...katakanaList].map((d, idx) =>
Object.assign(d, { id: idx })
);
const katakanaColumns = [
{
field: "name",
headerName: "行",
width: 50,
},
{
field: "あ",
headerName: "あ段",
width: 50,
},
{
field: "い",
headerName: "い段",
width: 50,
},
{
field: "う",
headerName: "う段",
width: 50,
},
{
field: "え",
headerName: "え段",
width: 50,
},
{
field: "お",
headerName: "お段",
width: 50,
},
];
console.log(katakanaRow);
return (
<Grid container direction={"column"} alignContent={"center"}>
<Box>
<DataGrid columns={katakanaColumns} rows={katakanaRow} />
</Box>
</Grid>
);
};
export default Day11;