diff --git a/src/components/home/Product/index.tsx b/src/components/home/Product/index.tsx index f6df0d5..0616220 100644 --- a/src/components/home/Product/index.tsx +++ b/src/components/home/Product/index.tsx @@ -2,7 +2,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'; import { Navigation, Pagination, Autoplay } from 'swiper/modules'; import { categories } from "@/data/categories" -import { productList } from '@/data/products'; +import { productList } from '@/data/productList'; import CategoryIcon from "./CategoryIcon" import ProductItem from "@/components/shared/ProductItem" import Link from 'next/link'; diff --git a/src/components/product/Category/Banner/index.tsx b/src/components/product/Category/Banner/index.tsx index 32e82a0..4c88d13 100644 --- a/src/components/product/Category/Banner/index.tsx +++ b/src/components/product/Category/Banner/index.tsx @@ -1,19 +1,55 @@ -export default function Banner() { +'use client'; + +import Link from "next/link"; +import Image from 'next/image'; +import { banner } from "@/data/banner"; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Navigation, Pagination, Autoplay } from 'swiper/modules'; + +export default function Banner( {id}:any ) { + const { banner_category_2020 } = banner.product_list; + + const categoryBanner = banner_category_2020.filter((item: any) => { + const category_list = item.category_list.split(','); + return category_list.includes(String(id)); + }); + return ( -
-
-
- - - -
-
+
+ + { + categoryBanner.map((item:any) => + + + {item.name} + + + ) + } + +
) } \ No newline at end of file diff --git a/src/components/product/Category/FAQ/index.tsx b/src/components/product/Category/FAQ/index.tsx index 5d4cfbf..3a05b19 100644 --- a/src/components/product/Category/FAQ/index.tsx +++ b/src/components/product/Category/FAQ/index.tsx @@ -1,35 +1,55 @@ -export default function FAQ() { +'use client'; +import { useState, useEffect } from "react"; + +export default function FAQ({ faq }: any) { + + const [openIds, setOpenIds] = useState([]); + + const toggle = (id: number) => { + setOpenIds(prev => + prev.includes(id) + ? prev.filter(i => i !== id) + : [...prev, id] + ); + }; + + return (

Các câu hỏi thường gặp

+

- Nếu quý khách còn có bất kì câu hỏi nào cần hỗ trợ, vui lòng liên hệ với - chúng tôi qua các số hotline để được tư vấn và giải đáp nhanh chóng - nhất. + Nếu quý khách còn có bất kì câu hỏi nào cần hỗ trợ, vui lòng liên hệ với chúng tôi qua các số hotline để được tư vấn và giải đáp nhanh chóng nhất.

+ + { + faq.map((item: any) => { + const isOpen = openIds.includes(item.id); -
- -

- Có thể kiểm tra tính tương thích của linh kiện trước khi đặt không? -

+

+ {item.title} +

-
-

Có. Chúng tôi cung cấp công cụ "Build PC" để bạn dễ dàng chọn và kiểm - tra tính tương thích giữa CPU, mainboard, RAM, GPU, và các linh kiện - khác trước khi mua hàng. -

-
-
+
+ {item.content} +
+
+ ) + }) + }
) } \ No newline at end of file diff --git a/src/components/product/Category/Filter/FilterItem.jsx b/src/components/product/Category/Filter/FilterItem.jsx new file mode 100644 index 0000000..52bb981 --- /dev/null +++ b/src/components/product/Category/Filter/FilterItem.jsx @@ -0,0 +1,12 @@ +import Link from "next/link" + +export default function FilterItem( {item} ) { + return ( + + {item.name} + ({item.count}) + + ) +} \ No newline at end of file diff --git a/src/components/product/Category/Filter/index.tsx b/src/components/product/Category/Filter/index.tsx index f4381ac..39eb7c6 100644 --- a/src/components/product/Category/Filter/index.tsx +++ b/src/components/product/Category/Filter/index.tsx @@ -1,195 +1,118 @@ -export default function ProductFilter({data}: any) { - console.log( data) +'use client'; +import Link from "next/link"; +import FilterItem from "./FilterItem"; +import { normalizeKey } from "@/lib/utils"; +import { useSearchParams } from 'next/navigation'; + +export default function ProductFilter({ data }: any) { + + const searchParams = useSearchParams(); + const hasFilter = searchParams.toString().length > 0; + + const { + current_category, + attribute_filter_list, + brand_filter_list, + price_filter_list + } = data; + + const categoryList = current_category.children && current_category.children.length > 0 + ? current_category.children + : current_category.same_parent_categories; + return ( <>

Lọc sản phẩm

- +
-
-

Danh mục

-

- - Tất cả -

-
- - {" "} - {" "} -

Photo Editing

- - - {" "} - {" "} -

PC Video Editing

- - - {" "} - {" "} -

PC 3D Design, Animation

- - - {" "} - {" "} -

PC Rendering

- - - {" "} - {" "} -

PC Visualization

- - - {" "} - {" "} -

PC Architecture & CAD

- - - {" "} - {" "} -

PC Machine Learning / AI

- - - {" "} - {" "} -

Server, Máy Ảo, Giả Lập

- - - {" "} - {" "} -

PC Đẹp

- -
-
+ {categoryList.length > 0 && +
+

Danh mục

- +

+ + Tất cả +

-
-

Thương hiệu

-
- - GIGABYTE - (2) - - - HP - (1) - - - MSI - (1) - +
+ { + categoryList.map((category: any) => ( + + +

{category.title}

+ + )) + } +
-
+ } -
-

CPU

-
- - Intel Core i7 - (13) - - - Intel Core i9 - (20) - - - Intel Xeon - (16) - - - AMD Ryzen 7 - (5) - - - AMD Ryzen 9 - (21) - - - AMD Ryzen Threadripper - (8) - - - Core Ultra 9 - (18) - - - Core Ultra 7 - (10) - + {price_filter_list && price_filter_list.length > 0 && +
+

Khoảng giá

+ +
+ { + price_filter_list.map((price: any) => + + ) + } +
-
+ } - - Bỏ bộ lọc (1) - + {brand_filter_list && brand_filter_list.length > 0 && +
+

Thương hiệu

+ +
+ { + brand_filter_list.map((brand: any) => + + ) + } +
+
+ } + + {attribute_filter_list && attribute_filter_list.length > 0 && + attribute_filter_list.map((attr: any) => +
+

{attr.name}

+ +
+ { + attr.value_list.map((item: any) => + + ) + } +
+
+ ) + } + + {hasFilter && + + Bỏ bộ lọc + + }
) diff --git a/src/components/product/Category/Sort/index.tsx b/src/components/product/Category/Sort/index.tsx index 9141ede..06fbc60 100644 --- a/src/components/product/Category/Sort/index.tsx +++ b/src/components/product/Category/Sort/index.tsx @@ -1,43 +1,46 @@ -export default function SortByCollection() { +'use client'; +import Link from "next/link"; +import { usePathname, useSearchParams } from 'next/navigation'; + +export default function SortByCollection({ + sort, + total +} : any ) { + + const pathname = usePathname(); + const searchParams = useSearchParams(); + const fullUrl = `${pathname}?${searchParams.toString()}`; + return (
-

Tổng 124 sản phẩm

+

Tổng {total} sản phẩm

-
-

Lọc theo:

-
-

- Lựa chọn {" "} - -

-
- - Mức độ phổ biến - - - Giá tăng dần - - - Giá giảm dần - - - % Giảm giá nhiều - + {sort.length > 0 && +
+

Lọc theo:

+ +
+

+ Lựa chọn + +

+ +
+ { + sort.map( (item:any) => ( + + {item.name} + + )) + } +
+
-
-
+ }
) } \ No newline at end of file diff --git a/src/components/product/Category/Static/index.tsx b/src/components/product/Category/Static/index.tsx index 8ca7da6..af3dd19 100644 --- a/src/components/product/Category/Static/index.tsx +++ b/src/components/product/Category/Static/index.tsx @@ -1,29 +1,60 @@ -export default function Static( {data}:any ) { +'use client'; + +import { useState, useEffect, useRef } from "react"; + +export default function Static({ data }: any) { + const contentRef = useRef(null); + const containerRef = useRef(null); + + const [isOverflow, setIsOverflow] = useState(false); + const [expanded, setExpanded] = useState(false); + + useEffect(() => { + if (contentRef.current) { + if (contentRef.current.scrollHeight > 700) { + setIsOverflow(true); + } + } + }, [data]); + + const handleCollapse = () => { + setExpanded(false); + + containerRef.current?.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); + }; + return ( -
-
-
+
+
+
-
- - -
+ {isOverflow && ( +
+ {!expanded ? ( + + ) : ( + + )} +
+ )}
- ) -} \ No newline at end of file + ); +} diff --git a/src/components/product/Category/index.tsx b/src/components/product/Category/index.tsx index beee2f0..e907c53 100644 --- a/src/components/product/Category/index.tsx +++ b/src/components/product/Category/index.tsx @@ -6,9 +6,20 @@ import FAQ from "./faq"; import Banner from "./banner"; import SortByCollection from "./sort"; import ProductList from "./productList"; +import { productList } from "@/data/productList"; export default function ProductCategory({ slug }: any) { - const { name,id, static_html } = productCategory.current_category + + const { name, + id, + sort_by_collection, + static_html, + extend + } = productCategory.current_category; + + const productsFilter = productList.find(item => item.id === id)?.list || []; + const total = productsFilter?.length; + return(

@@ -17,16 +28,16 @@ export default function ProductCategory({ slug }: any) {
- +
- + - + - +
{static_html && @@ -35,7 +46,9 @@ export default function ProductCategory({ slug }: any) {
- + { extend && + + }

) } \ No newline at end of file diff --git a/src/components/product/Category/productList/index.tsx b/src/components/product/Category/productList/index.tsx index d7a9cfa..4fedcbd 100644 --- a/src/components/product/Category/productList/index.tsx +++ b/src/components/product/Category/productList/index.tsx @@ -1,6 +1,6 @@ 'use client'; import { useState } from "react"; -import { productList } from "@/data/products"; +import { productList } from "@/data/productList"; import ProductItem from "@/components/shared/ProductItem"; const PRODUCT_PER_PAGE = 30; diff --git a/src/components/product/detail/article/index.tsx b/src/components/product/detail/article/index.tsx new file mode 100644 index 0000000..6a1d761 --- /dev/null +++ b/src/components/product/detail/article/index.tsx @@ -0,0 +1,138 @@ +export default function Article() { + return ( +
+

Tin tức mới nhất

+ {/* limit: 5 */} +
+
+ + + +
+ +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum + quidem asperiores provident dicta veniam deleniti eaque + repudiandae cum esse, ducimus officiis quibusdam pariatur + neque voluptates voluptas. Quisquam qui minus dolorum? +

+ +
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, + obcaecati ducimus veritatis aliquid sunt accusamus unde nisi + nostrum fugit facere illo quos. Ad error suscipit, quidem optio + aut laudantium at! +
+
+ + + + Mai Văn Học +
+
+
+
+ + + +
+ +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum + quidem asperiores provident dicta veniam deleniti eaque + repudiandae cum esse, ducimus officiis quibusdam pariatur + neque voluptates voluptas. Quisquam qui minus dolorum? +

+ +
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, + obcaecati ducimus veritatis aliquid sunt accusamus unde nisi + nostrum fugit facere illo quos. Ad error suscipit, quidem optio + aut laudantium at! +
+
+ + + + Mai Văn Học +
+
+
+
+ + + +
+ +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum + quidem asperiores provident dicta veniam deleniti eaque + repudiandae cum esse, ducimus officiis quibusdam pariatur + neque voluptates voluptas. Quisquam qui minus dolorum? +

+ +
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, + obcaecati ducimus veritatis aliquid sunt accusamus unde nisi + nostrum fugit facere illo quos. Ad error suscipit, quidem optio + aut laudantium at! +
+
+ + + + Mai Văn Học +
+
+
+
+ + + +
+ +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum + quidem asperiores provident dicta veniam deleniti eaque + repudiandae cum esse, ducimus officiis quibusdam pariatur + neque voluptates voluptas. Quisquam qui minus dolorum? +

+ +
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, + obcaecati ducimus veritatis aliquid sunt accusamus unde nisi + nostrum fugit facere illo quos. Ad error suscipit, quidem optio + aut laudantium at! +
+
+ + + + Mai Văn Học +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/product/detail/button/index.tsx b/src/components/product/detail/button/index.tsx new file mode 100644 index 0000000..4b7e9ff --- /dev/null +++ b/src/components/product/detail/button/index.tsx @@ -0,0 +1,32 @@ +export default function Buttons() { + return ( + <> +
+ + + +
+ + ) +} \ No newline at end of file diff --git a/src/components/product/detail/comment/index.tsx b/src/components/product/detail/comment/index.tsx new file mode 100644 index 0000000..2b66836 --- /dev/null +++ b/src/components/product/detail/comment/index.tsx @@ -0,0 +1,161 @@ +export default function Comment() { + return ( +
+
+

0 Bình luận

+
+ + + + + + +
+
+
+