added type to event
This commit was merged in pull request #4.
This commit is contained in:
@@ -1,9 +1,15 @@
|
|||||||
import React from "react";
|
import { useState, ChangeEvent } from "react";
|
||||||
import Logo from "../../assets/icons/logo.svg";
|
import Logo from "../../assets/icons/logo.svg";
|
||||||
import Button from "../shared/Button";
|
import Button from "../shared/Button";
|
||||||
import { lowerMenuItems } from "../../utils/data";
|
import { lowerMenuItems } from "../../utils/data";
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
|
const [searchValue, setSearchValue] = useState<string>("");
|
||||||
|
|
||||||
|
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setSearchValue(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative my-2 items-center justify-center flex">
|
<div className="relative my-2 items-center justify-center flex">
|
||||||
<div className="container px-8 flex justify-between">
|
<div className="container px-8 flex justify-between">
|
||||||
@@ -28,7 +34,7 @@ const Header = () => {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<SearchInput />
|
<SearchInput onChange={handleSearchChange} value={searchValue} />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="flex gap-4 items-center">
|
<ul className="flex gap-4 items-center">
|
||||||
@@ -49,7 +55,13 @@ const Header = () => {
|
|||||||
|
|
||||||
export default Header;
|
export default Header;
|
||||||
|
|
||||||
const SearchInput = ({ value, onChange }) => {
|
const SearchInput = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
value: string;
|
||||||
|
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
||||||
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center border border-[#5A2C82] overflow-hidden">
|
<div className="flex items-center border border-[#5A2C82] overflow-hidden">
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
|
||||||
|
|
||||||
|
const Hero = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
Hero
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Hero
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import Hero from "./Hero";
|
||||||
|
|
||||||
|
export { Hero };
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
type ButtonProps = {
|
type ButtonProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Header, TopHeader } from '../components/Header'
|
import { Header, TopHeader } from '../components/Header'
|
||||||
|
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { HomePage } from "../pages";
|
|||||||
const Routers = () => {
|
const Routers = () => {
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route exact path={RouteHandler.homepage} element={<HomePage />} />
|
<Route path={RouteHandler.homepage} element={<HomePage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user