PinkWave Navbar Copy this MUI Component 0to Your Project

Generame un navbar responsi (que se adapte en cualquier pantalla) que sea rosado y blanco, debe verse masomenos asi como este codi: import React from "react"; import { AppBar, Toolbar, Button, IconButton, InputBase } from "@mui/material"; import { ShoppingCart, Search } from "@mui/icons material"; import { styled } from "@mui/system"; const StyledAppBar = styled(AppBar)({ backgroundColor: "#ffb6c1", padding: "10px 20px", position: "relative", height: "80px", display: "flex", alignItems: "center", justifyContent: "space between", }); const NavbarContainer = styled("div")({ backgroundColor: "#fff", borderRadius: "50px", padding: "10px 20px", display: "flex", alignItems: "center", justifyContent: "space between", width: "60%", margin: "auto", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)", position: "absolute", top: "35px", left: "50%", transform: "translateX( 50%)", }); const SearchBar = styled("div")({ display: "flex", alignItems: "center", backgroundColor: "#fff", padding: "8px 15px", borderRadius: "20px", boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.1)", width: "250px", }); const Logo = styled("div")({ display: "flex", alignItems: "center", }); const Navbar = () => { return ( <StyledAppBar position="static"> <Toolbar style={{ width: "90%", margin: "auto", display: "flex", justifyContent: "space between" }}> <div style={{ display: "flex", alignItems: "center" }}> <IconButton color="inherit"> <ShoppingCart /> </IconButton> <Button variant="contained" style={{ backgroundColor: "#fff", color: "black", fontWeight: "bold", textTransform: "none", borderRadius: "20px", padding: "8px 15px" }}> Reservar </Button> </div> <SearchBar> <InputBase placeholder="Buscar productos..." style={{ flex: 1, marginRight: "10px" }} /> <Search /> </SearchBar> </Toolbar> <NavbarContainer> <Logo> <img src="logo.png" alt="Logo" style={{ height: "60px" }} /> </Logo> <div style={{ display: "flex", gap: "15px" }}> <Button style={{ fontWeight: "bold", color: "black", textTransform: "none" }}>INICIO</Button> <Button style={{ fontWeight: "bold", color: "black", textTransform: "none" }}>CATEGORIA ▾</Button> <Button style={{ fontWeight: "bold", color: "black", textTransform: "none" }}>PRODUCTOS ▾</Button> <Button style={{ fontWeight: "bold", color: "black", textTransform: "none" }}>NOSOTROS</Button> <Button style={{ fontWeight: "bold", color: "black", textTransform: "none" }}>CONTACTOS</Button> </div> </NavbarContainer> </StyledAppBar> ); }; export default Navbar;