Skip to content

Commit e4f9a09

Browse files
author
GLEADS0\tringuyen
committed
add router and font
1 parent 678ef51 commit e4f9a09

File tree

9 files changed

+139
-116
lines changed

9 files changed

+139
-116
lines changed

‎public/index.html‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<meta name="theme-color" content="#000000" />
12+
<meta name="description" content="Web site created using create-react-app" />
13+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
14+
<!--
1415
manifest.json provides metadata used when your web app is installed on a
1516
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1617
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
18+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19+
<!--
1920
Notice the use of %PUBLIC_URL% in the tags above.
2021
It will be replaced with the URL of the `public` folder during the build.
2122
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +25,13 @@
2425
work correctly both with client-side routing and a non-root public URL.
2526
Learn how to configure a non-root public URL by running `npm run build`.
2627
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
28+
<title>React App</title>
29+
</head>
30+
31+
<body>
32+
<noscript>You need to enable JavaScript to run this app.</noscript>
33+
<div id="root"></div>
34+
<!--
3335
This HTML file is a template.
3436
If you open it directly in the browser, you will see an empty page.
3537
@@ -39,5 +41,6 @@
3941
To begin the development, run `npm start` or `yarn start`.
4042
To create a production bundle, use `npm run build` or `yarn build`.
4143
-->
42-
</body>
43-
</html>
44+
</body>
45+
46+
</html>

‎src/App.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Routes, Route } from "react-router-dom";
66
import Contact from "./component/Tempalate/Contact";
77
import "./App.scss";
88
import { LoginContex } from "./component/context";
9+
import Iphone from "./component/Tempalate/Iphone";
910

1011
function App() {
1112
const [login, setLogin] = useState(false);
@@ -26,6 +27,11 @@ function App() {
2627
}
2728
/>
2829
<Route path="/login" element={<Contact />} />
30+
{/* <Route path="/iphone" element={<div><Iphone /></div>}>
31+
<Route path="12" element={<div>9</div>} />
32+
<Route path="sent" element={<div>10dff dfdfdff</div>} />
33+
</Route> */}
34+
<Route path="iphone" element={<Iphone />} />
2935
</Routes>
3036
</Layout>
3137
</LoginContex.Provider>

‎src/component/Tempalate/Iphone/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import { Routes, Route, Outlet } from "react-router-dom";
3+
4+
import { useParams } from "react-router-dom";
5+
export default function Iphone() {
6+
let params = useParams();
7+
console.log(params.iphone)
8+
return (
9+
<div>
10+
11+
{/* <Route path="iphone" element={<div>ddffdfd</div>}>
12+
<Route path=":12" element={<div>9</div>} />
13+
<Route path="sent" element={<div>10dff dfdfdff</div>} />
14+
</Route> */}
15+
iphone {params.iphone}
16+
</div>
17+
)
18+
}

‎src/component/molecules/CardProduct/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
} from "react-icons/ai";
99
import "./index.scss";
1010
import { Button } from "react-bootstrap";
11+
import { Link } from "react-router-dom";
1112
const dataStart = [
1213
1,
1314
1,
@@ -40,7 +41,7 @@ const CardProduct = ({
4041
</div>
4142
)} */}
4243
<div className="cardpro_content">
43-
<div className="cardpro_title">{title}</div>
44+
<Link to="/iphone/iphone-13" className="cardpro_title">{title}</Link>
4445
<div className="cardpro_price">
4546
<div className="cardpro_price_New">
4647
{dollarUSLocale.format(price)}

