Skip to content
Snippets Groups Projects
Select Git revision
  • 620619b4e6b256d2ac1cec9c13cac8616b6e23d3
  • master default protected
2 results

SearchPage.js

Blame
  • 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>
      );
    }