Creating Initial Components - animesh0701/anime-hub GitHub Wiki
Firstly create a new folder in src folder named components that will store every component that our app.tsx will render
The directory should look like this
For the navbar, firstly create a new navbar component that consists of a logo, website name, and a search-bar component.
This search-bar component will be implemented independently in a separate component file.
Install chakra icons
npm i @chakra-ui/icons
import SearchBar from "./searchBar"; //component import
import { HStack, Image, Text } from "@chakra-ui/react"; //chakra UI component
import luffy from "../assets/luffyIcon.png";
const NavBar = () => {
return (
<HStack paddingLeft="20px" pr={10} h={140} justifyContent={"space-between"}>
<HStack>
<Image src={luffy} boxSize={["60px", "80px", "100px"]}></Image>
<Text>ANIMEHUB</Text>
</HStack>
<SearchBar />
</HStack>
);
};
export default NavBar;this component also uses Chakra's responsive styling as well.
import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
import { Search2Icon } from "@chakra-ui/icons"; //Chakra Ui imports
const SearchBar = () => {
return (
<>
<InputGroup borderRadius={5} size="lg" w={[200, 230, 250]}>
<InputLeftElement
pointerEvents="none"
children={<Search2Icon color="grey" />}
/>
<Input
type="text"
color={"grey"}
placeholder="Search..."
border="1px solid grey"
/>
</InputGroup>
</>
);
};
export default SearchBar;