diff --git a/src/app/components/Card/index.tsx b/src/app/components/Card/index.tsx index a9ce71be..26b018ca 100644 --- a/src/app/components/Card/index.tsx +++ b/src/app/components/Card/index.tsx @@ -1,9 +1,8 @@ import styled from 'styled-components'; import Icon from '../icons'; -import ProductIon from 'app/pages/MyHomePage/components/assets/1.jpg'; import { Span } from '../Span/inedx'; import { mapCardLabel } from '../CardLabel'; -import { ICard, ETxtOnline, ELabel, EResultLabel } from 'types/Card'; +import { ICard } from 'types/Card'; import { CardTxtOnline } from './components/card-txt-online'; import { currencyVND } from 'utils/string'; import { ResultLabel } from './components/resultLabel'; diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx index 6bcf44b6..8a8e53ee 100644 --- a/src/app/components/Header/index.tsx +++ b/src/app/components/Header/index.tsx @@ -5,8 +5,10 @@ import { media } from 'styles/media'; import { ReactComponent as MoreIcon } from './assets/more.svg'; import Menu from './Menu'; import { Container } from '../container'; +import { useNavigate } from 'react-router-dom'; export default function MyHeader() { + const navigate = useNavigate(); return ( @@ -18,6 +20,7 @@ export default function MyHeader() { width="240px" height="40px" className="header__brand" + onClick={() => navigate('/')} /> @@ -32,7 +35,10 @@ export default function MyHeader() { Đăng nhập - + navigate('/card')} + > Giỏ Hàng diff --git a/src/app/index.tsx b/src/app/index.tsx index a1a7266a..8c36eee8 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -9,14 +9,14 @@ import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; - import { GlobalStyle } from 'styles/global-styles'; - -import { HomePage } from './pages/HomePage/Loadable'; import { NotFoundPage } from './pages/NotFoundPage/Loadable'; import { useTranslation } from 'react-i18next'; import { MyHomePage } from './pages/MyHomePage'; -import { MainLayout } from './layout'; +import { MainLayout } from './layout/main-layout'; +import { NoFooterLayout } from './layout/no-footer'; +import { CardPage } from './pages/CardPage'; +import AppRoutes from './routes'; export function App() { const { i18n } = useTranslation(); @@ -29,17 +29,7 @@ export function App() { > - - - {/* } /> */} - {/* } /> - } /> */} - - }> - } /> - - } /> - + ); diff --git a/src/app/layout/index.tsx b/src/app/layout/main-layout.tsx similarity index 100% rename from src/app/layout/index.tsx rename to src/app/layout/main-layout.tsx diff --git a/src/app/layout/no-footer.tsx b/src/app/layout/no-footer.tsx new file mode 100644 index 00000000..d91c4282 --- /dev/null +++ b/src/app/layout/no-footer.tsx @@ -0,0 +1,14 @@ +import MyHeader from 'app/components/Header'; +import { Main } from 'app/components/Main'; +import { Outlet } from 'react-router-dom'; + +export const NoFooterLayout = () => { + return ( + <> + +
+ +
+ + ); +}; diff --git a/src/app/pages/CardPage/Loadable.tsx b/src/app/pages/CardPage/Loadable.tsx new file mode 100644 index 00000000..0fe36cb8 --- /dev/null +++ b/src/app/pages/CardPage/Loadable.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { lazyLoad } from 'utils/loadable'; +import { LoadingIndicator } from 'app/components/LoadingIndicator'; +import styled from 'styled-components/macro'; + +const LoadingWrapper = styled.div` + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +`; + +export const LZCardPage = lazyLoad( + () => import('./index'), + module => module.CardPage, + { + fallback: ( + + + + ), + }, +); diff --git a/src/app/pages/CardPage/index.tsx b/src/app/pages/CardPage/index.tsx new file mode 100644 index 00000000..25535ed4 --- /dev/null +++ b/src/app/pages/CardPage/index.tsx @@ -0,0 +1,18 @@ +import { Helmet } from 'react-helmet-async'; + +export function CardPage() { + return ( + <> + + Giỏ hàng + + +
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem natus + dolor ullam rerum amet. Modi officiis ratione ullam numquam totam + expedita ducimus iusto, molestiae quasi autem voluptatum repellat + minima? Voluptas? +
+ + ); +} diff --git a/src/app/pages/MyHomePage/Loadable.tsx b/src/app/pages/MyHomePage/Loadable.tsx index 373a869b..69dc034c 100644 --- a/src/app/pages/MyHomePage/Loadable.tsx +++ b/src/app/pages/MyHomePage/Loadable.tsx @@ -11,7 +11,7 @@ const LoadingWrapper = styled.div` justify-content: center; `; -export const MyHomePage = lazyLoad( +export const LZMyHomePage = lazyLoad( () => import('./index'), module => module.MyHomePage, { diff --git a/src/app/pages/NotFoundPage/index.tsx b/src/app/pages/NotFoundPage/index.tsx index 440b7ef9..f4eb68fa 100644 --- a/src/app/pages/NotFoundPage/index.tsx +++ b/src/app/pages/NotFoundPage/index.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import styled from 'styled-components/macro'; import { P } from './P'; import { Link } from 'app/components/Link'; -import { NavBar } from 'app/components/NavBar'; import { Helmet } from 'react-helmet-async'; import { StyleConstants } from 'styles/StyleConstants'; @@ -13,7 +12,6 @@ export function NotFoundPage() { 404 Page Not Found - 4 diff --git a/src/app/routes.tsx b/src/app/routes.tsx new file mode 100644 index 00000000..ea3b5b55 --- /dev/null +++ b/src/app/routes.tsx @@ -0,0 +1,28 @@ +import { MainLayout } from './layout/main-layout'; +import { NotFoundPage } from './pages/NotFoundPage'; +import { LZMyHomePage } from './pages/MyHomePage/Loadable'; +import { NoFooterLayout } from './layout/no-footer'; +import { LZCardPage } from './pages/CardPage/Loadable'; +import { RouteObject, useRoutes } from 'react-router-dom'; +import React from 'react'; + +const routes: RouteObject[] = [ + { + path: '/', + element: <MainLayout />, + children: [{ index: true, element: <LZMyHomePage /> }], + }, + { + path: '/card', + element: <NoFooterLayout />, + children: [{ index: true, element: <LZCardPage /> }], + }, + { path: '*', element: <NotFoundPage /> }, +]; + +const AppRoutes: React.FC = () => { + const element = useRoutes(routes); + return element; +}; + +export default AppRoutes;