update 7/5
This commit is contained in:
@@ -1,36 +1,8 @@
|
||||
import "./style.css";
|
||||
|
||||
export function Home() {
|
||||
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>
|
||||
<h1>Get Started building Vite-powered Preact Apps chào xìn</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Resource(props) {
|
||||
return (
|
||||
<a href={props.href} target="_blank" class="resource">
|
||||
<h2>{props.title}</h2>
|
||||
<p>{props.description}</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
img {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
filter: drop-shadow(0 0 2em #673ab8aa);
|
||||
}
|
||||
|
||||
.home section {
|
||||
margin-top: 5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.resource {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.resource:hover {
|
||||
border: 1px solid #000;
|
||||
box-shadow: 0 25px 50px -12px #673ab888;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.home section {
|
||||
margin-top: 5rem;
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.resource {
|
||||
color: #ccc;
|
||||
background-color: #161616;
|
||||
}
|
||||
.resource:hover {
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
}
|
||||
@@ -1,34 +1,68 @@
|
||||
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 },
|
||||
],
|
||||
};
|
||||
import { h } from "preact";
|
||||
|
||||
export function ProductDetail() {
|
||||
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 className="box-product-detail bg-[#F4F4F4]">
|
||||
<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="/"
|
||||
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="/man-hinh.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center"
|
||||
>
|
||||
<span itemprop="name">Màn hình máy tính</span>
|
||||
<i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
|
||||
</a>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
<li
|
||||
itemprop="itemListElement"
|
||||
itemscope
|
||||
itemtype="http://schema.org/ListItem"
|
||||
className="flex items-center pr-[12px]"
|
||||
>
|
||||
<a
|
||||
href="/aivision.html"
|
||||
itemprop="item"
|
||||
className="nopad-l flex items-center"
|
||||
>
|
||||
<span itemprop="name">AIVISION</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="3" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductPage;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user