update

src/pages/Home/index.tsx

@@ -1,39 +1,36 @@
-import preactLogo from '../../assets/preact.svg';
-import './style.css';
+import "./style.css";
 
 export function Home() {
-	return (
-		<div class="home">
-			<a href="https://preactjs.com" target="_blank">
-				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
-			</a>
-			<h1>Get Started building Vite-powered Preact Apps </h1>
-			<section>
-				<Resource
-					title="Learn Preact"
-					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
-					href="https://preactjs.com/tutorial"
-				/>
-				<Resource
-					title="Differences to React"
-					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
-					href="https://preactjs.com/guide/v10/differences-to-react"
-				/>
-				<Resource
-					title="Learn Vite"
-					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
-					href="https://vitejs.dev"
-				/>
-			</section>
-		</div>
-	);
+  return (
+    <div class="home">
+      <a href="https://preactjs.com" target="_blank"></a>
+      <h1>Get Started building Vite-powered Preact Apps </h1>
+      <section>
+        <Resource
+          title="Learn Preact"
+          description="If you're new to Preact, try the interactive tutorial to learn important concepts"
+          href="https://preactjs.com/tutorial"
+        />
+        <Resource
+          title="Differences to React"
+          description="If you're coming from React, you may want to check out our docs to see where Preact differs"
+          href="https://preactjs.com/guide/v10/differences-to-react"
+        />
+        <Resource
+          title="Learn Vite"
+          description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
+          href="https://vitejs.dev"
+        />
+      </section>
+    </div>
+  );
 }
 
 function Resource(props) {
-	return (
-		<a href={props.href} target="_blank" class="resource">
-			<h2>{props.title}</h2>
-			<p>{props.description}</p>
-		</a>
-	);
+  return (
+    <a href={props.href} target="_blank" class="resource">
+      <h2>{props.title}</h2>
+      <p>{props.description}</p>
+    </a>
+  );
 }

src/pages/product/ProductPage.jsx

@@ -0,0 +1,34 @@
+import "./style.css";
+
+const ProductPage = () => {
+  const { id } = useParams(); // Lấy id sản phẩm từ URL
+
+  const product = {
+    id: id,
+    name: `Product ${id}`,
+    description: "Detailed description of the product.",
+    price: 99.99,
+    imageUrl: "https://via.placeholder.com/400",
+    features: ["Feature 1", "Feature 2", "Feature 3"],
+    reviews: [
+      { text: "Great product!", rating: 5 },
+      { text: "Good value for money.", rating: 4 },
+      { text: "Could be better.", rating: 3 },
+    ],
+  };
+
+  return (
+    <div className="product-page">
+      <ProductImage imageUrl={product.imageUrl} altText={product.name} />
+      <ProductDetail
+        name={product.name}
+        description={product.description}
+        price={product.price}
+      />
+      <ProductFeatures features={product.features} />
+      <ProductReviews reviews={product.reviews} />
+    </div>
+  );
+};
+
+export default ProductPage;