//tips
//smart contract
メイン部分上部はlayoutコンポーネントに組み込んだ。
<div>
<Typography variant="h5" >
Address: 0xa242fcb2acbb118ea1b6829efe8b7e2087b00000
</Typography>
<Typography variant="h6" >
Following:200 Follower:200 gifted:2000
</Typography>
<MailIcon />
</div>
Address:の右側などは色を変化させてコピーできるようにしたいので、文中に変数を埋め込み、その変数のみに対応するスタイルをどう形成するかも以後確認する。
まずはcomponentフォルダに新たにカード用のjsを作成。そちらをindexなどのページに読み込ませる形にする。
カードの中身をjsonに作成し、それをindexで一旦noteとして読み取ったのちにcardとして作成。
import * as React from 'react';
import { Card, IconButton, Typography } from '@mui/material';
import { CardHeader } from '@mui/material';
import { CardContent } from '@mui/material';
import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
const NoteCard = ({note}) => {
return (
<div>
<Card elevation={3}>
<CardHeader
action={
<IconButton onClick={()=>console.log('delete')}>
<DeleteOutlined />
</IconButton>
}
title={note.title}
subheader={note.category}
/>
<CardContent>
<Typography variant='body2'color='textSecondary'>
{note.details}
</Typography>
</CardContent>
</Card>
</div>
);
}
export default NoteCard;
Index箇所では下記のようにし、json-server --watch data/db.json --port 8000に上げたdata.jsonを取得している。
const [notes,setNotes]=useState([])//([])
useEffect(() => {
fetch('http://localhost:8000/notes')
.then(res => res.json())
.then(data => setNotes(data))
}, [])
ただ、試しに使った表示のgridがうまく機能していない感じ。
<Grid spacing={3} >
{notes.map(note =>(
<Grid item key={note.id}>
<NoteCard note={note}/>
</Grid>
))}
</Grid>
Gridの代わりを使うか検討。やはりGridを文の途中に挟むことはできないのか。
<Grid container>
<Grid item></Grid>
<Grid item></Grid>
<Grid item></Grid>
</Grid>
素直にGrid containerを使った方が後々ページを分割するのに使えそう。
<Grid container spacing={3}>
<Grid item xs={12} md={12} lg={12}>
<Typography variant="h4" component="h1" gutterBottom>
Next.js exampleeeeeeeeeeeeeeeeeeeeeeee
</Typography>
</Grid>
{notes.map(note => (
<Grid item xs={12} md={6} lg={4} key={note.id}>
{/* <NoteCard note={note} handleDelete={handleDelete} /> */}
<NoteCard note={note} />
</Grid>
))}
</Grid>
Maksestyleでflex要素を組み込み下記のようにしたら、興味深いことになった。
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>
<Grid item xs={6} md={6} lg={6} >
<Typography variant="h4" component="h1" gutterBottom>
Next.js exampleeeeeeeeeeeeeeeeeeeeeeee
</Typography>
</Grid>
{notes.map(note => (
<Grid item xs={12} md={12} lg={12} key={note.id}>
<NoteCard note={note} />
</Grid>
))}
</Grid>
カードの各要素が縦に積み重なるのではなく横にぎっしり詰まっているのでそこをなんとかする。xs={12} md={12} lg={12} を６にしても同じ結果になるので、gridの認識対象の問題。
