diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..b0e8492
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+ "prettier.useTabs": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.formatOnSave": true,
+ "[typescriptreact]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
+}
diff --git a/next.config.ts b/next.config.ts
index 62060af..24bb1eb 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,12 +1,12 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{
- protocol: "https",
- hostname: "nguyencongpc.vn",
- pathname: "/**", // Cho phép tất cả đường dẫn từ domain này
+ protocol: 'https',
+ hostname: 'nguyencongpc.vn',
+ pathname: '/**',
},
],
},
diff --git a/package-lock.json b/package-lock.json
index 2960daf..dd994f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "nguyencongpc",
"version": "0.1.0",
"dependencies": {
+ "@tippyjs/react": "^4.2.6",
"next": "16.0.10",
"postcss": "^8.5.6",
"react": "19.2.1",
@@ -1234,6 +1235,16 @@
"node": ">=12.4.0"
}
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "license": "MIT",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/@rtsao/scc": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1521,6 +1532,19 @@
"tailwindcss": "4.1.18"
}
},
+ "node_modules/@tippyjs/react": {
+ "version": "4.2.6",
+ "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
+ "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
+ "license": "MIT",
+ "dependencies": {
+ "tippy.js": "^6.3.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/@tybys/wasm-util": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -6253,6 +6277,15 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
+ "node_modules/tippy.js": {
+ "version": "6.3.7",
+ "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+ "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@popperjs/core": "^2.9.0"
+ }
+ },
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 1b3df12..eba7400 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "eslint"
},
"dependencies": {
+ "@tippyjs/react": "^4.2.6",
"next": "16.0.10",
"postcss": "^8.5.6",
"react": "19.2.1",
diff --git a/src/app/(size)/layout.tsx b/src/app/(size)/layout.tsx
index 1769752..c2f976f 100644
--- a/src/app/(size)/layout.tsx
+++ b/src/app/(size)/layout.tsx
@@ -5,9 +5,10 @@ import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import '@styles/globals.css';
-import Header from '@components/layout/Header';
+import Header from '@/components/layout/other/Header';
+import Footer from '@/components/layout/other/Footer';
-import PreLoader from '@components/Common/PreLoader';
+import PreLoader from '@components/common/PreLoader';
export default function RootLayout({
children,
@@ -29,6 +30,7 @@ export default function RootLayout({
<>
{children}
+
)}
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
new file mode 100644
index 0000000..b22e3cf
--- /dev/null
+++ b/src/app/[...slug]/page.tsx
@@ -0,0 +1,53 @@
+'use client';
+import React from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { findCategoryBySlug } from '@/lib/category';
+
+const CategoryPage: React.FC = () => {
+ const params = useParams();
+ const slugArray = params?.slug as string[];
+
+ // tìm danh mục hiện tại theo slug
+ const category: Category | null = findCategoryBySlug(slugArray, categories);
+
+ if (!category) {
+ return (
+