55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
|
|
const SearchOverlay = () => {
|
|
const closeSearch = () => {
|
|
const searchArea = document.querySelector(".df-search-area");
|
|
const bodyOverlay = document.querySelector(".body-overlay");
|
|
searchArea?.classList.remove("opened");
|
|
bodyOverlay?.classList.remove("opened");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="df-search-area">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-xl-12">
|
|
<div className="df-search-form">
|
|
<div className="df-search-close text-center mb-20">
|
|
<button
|
|
className="df-search-close-btn"
|
|
onClick={closeSearch}
|
|
></button>
|
|
</div>
|
|
<form action="#">
|
|
<div className="df-search-input mb-10">
|
|
<input
|
|
type="text"
|
|
placeholder="Search here..."
|
|
suppressHydrationWarning={true}
|
|
/>
|
|
<button type="submit" suppressHydrationWarning={true}>
|
|
<i className="fa-solid fa-magnifying-glass"></i>
|
|
</button>
|
|
</div>
|
|
<div className="df-search-category">
|
|
<span>Search by : </span>
|
|
<a href="#">Modified Metatron, </a>
|
|
<a href="#">Metatron Installation, </a>
|
|
<a href="#">Metatron Cornering, </a>
|
|
<a href="#">Metatron Renovation </a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="body-overlay" onClick={closeSearch}></div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SearchOverlay;
|