asd
This commit is contained in:
parent
a6d820e99d
commit
6c090f8192
2 changed files with 48 additions and 426 deletions
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { productsData } from "../data";
|
||||
import { page } from "$app/stores";
|
||||
import { Label, Input, Button, Modal } from "flowbite-svelte";
|
||||
import { Label, Input, Button, Modal, Img } from "flowbite-svelte";
|
||||
|
||||
const params = $page.params;
|
||||
const item = productsData.find((p) => p.id === params.id);
|
||||
|
@ -75,40 +75,7 @@
|
|||
<div
|
||||
class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:px-8"
|
||||
>
|
||||
<div
|
||||
class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block"
|
||||
>
|
||||
<img
|
||||
src="https://tailwindui.com/img/ecommerce-images/product-page-02-secondary-product-shot.jpg"
|
||||
alt="Two each of gray, white, and black shirts laying flat."
|
||||
class="h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden lg:grid lg:grid-cols-1 lg:gap-y-8">
|
||||
<div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
|
||||
alt="Model wearing plain black basic tee."
|
||||
class="h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-02.jpg"
|
||||
alt="Model wearing plain gray basic tee."
|
||||
class="h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="aspect-h-5 aspect-w-4 lg:aspect-h-4 lg:aspect-w-3 sm:overflow-hidden sm:rounded-lg"
|
||||
>
|
||||
<img
|
||||
src="https://tailwindui.com/img/ecommerce-images/product-page-02-featured-product-shot.jpg"
|
||||
alt="Model wearing plain white basic tee."
|
||||
class="h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<Img src="{item.src}" alt="{item.title}"/>
|
||||
</div>
|
||||
|
||||
<!-- Product info -->
|
||||
|
@ -119,380 +86,22 @@
|
|||
<h1
|
||||
class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl"
|
||||
>
|
||||
Basic Tee 6-Pack
|
||||
{item.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Options -->
|
||||
<div class="mt-4 lg:row-span-3 lg:mt-0">
|
||||
<h2 class="sr-only">Product information</h2>
|
||||
<p class="text-3xl tracking-tight text-gray-900">$192</p>
|
||||
<h2 class="sr-only">Thông tin sản phẩm </h2>
|
||||
<p class="text-3xl tracking-tight text-gray-900">{item.price} VND</p>
|
||||
|
||||
<!-- Reviews -->
|
||||
<div class="mt-6">
|
||||
<h3 class="sr-only">Reviews</h3>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<!-- Active: "text-gray-900", Default: "text-gray-200" -->
|
||||
<svg
|
||||
class="text-gray-900 h-5 w-5 flex-shrink-0"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="text-gray-900 h-5 w-5 flex-shrink-0"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="text-gray-900 h-5 w-5 flex-shrink-0"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="text-gray-900 h-5 w-5 flex-shrink-0"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="text-gray-200 h-5 w-5 flex-shrink-0"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="sr-only">4 out of 5 stars</p>
|
||||
<a
|
||||
href="#"
|
||||
class="ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500"
|
||||
>117 reviews</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="mt-10">
|
||||
<!-- Colors -->
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-900">Color</h3>
|
||||
|
||||
<fieldset class="mt-4">
|
||||
<legend class="sr-only">Choose a color</legend>
|
||||
<div class="flex items-center space-x-3">
|
||||
<!--
|
||||
Active and Checked: "ring ring-offset-1"
|
||||
Not Active and Checked: "ring-2"
|
||||
-->
|
||||
<label
|
||||
class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-400"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="color-choice"
|
||||
value="White"
|
||||
class="sr-only"
|
||||
aria-labelledby="color-choice-0-label"
|
||||
/>
|
||||
<span
|
||||
id="color-choice-0-label"
|
||||
class="sr-only">White</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="h-8 w-8 bg-white rounded-full border border-black border-opacity-10"
|
||||
/>
|
||||
</label>
|
||||
<!--
|
||||
Active and Checked: "ring ring-offset-1"
|
||||
Not Active and Checked: "ring-2"
|
||||
-->
|
||||
<label
|
||||
class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-400"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="color-choice"
|
||||
value="Gray"
|
||||
class="sr-only"
|
||||
aria-labelledby="color-choice-1-label"
|
||||
/>
|
||||
<span
|
||||
id="color-choice-1-label"
|
||||
class="sr-only">Gray</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="h-8 w-8 bg-gray-200 rounded-full border border-black border-opacity-10"
|
||||
/>
|
||||
</label>
|
||||
<!--
|
||||
Active and Checked: "ring ring-offset-1"
|
||||
Not Active and Checked: "ring-2"
|
||||
-->
|
||||
<label
|
||||
class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-900"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="color-choice"
|
||||
value="Black"
|
||||
class="sr-only"
|
||||
aria-labelledby="color-choice-2-label"
|
||||
/>
|
||||
<span
|
||||
id="color-choice-2-label"
|
||||
class="sr-only">Black</span
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="h-8 w-8 bg-gray-900 rounded-full border border-black border-opacity-10"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Sizes -->
|
||||
<div class="mt-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium text-gray-900">
|
||||
Size
|
||||
</h3>
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm font-medium text-indigo-600 hover:text-indigo-500"
|
||||
>Size guide</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<fieldset class="mt-4">
|
||||
<legend class="sr-only">Choose a size</legend>
|
||||
<div
|
||||
class="grid grid-cols-4 gap-4 sm:grid-cols-8 lg:grid-cols-4"
|
||||
>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-not-allowed bg-gray-50 text-gray-200"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="XXS"
|
||||
disabled
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-0-label"
|
||||
/>
|
||||
<span id="size-choice-0-label">XXS</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none absolute -inset-px rounded-md border-2 border-gray-200"
|
||||
>
|
||||
<svg
|
||||
class="absolute inset-0 h-full w-full stroke-2 text-gray-200"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<line
|
||||
x1="0"
|
||||
y1="100"
|
||||
x2="100"
|
||||
y2="0"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="XS"
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-1-label"
|
||||
/>
|
||||
<span id="size-choice-1-label">XS</span>
|
||||
<!--
|
||||
Active: "border", Not Active: "border-2"
|
||||
Checked: "border-indigo-500", Not Checked: "border-transparent"
|
||||
-->
|
||||
<span
|
||||
class="pointer-events-none absolute -inset-px rounded-md"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</label>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="S"
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-2-label"
|
||||
/>
|
||||
<span id="size-choice-2-label">S</span>
|
||||
<!--
|
||||
Active: "border", Not Active: "border-2"
|
||||
Checked: "border-indigo-500", Not Checked: "border-transparent"
|
||||
-->
|
||||
<span
|
||||
class="pointer-events-none absolute -inset-px rounded-md"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</label>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="M"
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-3-label"
|
||||
/>
|
||||
<span id="size-choice-3-label">M</span>
|
||||
<!--
|
||||
Active: "border", Not Active: "border-2"
|
||||
Checked: "border-indigo-500", Not Checked: "border-transparent"
|
||||
-->
|
||||
<span
|
||||
class="pointer-events-none absolute -inset-px rounded-md"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</label>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="L"
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-4-label"
|
||||
/>
|
||||
<span id="size-choice-4-label">L</span>
|
||||
<!--
|
||||
Active: "border", Not Active: "border-2"
|
||||
Checked: "border-indigo-500", Not Checked: "border-transparent"
|
||||
-->
|
||||
<span
|
||||
class="pointer-events-none absolute -inset-px rounded-md"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</label>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="XL"
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-5-label"
|
||||
/>
|
||||
<span id="size-choice-5-label">XL</span>
|
||||
<!--
|
||||
Active: "border", Not Active: "border-2"
|
||||
Checked: "border-indigo-500", Not Checked: "border-transparent"
|
||||
-->
|
||||
<span
|
||||
class="pointer-events-none absolute -inset-px rounded-md"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</label>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="2XL"
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-6-label"
|
||||
/>
|
||||
<span id="size-choice-6-label">2XL</span>
|
||||
<!--
|
||||
Active: "border", Not Active: "border-2"
|
||||
Checked: "border-indigo-500", Not Checked: "border-transparent"
|
||||
-->
|
||||
<span
|
||||
class="pointer-events-none absolute -inset-px rounded-md"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</label>
|
||||
<!-- Active: "ring-2 ring-indigo-500" -->
|
||||
<label
|
||||
class="group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 cursor-pointer bg-white text-gray-900 shadow-sm"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="size-choice"
|
||||
value="3XL"
|
||||
class="sr-only"
|
||||
aria-labelledby="size-choice-7-label"
|
||||
/>
|
||||
<span id="size-choice-7-label">3XL</span>
|
||||
<!--
|
||||
Active: "border", Not Active: "border-2"
|
||||
Checked: "border-indigo-500", Not Checked: "border-transparent"
|
||||
-->
|
||||
<span
|
||||
class="pointer-events-none absolute -inset-px rounded-md"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
on:click={() => (formModal = true)}
|
||||
>Đặt mua</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
@ -1,65 +1,78 @@
|
|||
export const productsData = [
|
||||
{
|
||||
title: "test1",
|
||||
title: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
|
||||
id: "1",
|
||||
price: 20000,
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-01.jpg",
|
||||
description: "",
|
||||
src: "/material1.webp",
|
||||
description: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
|
||||
},
|
||||
{
|
||||
title: "test2",
|
||||
title: "Hình lăng trụ đáy là tam giác",
|
||||
id: "2",
|
||||
price: 20000,
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
|
||||
description: "",
|
||||
src: "/material3.webp",
|
||||
description:
|
||||
"https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
|
||||
},
|
||||
{
|
||||
title: "test3",
|
||||
title: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
|
||||
id: "3",
|
||||
price: 20000,
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
|
||||
description: "",
|
||||
src: "/material5.webp",
|
||||
description: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
|
||||
},
|
||||
{
|
||||
title: "test4",
|
||||
title: "Hình hộp",
|
||||
id: "4",
|
||||
price: 20000,
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
|
||||
description: "",
|
||||
src: "/material2.webp",
|
||||
description: "Hình hộp",
|
||||
},
|
||||
{
|
||||
title: "test5",
|
||||
title: "Hình chóp đáy là tam giác",
|
||||
id: "5",
|
||||
price: 20000,
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
|
||||
description: "",
|
||||
src: "/material4.webp",
|
||||
description: "Hình chóp đáy là tam giác",
|
||||
},
|
||||
{
|
||||
title: "Hình chóp đáy là tứ giác",
|
||||
id: "6",
|
||||
price: 20000,
|
||||
src: "/material6.webp",
|
||||
description: "Hình chóp đáy là tứ giác",
|
||||
},
|
||||
];
|
||||
|
||||
export const images = [
|
||||
{
|
||||
title: "test1",
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-01.jpg",
|
||||
alt: "",
|
||||
title: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
|
||||
src: "/material1.webp",
|
||||
alt: "Hình chóp đáy là tứ giác có cạnh bên vuông với mặt đáy",
|
||||
},
|
||||
{
|
||||
title: "test2",
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
|
||||
alt: "",
|
||||
title: "Hình lăng trụ đáy là tam giác",
|
||||
src: "/material3.webp",
|
||||
alt: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
|
||||
},
|
||||
{
|
||||
title: "test3",
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
|
||||
alt: "",
|
||||
title: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
|
||||
src: "/material5.webp",
|
||||
alt: "Hình chóp đáy là tam giác, cạnh bên vuông góc với đáy",
|
||||
},
|
||||
{
|
||||
title: "test4",
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg",
|
||||
alt: "",
|
||||
title: "Hình hộp",
|
||||
src: "/material2.webp",
|
||||
alt: "Hình hộp",
|
||||
},
|
||||
{
|
||||
title: "test5",
|
||||
src: "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg",
|
||||
alt: "",
|
||||
title: "Hình chóp đáy là tam giác",
|
||||
src: "/material4.webp",
|
||||
alt: "Hình chóp đáy là tam giác",
|
||||
},
|
||||
{
|
||||
title: "Hình chóp đáy là tứ giác",
|
||||
src: "/material6.webp",
|
||||
alt: "Hình chóp đáy là tứ giác",
|
||||
},
|
||||
];
|
||||
|
|
Loading…
Reference in a new issue