Refactor product page

This commit is contained in:
Emil Gulamov 2024-04-20 14:34:26 +04:00
parent 93121c1029
commit d2ecb964c2

View file

@ -27,7 +27,9 @@ 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>
@ -146,7 +148,6 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
))
}
</div>
{
product.data.specificationsRight ? (
<div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
@ -211,7 +212,6 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
</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">
@ -244,7 +244,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
</div>
</div>
</div>
</MainLayout>
<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
<script>
window.addEventListener("load", () => {
@ -279,13 +279,13 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
timeline.to(
"#fadeInUp",
{ duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
"-=1.2"
"-=1.2",
);
timeline.to(
"#fadeInMoveRight",
{ duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
"-=1.4"
"-=1.4",
);
timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
@ -300,7 +300,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
"active",
"bg-neutral-100",
"hover:border-transparent",
"dark:bg-white/[.05]"
"dark:bg-white/[.05]",
);
const tabId = btn.getAttribute("data-target");
@ -314,7 +314,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle(
btn,
["text-neutral-800", "dark:text-neutral-200"],
["text-orange-400", "dark:text-orange-300"]
["text-orange-400", "dark:text-orange-300"],
);
}
}
@ -324,7 +324,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
"active",
"bg-neutral-100",
",hover:border-transparent",
"dark:bg-white/[.05]"
"dark:bg-white/[.05]",
);
const tabId = button.getAttribute("data-target");
@ -338,14 +338,14 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle(
button,
["text-orange-400", "dark:text-orange-300"],
["text-neutral-800", "dark:text-neutral-200"]
["text-neutral-800", "dark:text-neutral-200"],
);
}
function changeHeadingStyle(
button: any,
addClasses: any,
removeClasses: any
removeClasses: any,
) {
let heading = button.querySelector("span");
if (heading) {
@ -360,7 +360,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle(
tabButtons[0],
["text-orange-400", "dark:text-orange-300"],
[]
[],
);
}