upload 16/5
This commit is contained in:
@@ -1,4 +1,9 @@
|
||||
import { useState } from "react";
|
||||
import { PopupBuildpc } from "../../components/buildpc/PopupBuildpc";
|
||||
|
||||
export function CreateBuildpc() {
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
|
||||
@@ -20,7 +25,7 @@ export function CreateBuildpc() {
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
href="/buildpc/detail"
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
@@ -32,7 +37,7 @@ export function CreateBuildpc() {
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
href="/buildpc/detail"
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
@@ -77,7 +82,7 @@ export function CreateBuildpc() {
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
href="/buildpc/detail"
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
@@ -89,7 +94,7 @@ export function CreateBuildpc() {
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
href="/buildpc/detail"
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
@@ -129,7 +134,7 @@ export function CreateBuildpc() {
|
||||
<div className="info col-span-3">
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href=""
|
||||
href="/buildpc/detail"
|
||||
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
@@ -141,7 +146,7 @@ export function CreateBuildpc() {
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
href="/buildpc/detail"
|
||||
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
@@ -180,6 +185,10 @@ export function CreateBuildpc() {
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
onClick={(e) => {
|
||||
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() {
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
className="w-[130px] h-[30px] block text-xs 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
|
||||
@@ -202,6 +215,10 @@ export function CreateBuildpc() {
|
||||
<div className="right w-[calc(100%-200px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
className="w-[130px] h-[30px] block text-xs 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
|
||||
@@ -265,6 +282,8 @@ export function CreateBuildpc() {
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- tổng tiền --> */}
|
||||
|
||||
<PopupBuildpc show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export function CompareBuildpc() {
|
||||
export function ListCompare() {
|
||||
return (
|
||||
<div className="list-component mt-5">
|
||||
<div className="item-compare mb-12">
|
||||
832
src/components/buildpc/PopupBuildpc.tsx
Normal file
832
src/components/buildpc/PopupBuildpc.tsx
Normal file
@@ -0,0 +1,832 @@
|
||||
export function PopupBuildpc({ show, onClose }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="backgroundPopup"
|
||||
className={`${show ? "active" : ""}`}
|
||||
onClick={onClose}
|
||||
></div>
|
||||
<div
|
||||
className={`fixed w-[1400px] bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[999] ${
|
||||
show ? "" : "hidden"
|
||||
}`}
|
||||
id="js-modal-popup"
|
||||
>
|
||||
<div className="header-popup p-[10px] bg-[var(--color-global)] flex items-center justify-between">
|
||||
<b className="w-[205px] mr-[15px] text-white">Chọn linh kiện</b>
|
||||
|
||||
<div className="w-[calc(100%-275px)] relative input-search">
|
||||
<form
|
||||
action="/search"
|
||||
enctype="text/plain"
|
||||
method="get"
|
||||
className="relative w-full h-[45px] bg-white rounded-[3px] overflow-hidden"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Bạn cần tìm linh kiện gì..."
|
||||
className="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]"
|
||||
>
|
||||
<i className="icon_2025 search "></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
onClick={onClose}
|
||||
className="w-[54px] flex items-center justify-end"
|
||||
>
|
||||
<i className="icon_2025 close brightness-0 invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="content-popup p-[10px] bg-white">
|
||||
<div className="flex gap-[15px]">
|
||||
<div className="left w-[205px]">
|
||||
<b className="">230 sản phẩm</b>
|
||||
<div className="mt-3 title-filter flex items-center justify-between px-[20px] bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
||||
<b className="text-xl">Bộ lọc</b>
|
||||
<i className="icon_2025 filter"></i>
|
||||
</div>
|
||||
<div className="list-filter h-[calc(100vh-208px)] overflow-auto">
|
||||
<div className="item-filter mb-2.5">
|
||||
<h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div className="mt-2.5 text-base leading-8 text-black">
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle1"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle1"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle2"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle2"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle3"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle3"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle4"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle4"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle5"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle5"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-filter mb-2.5">
|
||||
<h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div className="mt-2.5 grid grid-flow-col grid-rows-9 text-base leading-8 text-black">
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle1"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle1"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
All
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle2"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle2"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
32gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle3"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle3"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
64bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle4"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle4"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
16bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle5"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle5"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
12gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
4gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
2gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
24gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle2"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle2"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
32gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle3"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle3"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
64bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle4"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle4"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
16bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle5"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle5"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
12gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
4gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
2gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
24gb
|
||||
</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right w-[calc(100%-220px)]">
|
||||
<div className="flex gap-[15px]">
|
||||
<a href="" className="text-[var(--color-hover)]">
|
||||
Chọn tất cả
|
||||
</a>
|
||||
<a href="">Bỏ chọn tất cả</a>
|
||||
<a href="">So sánh sản phẩm đã chọn</a>
|
||||
</div>
|
||||
<div className="mt-3 relative z-[9] grid grid-cols-11 bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
||||
<b className="col-span-3 text-center">Tên</b>
|
||||
<b>Dung lượng</b>
|
||||
<b>Thế hệ</b>
|
||||
<b>Bộ nhớ</b>
|
||||
<b>Độ ồn</b>
|
||||
<b>Màu sắc</b>
|
||||
<b>Đánh giá</b>
|
||||
<b className="col-span-2">Thành tiền</b>
|
||||
</div>
|
||||
<div className="list mt-3 h-[calc(100vh-208px)] overflow-auto">
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/lienkien-ram.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-full h-full object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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() {
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/product-detail" component={ProductDetail} />
|
||||
<Route path="/buildpc" component={Buildpc} />
|
||||
<Route path="/buildpc/compare" component={CompareBuildpc} />
|
||||
<Route path="/buildpc/detail" component={DetailBuildpc} />
|
||||
<Route default component={NotFound} />
|
||||
</Router>
|
||||
<Footer />
|
||||
|
||||
@@ -104,11 +104,7 @@ export function Buildpc() {
|
||||
</div>
|
||||
{/* <!-- list button --> */}
|
||||
|
||||
<div className="content-tab" id="create-component">
|
||||
<CreateBuildpc />
|
||||
</div>
|
||||
|
||||
<div className="content-tab hidden" id="compare-component"></div>
|
||||
<CreateBuildpc />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
112
src/pages/buildpc/CompareBuildpc.tsx
Normal file
112
src/pages/buildpc/CompareBuildpc.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { ListCompare } from "../../components/buildpc/ListCompare";
|
||||
|
||||
export function CompareBuildpc() {
|
||||
return (
|
||||
<div className="page-buildpc bg-[#F4F4F4] pb-[100px]">
|
||||
<div className="container">
|
||||
<div className="breadcrumb p-[12px_0]">
|
||||
<ol
|
||||
itemscope
|
||||
itemtype="http://schema.org/BreadcrumbList"
|
||||
className="ul flex flex-wrap items-center"
|
||||
>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/template/homepage/homepage.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center text-[#637381]"
|
||||
>
|
||||
<span itemprop="name">
|
||||
<span style="font-size: 0; display: none;">Trang chủ</span>
|
||||
<i className="icon_2025 home mr-[5px] mb-[5px]" />
|
||||
</span>
|
||||
</a>{" "}
|
||||
<i className="icon_2025 angle-right ml-[12px]" />
|
||||
<meta itemprop="position" content="1" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a href="/" itemprop="item" className="nopad-l flex items-center">
|
||||
<span itemprop="name">So sánh giá tại các cửa hàng</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
{/* <!-- Action Bar --> */}
|
||||
<div className="flex gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
|
||||
<div className="w-[615px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
||||
<a className="w-[24px] ml-[10px]" href="javascript:void()">
|
||||
<i className="icon_2025 copy"></i>
|
||||
</a>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full h-full p-[10px] outline-none"
|
||||
value="https://bestpc.vn/restricted.php"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[370px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
||||
<p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full h-full p-[10px] outline-none"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-[10px] w-[calc(100%-615px-370px)]">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
|
||||
>
|
||||
<i className="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span className="ml-[5px]">Lịch sử</span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
|
||||
>
|
||||
<i className="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span className="ml-[5px]">Tải xuống</span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
|
||||
>
|
||||
<i className="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span className="ml-[5px]">Làm mới</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-[15px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href="/buildpc"
|
||||
className="px-6 py-2.5 text-center font-bold text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900"
|
||||
>
|
||||
Bắt đầu tạo
|
||||
</a>
|
||||
<a
|
||||
href="/buildpc/compare"
|
||||
className="px-6 py-2.5 text-center font-bold bg-violet-900 text-white rounded"
|
||||
>
|
||||
So sánh giá tại các cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- list button --> */}
|
||||
|
||||
<ListCompare />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
424
src/pages/buildpc/DetailBuildpc.tsx
Normal file
424
src/pages/buildpc/DetailBuildpc.tsx
Normal file
@@ -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 (
|
||||
<div className="page-buildpc pb-[100px]">
|
||||
<div className="container">
|
||||
<div className="breadcrumb p-[12px_0]">
|
||||
<ol
|
||||
itemscope
|
||||
itemtype="http://schema.org/BreadcrumbList"
|
||||
className="ul flex flex-wrap items-center"
|
||||
>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/template/homepage/homepage.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center text-[#637381]"
|
||||
>
|
||||
<span itemprop="name">
|
||||
<span style="font-size: 0; display: none;">Trang chủ</span>
|
||||
<i className="icon_2025 home mr-[5px] mb-[5px]" />
|
||||
</span>
|
||||
</a>{" "}
|
||||
<i className="icon_2025 angle-right ml-[12px]" />
|
||||
<meta itemprop="position" content="1" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a href="/" itemprop="item" className="nopad-l flex items-center">
|
||||
<span itemprop="name">Tạo máy tính riêng của bạn</span>
|
||||
</a>{" "}
|
||||
<i className="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a href="/" itemprop="item" className="nopad-l flex items-center">
|
||||
<span itemprop="name">Tham khảo giá sản phẩm</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="3" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl mb-5 block font-bold">
|
||||
Tham khảo giá sản phẩm
|
||||
</h1>
|
||||
|
||||
<div className="flex gap-[20px] mb-[30px]">
|
||||
<div className="w-[450px] p-[15px] rounded-[8px] border border-[#d7d7d7]">
|
||||
<Swiper
|
||||
spaceBetween={10}
|
||||
navigation={true}
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="swiper"
|
||||
id="js-slider-build-big"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/big-product-detail.png"
|
||||
className="block w-full h-[400px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/big-product-detail.png"
|
||||
className="block w-full h-[400px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/big-product-detail.png"
|
||||
className="block w-full h-[400px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/big-product-detail.png"
|
||||
className="block w-full h-[400px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="relative mt-[12px] w-[80%] mx-[auto]">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
spaceBetween={10}
|
||||
slidesPerView={3}
|
||||
navigation={{
|
||||
prevEl: "#btn-slider-small .swiper-button-prev", // Link to the 'prev' button
|
||||
nextEl: "#btn-slider-small .swiper-button-next", // Link to the 'next' button
|
||||
}}
|
||||
freeMode={true}
|
||||
watchSlidesProgress={true}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
className="swiper"
|
||||
id="js-slider-build-small"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-full block h-[80px] object-contain "
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-full block h-[80px] object-contain "
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-full block h-[80px] object-contain "
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-full block h-[80px] object-contain "
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-full block h-[80px] object-contain "
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-full block h-[80px] object-contain "
|
||||
alt=""
|
||||
/>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="btn-small" id="btn-slider-small">
|
||||
<div className="swiper-button-next right-[-15px] w-[25px] h-[25px]"></div>
|
||||
<div className="swiper-button-prev left-[-15px] w-[25px] h-[25px] text-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="box-review mt-3">
|
||||
<div className="flex items-center justify-center">
|
||||
<b>Người đánh giá</b>
|
||||
<div className="flex items-center ml-[10px]">
|
||||
(40 ratings, 4.9 <i className="icon-star star-small ml-1"></i>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<div className="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p className="w-[11%] text-[var(--color-hover)] font-bold">
|
||||
5 sao
|
||||
</p>
|
||||
<div className="relative w-[79%]">
|
||||
<div className="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p className="text-[var(--color-hover)] w-[9%] font-bold">
|
||||
97%
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p className="w-[11%] text-[var(--color-hover)] font-bold">
|
||||
4 sao
|
||||
</p>
|
||||
<div className="relative w-[79%]">
|
||||
<div className="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p className="text-[var(--color-hover)] w-[9%] font-bold">
|
||||
97%
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p className="w-[11%] text-[var(--color-hover)] font-bold">
|
||||
3 sao
|
||||
</p>
|
||||
<div className="relative w-[79%]">
|
||||
<div className="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p className="text-[var(--color-hover)] w-[9%] font-bold">
|
||||
97%
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p className="w-[11%] text-[var(--color-hover)] font-bold">
|
||||
2 sao
|
||||
</p>
|
||||
<div className="relative w-[79%]">
|
||||
<div className="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p className="text-[var(--color-hover)] w-[9%] font-bold">
|
||||
97%
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p className="w-[11%] text-[var(--color-hover)] font-bold">
|
||||
1 sao
|
||||
</p>
|
||||
<div className="relative w-[79%]">
|
||||
<div className="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p className="text-[var(--color-hover)] w-[9%] font-bold">
|
||||
97%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-565px)]">
|
||||
<div className="grid grid-cols-7 gap-[5px] items-center pb-2.5 border-b-[1px] border-[#ababab]">
|
||||
<b>Nhà cung cấp</b>
|
||||
<b>Giá gốc</b>
|
||||
<b>Khuyến mãi</b>
|
||||
<b>Tình trạng</b>
|
||||
<b>Giao hàng</b>
|
||||
<b className="col-span-2">Thành tiền</b>
|
||||
</div>
|
||||
<div className="list">
|
||||
<div className="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
|
||||
<a href="" className="block">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-full block h-[28px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<div className="price font-bold">3.700.000Vnđ</div>
|
||||
<div className="saleoff text-center font-bold">20%</div>
|
||||
<div className="status text-blue-500 font-bold">Còn hàng</div>
|
||||
<div className="ship underline">Liên hệ</div>
|
||||
<div className="flex items-center justify-between col-span-2">
|
||||
<div className="total-price font-bold">3.000.000Vnđ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
|
||||
<a href="" className="block">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-full block h-[28px] object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<div className="price font-bold">3.700.000Vnđ</div>
|
||||
<div className="saleoff text-center font-bold">20%</div>
|
||||
<div className="status text-red-500 font-bold">Còn hàng</div>
|
||||
<div className="ship underline text-green-500">free</div>
|
||||
<div className="flex items-center justify-between col-span-2">
|
||||
<div className="total-price font-bold">3.000.000Vnđ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800"
|
||||
>
|
||||
Mua ngay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-[20px]">
|
||||
<div className="w-[450px]">
|
||||
<h3 className="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">
|
||||
Thông số kỹ thuật
|
||||
</h3>
|
||||
<div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Manufacturer</b>
|
||||
<p>AMD</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Part #</b>
|
||||
<ul>
|
||||
<li>100-1000001084WOF</li>
|
||||
<li>AMD Ryzen 7 9800X3D</li>
|
||||
<li>100-100001084WOF</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Series</b>
|
||||
<p>AMD Ryzen 7</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Microarchitecture</b>
|
||||
<p>Zen 5</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Core Family</b>
|
||||
<p>Granite Ridge</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Socket</b>
|
||||
<p>AM5</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Core</b>
|
||||
<p>8</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Thread Count</b>
|
||||
<p>16</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Performance Core Clock</b>
|
||||
<p>4.7 GHz</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Performance Core Boost Clock</b>
|
||||
<p>5.2 GHz</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>L2 Cache</b>
|
||||
<p>8 MB</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>L3 Cache</b>
|
||||
<p>96 MB</p>
|
||||
</div>
|
||||
<div className="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>TDP</b>
|
||||
<p>120 W</p>
|
||||
</div>
|
||||
<div className="item py-2">
|
||||
<b>Integrated Graphics</b>
|
||||
<p>Radeon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-470px)]">
|
||||
<div className="flex items-center justify-between pb-2.5 border-b-[1px] border-[#ababab]">
|
||||
<h3 className="title text-2xl font-bold">Đánh giá</h3>
|
||||
<a
|
||||
href=""
|
||||
className="inline-block py-1 px-5 bg-blue-600 text-white font-bold rounded-[4px] hover:bg-blue-800"
|
||||
>
|
||||
Xem tất cả bình luận
|
||||
</a>
|
||||
</div>
|
||||
<div className="list mt-3">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-1.png"
|
||||
width="75px"
|
||||
height="75px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<div className="mt-[10px]">
|
||||
<i className="icon-star star5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<b className="mb-[10px]">Dino</b>
|
||||
<p className="mb-[10px] block text-[#747474]">
|
||||
10:00pm 20/02/2025
|
||||
</p>
|
||||
<p className="content mb-[5px]">
|
||||
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
|
||||
</p>
|
||||
<div className="btn flex items-center">
|
||||
<div className="flex items-center mr-[10px]">
|
||||
<b className="mr-[5px]">120</b>
|
||||
<i className="icon_2025 view"></i>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<b className="mr-[5px]">120</b>
|
||||
<i className="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user