index.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import { AppBar, Box, Button, IconButton, Stack, TextField, Toolbar, Typography } from '@mui/material';
  2. import { MdOutlineShoppingCart } from 'react-icons/md';
  3. import { ReactComponent as ShoppingLogo } from '../../../images/shopping-logo.svg';
  4. import { SearchBar } from '../../common/SearchBar';
  5. const Header = () => (
  6. <Box className="Header">
  7. <AppBar position="static" className="AppBar">
  8. <Toolbar variant="dense" className="ToolBar">
  9. <IconButton>
  10. <ShoppingLogo className="Logo" />
  11. </IconButton>
  12. <Stack direction="row" spacing={2}>
  13. <Button variant="text" color="inherit">
  14. <Typography variant="body1" component="div">
  15. Головна
  16. </Typography>
  17. </Button>
  18. <Button variant="text" color="inherit">
  19. <Typography variant="body1" component="div">
  20. Товари
  21. </Typography>
  22. </Button>
  23. <Button variant="text" color="inherit">
  24. <Typography variant="body1" component="div">
  25. Зворотній зв'язок
  26. </Typography>
  27. </Button>
  28. </Stack>
  29. <Box className="SearchBarWrapper">
  30. <SearchBar />
  31. </Box>
  32. <IconButton color="inherit" className="CartLogoButton">
  33. <MdOutlineShoppingCart className="CartLogo" />
  34. </IconButton>
  35. </Toolbar>
  36. </AppBar>
  37. </Box>
  38. );
  39. export { Header };