‎src/component/molecules/CardProduct/index.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.cardpro {
2-
font-family: Roboto;
32
overflow: hidden;
43
background-color: rgb(255, 255, 255);
54
position: relative;
@@ -19,7 +18,6 @@
1918
top: 5px;
2019
left: 0;
2120
font-size: 12px;
22-
font-family: Arial, Helvetica, sans-serif;
2321
border-radius: 5px;
2422
text-align: center;
2523
padding: 3px 10px;

‎src/component/organisms/Footer/index.scss‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
body {
2-
font-family: "Signika", sans-serif;
3-
}
41
.bg-grey {
52
background: #292929;
63
}
@@ -13,10 +10,8 @@ footer {
1310
footer p,
1411
a {
1512
font-size: 12px;
16-
font-family: "Roboto", sans-serif;
1713
}
1814
footer h6 {
19-
font-family: "Playfair Display", serif;
2015
margin-bottom: 40px;
2116
position: relative;
2217
}
@@ -80,10 +75,10 @@ footer ul li a {
8075
color: grey;
8176
text-decoration: none;
8277
}
83-
a:hover {
84-
text-decoration: none;
85-
color: #f5f5f5 !important;
86-
}
78+
// a:hover {
79+
// text-decoration: none;
80+
// color: #f5f5f5 !important;
81+
// }
8782
.logo-part {
8883
border-right: 1px solid grey;
8984
height: 100%;

‎src/component/organisms/Layout/index.js‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
//styles
3030
import "./index.scss";
3131
//components
32-
import Footer from '../Footer'
32+
import Footer from "../Footer";
3333
import Cart from "../../molecules/Cart";
3434
import User from "../../molecules/User";
3535
import Love from "../../molecules/Love";
@@ -38,6 +38,7 @@ import logo from "../../../images/icons/logo.png";
3838
import firebase from "../../../service/firebase";
3939
import { LoginContex } from "../../context";
4040
import { addDocument } from "../../../service/api";
41+
import { Link } from "react-router-dom";
4142

4243
const Layout = ({ children }) => {
4344
const [showMenuMobile, setShowMenuMobile] = useState(false);
@@ -59,11 +60,9 @@ const Layout = ({ children }) => {
5960
setUserSucsecss(user);
6061

6162
if (user) {
62-
63-
addDocument("user", { name: "Tri" })
63+
addDocument("user", { name: "Tri" });
6464
}
6565
});
66-
6766
}, []);
6867

6968
// xử lý click
@@ -104,46 +103,46 @@ const Layout = ({ children }) => {
104103
bg="light"
105104
expanded={showMenuMobile}
106105
id="myHeader"
107-
className={`${sticky ? "sticky" : ""} myHeader`}
106+
className={`${sticky ? "sticky" : ""} myHeader p-0`}
108107
>
109108
<div className="container">
110109
<div className="menu row">
111-
<div className="menuLeft col-8 col-md-10 col-xl-9 ">
110+
<div className="menuLeft col-6 col-lg-10 col-xl-9 ">
112111
<button
113-
className={`burger d-block d-md-none`}
112+
className={`burger d-block d-lg-none`}
114113
onClick={() => setShowMenuMobile(true)}
115114
>
116115
<BiMenu style={{ fontSize: "30px" }} />
117116
</button>
118117
<a href="/" className="menuLeft_logo">
119118
<img src={logo} alt="logo" /> <h1>TrisApple</h1>
120119
</a>
121-
<div className=" d-none d-md-block col-8 ">
120+
<div className=" d-none d-lg-block col-8 ">
122121
<div className=" d-flex">
123-
<a href="#action1" className="menuLeft_title">
122+
<Link to="/iphone" className="menuLeft_title">
124123
Trang Chủ
125-
</a>
126-
127-
<div className="menuLeft_titleDropdown">
128-
<NavDropdown title="Sản Phẩm" id="basic-nav-dropdown">
129-
<NavDropdown.Item href="/login">
130-
Iphone
131-
</NavDropdown.Item>
132-
<NavDropdown.Item href="#action/3.2">
133-
Apple Watch
134-
</NavDropdown.Item>
135-
<NavDropdown.Item href="#action/3.3">
136-
MacBook
137-
</NavDropdown.Item>
138-
<NavDropdown.Item href="#action/3.3">
139-
Linh Kiện
140-
</NavDropdown.Item>
141-
</NavDropdown>
124+
</Link>
125+
<div className="menuLeft_product">
126+
<div className="menuLeft_product-title">Sản Phẩm</div>
127+
<div className="menuLeft_product-item">
128+
<div>
129+
<Link to="/iphone">Iphone</Link>
130+
</div>
131+
<div>
132+
<Link to="/iphone">MacBook</Link>
133+
</div>
134+
<div>
135+
<Link to="/iphone">Ipad</Link>
136+
</div>
137+
<div>
138+
<Link to="/iphone">Apple Watch</Link>
139+
</div>
140+
<div>
141+
<Link to="/iphone">Linh Kiện</Link>
142+
</div>
143+
</div>
142144
<FaChevronDown />
143145
</div>
144-
{/* <a className="menuLeft_title" href="#action2">
145-
About Us
146-
</a> */}
147146
<a className="menuLeft_title" href="#action2">
148147
Bảo Hành
149148
</a>
@@ -154,7 +153,7 @@ const Layout = ({ children }) => {
154153
</div>
155154
</div>
156155

157-
<div className="menuRight col-4 col-md-2 col-xl-3">
156+
<div className="menuRight col-6 col-lg-2 col-xl-3">
158157
<Button
159158
onClick={handleUserClick}
160159
className="btnheart"

0 commit comments

Comments
 (0)