diff --git a/src/components/buildpc/CreateBuildpc.tsx b/src/components/buildpc/CreateBuildpc.tsx index 7e04797..80c7fdb 100644 --- a/src/components/buildpc/CreateBuildpc.tsx +++ b/src/components/buildpc/CreateBuildpc.tsx @@ -1,4 +1,9 @@ +import { useState } from "react"; +import { PopupBuildpc } from "../../components/buildpc/PopupBuildpc"; + export function CreateBuildpc() { + const [showPopup, setShowPopup] = useState(false); + return ( <>
@@ -20,7 +25,7 @@ export function CreateBuildpc() {
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor @@ -77,7 +82,7 @@ export function CreateBuildpc() {
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor @@ -129,7 +134,7 @@ export function CreateBuildpc() {
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor @@ -180,6 +185,10 @@ export function CreateBuildpc() { { + e.preventDefault(); + setShowPopup(true); + }} className="w-[130px] h-[30px] block text-xs mt-2.5 text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white" > + Chọn thêm CPU @@ -191,6 +200,10 @@ export function CreateBuildpc() { {/* */} + + setShowPopup(false)} /> ); } diff --git a/src/components/buildpc/CompareBuildpc.tsx b/src/components/buildpc/ListCompare.tsx similarity index 99% rename from src/components/buildpc/CompareBuildpc.tsx rename to src/components/buildpc/ListCompare.tsx index 2e97bfa..3ca5bee 100644 --- a/src/components/buildpc/CompareBuildpc.tsx +++ b/src/components/buildpc/ListCompare.tsx @@ -1,4 +1,4 @@ -export function CompareBuildpc() { +export function ListCompare() { return (
diff --git a/src/components/buildpc/PopupBuildpc.tsx b/src/components/buildpc/PopupBuildpc.tsx new file mode 100644 index 0000000..5ef1947 --- /dev/null +++ b/src/components/buildpc/PopupBuildpc.tsx @@ -0,0 +1,832 @@ +export function PopupBuildpc({ show, onClose }) { + return ( + <> +
+
+ +
+
+ +
+ +
+ Tên + Dung lượng + Thế hệ + Bộ nhớ + Độ ồn + Màu sắc + Đánh giá + Thành tiền +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+ +
8bg
+
5
+
GDDR5
+
5db
+
Đen
+
+ + (125) +
+
+
3.400.000đ
+ + Add + +
+
+
+
+
+
+
+ + ); +} diff --git a/src/index.tsx b/src/index.tsx index aa3aee6..69ebe20 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,6 +5,8 @@ import { Footer } from "./components/footer/Footer"; import { Home } from "./pages/Home/index.jsx"; import { ProductDetail } from "./pages/product/ProductDetail"; import { Buildpc } from "./pages/buildpc/Buildpc"; +import { CompareBuildpc } from "./pages/buildpc/CompareBuildpc"; +import { DetailBuildpc } from "./pages/buildpc/DetailBuildpc"; import { NotFound } from "./pages/_404.jsx"; export function App() { @@ -16,6 +18,8 @@ export function App() { + +
diff --git a/src/pages/buildpc/Buildpc.tsx b/src/pages/buildpc/Buildpc.tsx index b0db086..3be6949 100644 --- a/src/pages/buildpc/Buildpc.tsx +++ b/src/pages/buildpc/Buildpc.tsx @@ -104,11 +104,7 @@ export function Buildpc() {
{/* */} -
- -
- -
+
diff --git a/src/pages/buildpc/CompareBuildpc.tsx b/src/pages/buildpc/CompareBuildpc.tsx new file mode 100644 index 0000000..571ea32 --- /dev/null +++ b/src/pages/buildpc/CompareBuildpc.tsx @@ -0,0 +1,112 @@ +import { ListCompare } from "../../components/buildpc/ListCompare"; + +export function CompareBuildpc() { + return ( + + ); +} diff --git a/src/pages/buildpc/DetailBuildpc.tsx b/src/pages/buildpc/DetailBuildpc.tsx new file mode 100644 index 0000000..3d56262 --- /dev/null +++ b/src/pages/buildpc/DetailBuildpc.tsx @@ -0,0 +1,424 @@ +import { useState } from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { FreeMode, Navigation, Thumbs } from "swiper/modules"; + +export function DetailBuildpc() { + const [thumbsSwiper, setThumbsSwiper] = useState(null); + + return ( +
+
+ + +

+ Tham khảo giá sản phẩm +

+ +
+
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ +
+
+ Người đánh giá +
+ (40 ratings, 4.9 + ) +
+
+
+
+

+ 5 sao +

+
+
+
+
+

+ 97% +

+
+
+

+ 4 sao +

+
+
+
+
+

+ 97% +

+
+
+

+ 3 sao +

+
+
+
+
+

+ 97% +

+
+
+

+ 2 sao +

+
+
+
+
+

+ 97% +

+
+
+

+ 1 sao +

+
+
+
+
+

+ 97% +

+
+
+
+
+
+
+ Nhà cung cấp + Giá gốc + Khuyến mãi + Tình trạng + Giao hàng + Thành tiền +
+
+
+ + + +
3.700.000Vnđ
+
20%
+
Còn hàng
+
Liên hệ
+
+
3.000.000Vnđ
+ + Mua ngay + +
+
+
+ + + +
3.700.000Vnđ
+
20%
+
Còn hàng
+
free
+
+
3.000.000Vnđ
+ + Mua ngay + +
+
+
+
+
+ +
+
+

+ Thông số kỹ thuật +

+
+
+ Manufacturer +

AMD

+
+
+ Part # +
    +
  • 100-1000001084WOF
    • +
  • AMD Ryzen 7 9800X3D
    • +
  • 100-100001084WOF
    • +
+
+
+ Series +

AMD Ryzen 7

+
+
+ Microarchitecture +

Zen 5

+
+
+ Core Family +

Granite Ridge

+
+
+ Socket +

AM5

+
+
+ Core +

8

+
+
+ Thread Count +

16

+
+
+ Performance Core Clock +

4.7 GHz

+
+
+ Performance Core Boost Clock +

5.2 GHz

+
+
+ L2 Cache +

8 MB

+
+
+ L3 Cache +

96 MB

+
+
+ TDP +

120 W

+
+
+ Integrated Graphics +

Radeon

+
+
+
+
+ +
+
+
+ avartar +
+ +
+
+
+ Dino +

+ 10:00pm 20/02/2025 +

+

+ Lorem Ipsum is simply dummy text of the printing and + typesetting industry. Lorem Ipsum has been the industry's + standard dummy text ever since the 1500s, when an unknown + printer took a galley of type and scrambled it to make a + type specimen book. I +

+
+
+ 120 + +
+
+ 120 + +
+
+
+
+
+
+
+
+
+ ); +} diff --git a/template/buildpc/buildpc-detail.html b/template/buildpc/buildpc-detail.html index dd438d0..8ebade1 100644 --- a/template/buildpc/buildpc-detail.html +++ b/template/buildpc/buildpc-detail.html @@ -303,7 +303,6 @@
-