Add table display for specifications
Restructured the display of product specifications into a table format, providing users with two choices: a list of items or a table.
This commit is contained in:
Emil Gulamov
parent
6a6f08d83f
commit
93121c1029
3 changed files with 205 additions and 156 deletions
|
|
@ -46,6 +46,12 @@ const productsCollection = defineCollection({
|
|||
subTitle: z.string(),
|
||||
})
|
||||
).optional(),
|
||||
tableData: z.array(
|
||||
z.object({
|
||||
feature: z.array(z.string()),
|
||||
description: z.array(z.array(z.string())),
|
||||
})
|
||||
).optional(),
|
||||
blueprints: z.object({
|
||||
first: image().optional(),
|
||||
second: image().optional(),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "SF-AB A765"
|
||||
description: "Assorted Screw Set"
|
||||
description: " "
|
||||
main:
|
||||
id: 2
|
||||
content: |
|
||||
|
|
@ -40,15 +40,14 @@ specificationsLeft:
|
|||
subTitle: "Each set includes a sufficient quantity of screws to handle a wide range of projects and tasks."
|
||||
- title: "Sizes"
|
||||
subTitle: "Available in various sizes to suit different project requirements, ensuring compatibility and versatility."
|
||||
specificationsRight:
|
||||
- title: "Thread Design"
|
||||
subTitle: "Precision-engineered threads ensure a tight and secure fit, providing reliable fastening for your projects."
|
||||
- title: "Durability"
|
||||
subTitle: "Designed to withstand the rigors of everyday use, delivering long-lasting performance and reliability."
|
||||
- title: "Quality Assurance"
|
||||
subTitle: "Manufactured to meet or exceed industry standards, guaranteeing consistent quality and performance."
|
||||
- title: "Applications"
|
||||
subTitle: "Suitable for a wide range of applications, including woodworking, metalworking, construction, and more."
|
||||
tableData:
|
||||
- feature: ["Specification", "Value"]
|
||||
description:
|
||||
- ["Length (mm)", "Various"]
|
||||
- ["Weight (g)", "N/A"]
|
||||
- ["Material", "Stainless Steel"]
|
||||
- ["Finish", "Assorted"]
|
||||
- ["Package Contents", "Various screws in a set"]
|
||||
blueprints:
|
||||
first: "@/images/blueprint-1.avif"
|
||||
second: "@/images/blueprint-2.avif"
|
||||
|
|
|
|||
|
|
@ -27,9 +27,7 @@ const { product } = Astro.props;
|
|||
const pageTitle: string = `${product.data.title} | ${SITE.title}`;
|
||||
---
|
||||
|
||||
<MainLayout
|
||||
title={pageTitle}
|
||||
>
|
||||
<MainLayout title={pageTitle}>
|
||||
<div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
|
||||
</div>
|
||||
|
||||
|
|
@ -148,183 +146,229 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
|
|||
))
|
||||
}
|
||||
</div>
|
||||
<div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
|
||||
{
|
||||
product.data.specificationsRight?.map((spec) => (
|
||||
<div>
|
||||
<h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
|
||||
{spec.title}
|
||||
</h3>
|
||||
<p class="text-neutral-600 dark:text-neutral-400">
|
||||
{spec.subTitle}
|
||||
</p>
|
||||
|
||||
{
|
||||
product.data.specificationsRight ? (
|
||||
<div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
|
||||
{product.data.specificationsRight?.map((spec) => (
|
||||
<div>
|
||||
<h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
|
||||
{spec.title}
|
||||
</h3>
|
||||
<p class="text-neutral-600 dark:text-neutral-400">
|
||||
{spec.subTitle}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : product.data.tableData ? (
|
||||
<div class="mt-6 space-y-6 md:ml-auto md:mt-0">
|
||||
<div class="flex flex-col">
|
||||
<div class="-m-1.5 overflow-x-auto">
|
||||
<div class="inline-block min-w-full p-1.5 align-middle">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-neutral-300 dark:divide-neutral-700">
|
||||
<thead>
|
||||
<tr>
|
||||
{product.data.tableData?.[0].feature?.map(
|
||||
(header) => (
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium uppercase text-neutral-500 dark:text-neutral-500"
|
||||
>
|
||||
{header}
|
||||
</th>
|
||||
)
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
|
||||
{product.data.tableData?.map((row) =>
|
||||
// Wrap each row's content in a separate <tr> element
|
||||
row.description.map((rowData) => (
|
||||
<tr>
|
||||
{/* Iterate through each cell value in the row's description array */}
|
||||
{rowData.map((cellValue) => (
|
||||
// Render each cell value in its own <td> element
|
||||
<td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
|
||||
{cellValue}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MainLayout>
|
||||
|
||||
<div id="tabs-with-card-3" class="hidden" role="tabpanel">
|
||||
<div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
|
||||
<div
|
||||
class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
|
||||
>
|
||||
{
|
||||
product.data.blueprints.first && (
|
||||
<Image
|
||||
src={product.data.blueprints.first}
|
||||
class="h-full w-full object-cover object-center"
|
||||
alt="Blueprint Illustration"
|
||||
format={"avif"}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div id="tabs-with-card-3" class="hidden" role="tabpanel">
|
||||
<div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
|
||||
<div
|
||||
class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
|
||||
>
|
||||
{
|
||||
product.data.blueprints.first && (
|
||||
<Image
|
||||
src={product.data.blueprints.first}
|
||||
class="h-full w-full object-cover object-center"
|
||||
alt="Blueprint Illustration"
|
||||
format={"avif"}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
|
||||
{
|
||||
product.data.blueprints.second && (
|
||||
<Image
|
||||
src={product.data.blueprints.second}
|
||||
class="h-full w-full object-cover object-center"
|
||||
alt="Blueprint Illustration"
|
||||
format={"avif"}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
|
||||
{
|
||||
product.data.blueprints.second && (
|
||||
<Image
|
||||
src={product.data.blueprints.second}
|
||||
class="h-full w-full object-cover object-center"
|
||||
alt="Blueprint Illustration"
|
||||
format={"avif"}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
if (window.gsap) {
|
||||
const gsap = window.gsap;
|
||||
gsap.set("#fadeText", {
|
||||
autoAlpha: 0,
|
||||
y: 50,
|
||||
willChange: "transform, opacity",
|
||||
});
|
||||
gsap.set("#fadeInUp", {
|
||||
autoAlpha: 0,
|
||||
y: 50,
|
||||
willChange: "transform, opacity",
|
||||
});
|
||||
gsap.set("#fadeInMoveRight", {
|
||||
autoAlpha: 0,
|
||||
x: 300,
|
||||
willChange: "transform, opacity",
|
||||
});
|
||||
<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
if (window.gsap) {
|
||||
const gsap = window.gsap;
|
||||
gsap.set("#fadeText", {
|
||||
autoAlpha: 0,
|
||||
y: 50,
|
||||
willChange: "transform, opacity",
|
||||
});
|
||||
gsap.set("#fadeInUp", {
|
||||
autoAlpha: 0,
|
||||
y: 50,
|
||||
willChange: "transform, opacity",
|
||||
});
|
||||
gsap.set("#fadeInMoveRight", {
|
||||
autoAlpha: 0,
|
||||
x: 300,
|
||||
willChange: "transform, opacity",
|
||||
});
|
||||
|
||||
let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
|
||||
let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
|
||||
|
||||
timeline.to("#fadeText", {
|
||||
duration: 1.5,
|
||||
autoAlpha: 1,
|
||||
y: 0,
|
||||
delay: 1,
|
||||
ease: "power2.out",
|
||||
});
|
||||
timeline.to("#fadeText", {
|
||||
duration: 1.5,
|
||||
autoAlpha: 1,
|
||||
y: 0,
|
||||
delay: 1,
|
||||
ease: "power2.out",
|
||||
});
|
||||
|
||||
timeline.to(
|
||||
"#fadeInUp",
|
||||
{ duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
|
||||
"-=1.2",
|
||||
);
|
||||
timeline.to(
|
||||
"#fadeInUp",
|
||||
{ duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
|
||||
"-=1.2"
|
||||
);
|
||||
|
||||
timeline.to(
|
||||
"#fadeInMoveRight",
|
||||
{ duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
|
||||
"-=1.4",
|
||||
);
|
||||
timeline.to(
|
||||
"#fadeInMoveRight",
|
||||
{ duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
|
||||
"-=1.4"
|
||||
);
|
||||
|
||||
timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
function setButtonInactive(btn: any, activeButton: any) {
|
||||
if (btn !== activeButton) {
|
||||
btn.classList.remove(
|
||||
"active",
|
||||
"bg-neutral-100",
|
||||
"hover:border-transparent",
|
||||
"dark:bg-white/[.05]",
|
||||
);
|
||||
|
||||
const tabId = btn.getAttribute("data-target");
|
||||
if (tabId) {
|
||||
const contentElement = document.querySelector(tabId);
|
||||
if (contentElement) {
|
||||
contentElement.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
changeHeadingStyle(
|
||||
btn,
|
||||
["text-neutral-800", "dark:text-neutral-200"],
|
||||
["text-orange-400", "dark:text-orange-300"],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function activateButton(button: any) {
|
||||
button.classList.add(
|
||||
timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
function setButtonInactive(btn: any, activeButton: any) {
|
||||
if (btn !== activeButton) {
|
||||
btn.classList.remove(
|
||||
"active",
|
||||
"bg-neutral-100",
|
||||
",hover:border-transparent",
|
||||
"dark:bg-white/[.05]",
|
||||
"hover:border-transparent",
|
||||
"dark:bg-white/[.05]"
|
||||
);
|
||||
|
||||
const tabId = button.getAttribute("data-target");
|
||||
const tabId = btn.getAttribute("data-target");
|
||||
if (tabId) {
|
||||
const contentElementToShow = document.querySelector(tabId);
|
||||
if (contentElementToShow) {
|
||||
contentElementToShow.classList.remove("hidden");
|
||||
const contentElement = document.querySelector(tabId);
|
||||
if (contentElement) {
|
||||
contentElement.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
changeHeadingStyle(
|
||||
button,
|
||||
["text-orange-400", "dark:text-orange-300"],
|
||||
btn,
|
||||
["text-neutral-800", "dark:text-neutral-200"],
|
||||
["text-orange-400", "dark:text-orange-300"]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function changeHeadingStyle(
|
||||
button: any,
|
||||
addClasses: any,
|
||||
removeClasses: any,
|
||||
) {
|
||||
let heading = button.querySelector("span");
|
||||
if (heading) {
|
||||
heading.classList.remove(...removeClasses);
|
||||
heading.classList.add(...addClasses);
|
||||
function activateButton(button: any) {
|
||||
button.classList.add(
|
||||
"active",
|
||||
"bg-neutral-100",
|
||||
",hover:border-transparent",
|
||||
"dark:bg-white/[.05]"
|
||||
);
|
||||
|
||||
const tabId = button.getAttribute("data-target");
|
||||
if (tabId) {
|
||||
const contentElementToShow = document.querySelector(tabId);
|
||||
if (contentElementToShow) {
|
||||
contentElementToShow.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
const tabButtons = document.querySelectorAll("[data-target]");
|
||||
changeHeadingStyle(
|
||||
button,
|
||||
["text-orange-400", "dark:text-orange-300"],
|
||||
["text-neutral-800", "dark:text-neutral-200"]
|
||||
);
|
||||
}
|
||||
|
||||
if (tabButtons.length > 0) {
|
||||
changeHeadingStyle(
|
||||
tabButtons[0],
|
||||
["text-orange-400", "dark:text-orange-300"],
|
||||
[],
|
||||
);
|
||||
function changeHeadingStyle(
|
||||
button: any,
|
||||
addClasses: any,
|
||||
removeClasses: any
|
||||
) {
|
||||
let heading = button.querySelector("span");
|
||||
if (heading) {
|
||||
heading.classList.remove(...removeClasses);
|
||||
heading.classList.add(...addClasses);
|
||||
}
|
||||
}
|
||||
|
||||
tabButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
tabButtons.forEach((btn) => setButtonInactive(btn, button));
|
||||
activateButton(button);
|
||||
});
|
||||
const tabButtons = document.querySelectorAll("[data-target]");
|
||||
|
||||
if (tabButtons.length > 0) {
|
||||
changeHeadingStyle(
|
||||
tabButtons[0],
|
||||
["text-orange-400", "dark:text-orange-300"],
|
||||
[]
|
||||
);
|
||||
}
|
||||
|
||||
tabButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
tabButtons.forEach((btn) => setButtonInactive(btn, button));
|
||||
activateButton(button);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</MainLayout>
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue