import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Route, Routes } from "react-router-dom";
import BtmHeader from "./Components/BtmHeader";
import TopHeader from "./Components/TopHeader";
import React from "react";
import Home from "./Page/Home";
import Footer from "./Components/Footer";
import ProductDetails from "./Page/ProductDetails";
import Cart from "./Page/Cart";
import { Toaster } from "react-hot-toast";
import Category from "./Page/Category";
import Favorite from "./Page/Favorite";
import SearchResults from "./Page/SearchResults";
import Login from "./Page/Login";
import Register from "./Page/Register";
import Buying from "./Page/Buying";
import Blog from "./Page/Blog";
import Blog1 from "./Page/BlogsPage/Blog1";
import Blog2 from "./Page/BlogsPage/Blog2";
import Blog3 from "./Page/BlogsPage/Blog3";
import Blog4 from "./Page/BlogsPage/Blog4";
import Blog5 from "./Page/BlogsPage/Blog5";
import Blog6 from "./Page/BlogsPage/Blog6";
import Blog7 from "./Page/BlogsPage/Blog7";
import Blog8 from "./Page/BlogsPage/Blog8";
import Blog9 from "./Page/BlogsPage/Blog9";
import Blog10 from "./Page/BlogsPage/Blog10";
import Blog11 from "./Page/BlogsPage/Blog11";
import Blog12 from "./Page/BlogsPage/Blog12";
import About from "./Page/About";
import Services from "./Page/Services";
import Scroll from "./Components/Scroll";
function App() {
return (_jsxs(React.Fragment, { children: [_jsx(Scroll, {}), _jsx(Toaster, { position: "bottom-right", toastOptions: {
style: {
background: "#fff",
padding: "15px",
borderRadius: "20px",
},
} }), _jsxs("header", { children: [_jsx(TopHeader, {}), _jsx(BtmHeader, {})] }), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Home, {}) }), _jsx(Route, { path: "/product/:id", element: _jsx(ProductDetails, {}) }), _jsx(Route, { path: "/cart", element: _jsx(Cart, {}) }), _jsx(Route, { path: "/category/:category", element: _jsx(Category, {}) }), _jsx(Route, { path: "/favorite", element: _jsx(Favorite, {}) }), _jsx(Route, { path: "/search", element: _jsx(SearchResults, {}) }), _jsx(Route, { path: "/login", element: _jsx(Login, {}) }), _jsx(Route, { path: "/signup", element: _jsx(Register, {}) }), _jsx(Route, { path: "/buying", element: _jsx(Buying, {}) }), _jsx(Route, { path: "/about", element: _jsx(About, {}) }), _jsx(Route, { path: "/services", element: _jsx(Services, {}) }), _jsx(Route, { path: "/blog", element: _jsx(Blog, {}) }), _jsx(Route, { path: "/blog1", element: _jsx(Blog1, {}) }), _jsx(Route, { path: "/blog2", element: _jsx(Blog2, {}) }), _jsx(Route, { path: "/blog3", element: _jsx(Blog3, {}) }), _jsx(Route, { path: "/blog4", element: _jsx(Blog4, {}) }), _jsx(Route, { path: "/blog5", element: _jsx(Blog5, {}) }), _jsx(Route, { path: "/blog6", element: _jsx(Blog6, {}) }), _jsx(Route, { path: "/blog7", element: _jsx(Blog7, {}) }), _jsx(Route, { path: "/blog8", element: _jsx(Blog8, {}) }), _jsx(Route, { path: "/blog9", element: _jsx(Blog9, {}) }), _jsx(Route, { path: "/blog10", element: _jsx(Blog10, {}) }), _jsx(Route, { path: "/blog11", element: _jsx(Blog11, {}) }), _jsx(Route, { path: "/blog12", element: _jsx(Blog12, {}) })] }), _jsx(Footer, {})] }));
}
export default App;
// App.js
import { Route, Routes } from "react-router-dom";
import BtmHeader from "./Components/BtmHeader";
import TopHeader from "./Components/TopHeader";
import React from "react";
import Home from "./Page/Home";
import Footer from "./Components/Footer";
import ProductDetails from "./Page/ProductDetails";
import Cart from "./Page/Cart";
import { Toaster } from "react-hot-toast";
import Category from "./Page/Category";
import Favorite from "./Page/Favorite";
import SearchResults from "./Page/SearchResults";
import Login from "./Page/Login";
import Register from "./Page/Register";
import Buying from "./Page/Buying";
import Blog from "./Page/Blog";
import Blog1 from "./Page/BlogsPage/Blog1";
import Blog2 from "./Page/BlogsPage/Blog2";
import Blog3 from "./Page/BlogsPage/Blog3";
import Blog4 from "./Page/BlogsPage/Blog4";
import Blog5 from "./Page/BlogsPage/Blog5";
import Blog6 from "./Page/BlogsPage/Blog6";
import Blog7 from "./Page/BlogsPage/Blog7";
import Blog8 from "./Page/BlogsPage/Blog8";
import Blog9 from "./Page/BlogsPage/Blog9";
import Blog10 from "./Page/BlogsPage/Blog10";
import Blog11 from "./Page/BlogsPage/Blog11";
import Blog12 from "./Page/BlogsPage/Blog12";
import About from "./Page/About";
import Services from "./Page/Services";
import Scroll from "./Components/Scroll";
function App() {
return (
<React.Fragment>
<Toaster
position="bottom-right"
toastOptions={{
style: {
background: "#fff",
padding: "15px",
borderRadius: "20px",
},
}}
/>
<header>
<TopHeader />
<BtmHeader />
</header>
<Scroll />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/product/:id" element={<ProductDetails />} />
<Route path="/cart" element={<Cart />} />
<Route path="/category/:category" element={<Category />} />
<Route path="/favorite" element={<Favorite />} />
<Route path="/search" element={<SearchResults />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Register />} />
<Route path="/buying" element={<Buying />} />
<Route path="/about" element={<About />} />
<Route path="/services" element={<Services />} />
{/* Blog Pages Routes */}
<Route path="/blog" element={<Blog />} />
<Route path="/blog1" element={<Blog1 />} />
<Route path="/blog2" element={<Blog2 />} />
<Route path="/blog3" element={<Blog3 />} />
<Route path="/blog4" element={<Blog4 />} />
<Route path="/blog5" element={<Blog5 />} />
<Route path="/blog6" element={<Blog6 />} />
<Route path="/blog7" element={<Blog7 />} />
<Route path="/blog8" element={<Blog8 />} />
<Route path="/blog9" element={<Blog9 />} />
<Route path="/blog10" element={<Blog10 />} />
<Route path="/blog11" element={<Blog11 />} />
<Route path="/blog12" element={<Blog12 />} />
</Routes>
<Footer />
</React.Fragment>
);
}
export default App;
//App.tsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const Scroll = () => {
const pathname = useLocation();
useEffect(() => {
window.scrollBy({
top: 0,
left: 0,
behavior: 'smooth'
});
}, [pathname]);
return null;
};
export default Scroll;
// Scroll.js
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
const Scroll = () => {
const pathname = useLocation();
useEffect(() => {
window.scrollBy({
top: 0,
left: 0,
behavior: 'smooth'
})
},[pathname])
return null;
}
export default Scroll
// Scroll.tsx
ال scroll لايعمل من مفترض عند دخول الى اي صفحة يرفع سكرول الى اعلى كي يرى صفحة وليس footer
يعني اضيف في Render في build cd server && npm i وفي start cd server && npm start
