Select Git revision
SearchPage.js
-
TaeWook Kim authoredTaeWook Kim authored
SearchPage.js 1.08 KiB
import React, { useState } from 'react';
import { Button, TextField } from '@mui/material';
import MusicList from './MusicList';
export default function SearchPage({ likes, onLike }) {
const [searchWord, setSearchWord] = useState('');
const [searchResult, setSearchResult] = useState([]);
const handleSearchTextChange = (event) => {
setSearchWord(event.target.value);
};
return (
<React.Fragment>
<form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}>
<div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto' }}>
<TextField
variant="outlined"
label="Music Album Search"
type="search"
style={{ width: 450 }}
onChange={handleSearchTextChange}
value={searchWord}
/>
<Button variant="contained" color="primary" type="submit" onClick={handleSearch} style={{ marginLeft: 20 }}>
Search
</Button>
</div>
</form>
<MusicList list={searchResult} likes={likes} onLike={onLike} />
</React.Fragment>
);
}