Web-Frontend/client/src/components/layout/Canvas/SearchBar.jsx

import { Input, InputGroup } from "@chakra-ui/react";
import { FiSearch } from "react-icons/fi"

export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) {
    return (
        <InputGroup startElement={<FiSearch />}>
            <Input 
                placeholder={placeholder} 
                size={size}
                width={width}
                borderRadius="full" 

            />
        </InputGroup>
    );
}