76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
|
||
export default function PreloaderAndSearch() {
|
||
const [isLoaded, setIsLoaded] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// Preloader'ı kapat
|
||
const timer = setTimeout(() => {
|
||
setIsLoaded(true);
|
||
}, 500);
|
||
|
||
// Search button click handler
|
||
const searchButton = document.getElementById('searchButton');
|
||
const searchClose = document.getElementById('searchClose');
|
||
const searchOverlay = document.getElementById('searchOverlay');
|
||
const searchPopup = document.querySelector('.search-form-popup');
|
||
|
||
const openSearch = () => {
|
||
searchOverlay?.classList.add('active');
|
||
searchPopup?.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
};
|
||
|
||
const closeSearch = () => {
|
||
searchOverlay?.classList.remove('active');
|
||
searchPopup?.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
};
|
||
|
||
searchButton?.addEventListener('click', openSearch);
|
||
searchClose?.addEventListener('click', closeSearch);
|
||
searchOverlay?.addEventListener('click', closeSearch);
|
||
|
||
// Cleanup
|
||
return () => {
|
||
clearTimeout(timer);
|
||
searchButton?.removeEventListener('click', openSearch);
|
||
searchClose?.removeEventListener('click', closeSearch);
|
||
searchOverlay?.removeEventListener('click', closeSearch);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
{/* Preloader */}
|
||
{!isLoaded && (
|
||
<div className="preloader" id="preloader">
|
||
<div className="spinner-grow" role="status">
|
||
<span className="visually-hidden">Loading...</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Search Form Overlay */}
|
||
<div className="search-bg-overlay" id="searchOverlay"></div>
|
||
|
||
{/* Search Form Popup */}
|
||
<div className="search-form-popup">
|
||
<h2 className="mb-4">How can I help you, Today?</h2>
|
||
<button type="button" className="close-btn" id="searchClose" aria-label="Close">
|
||
<i className="ti ti-x"></i>
|
||
</button>
|
||
<form className="search-form">
|
||
<input type="search" className="form-control" placeholder="Search..." />
|
||
<button type="submit" className="btn btn-primary">
|
||
<i className="ti ti-search"></i> Search
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|