From 88b246d3660589dc677acba837cea0601f98b2a8 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Fri, 16 Feb 2024 08:43:28 +0400
Subject: [PATCH] Remove 'prod.astro' and make image component properties
 optional

The 'prod.astro' page is deleted as a part of refactoring process. Also, title, src, alt, and url properties of ImgSmall and ImgWide components are now optional, which provides greater flexibility and reduces risk of errors when these components are used in various parts of application.
---
 src/components/ui/images/ImgSmall.astro |   8 +-
 src/components/ui/images/ImgWide.astro  |   8 +-
 src/pages/prod.astro                    | 302 ------------------------
 3 files changed, 8 insertions(+), 310 deletions(-)
 delete mode 100644 src/pages/prod.astro

diff --git a/src/components/ui/images/ImgSmall.astro b/src/components/ui/images/ImgSmall.astro
index 7c02644..ed3f0e3 100644
--- a/src/components/ui/images/ImgSmall.astro
+++ b/src/components/ui/images/ImgSmall.astro
@@ -3,10 +3,10 @@ import { Image } from "astro:assets";
 const { title, src, alt, url } = Astro.props;
 
 interface Props {
-  title: string;
-  src: any;
-  alt: string;
-  url: string;
+  title?: string;
+  src?: any;
+  alt?: string;
+  url?: string;
 }
 
 import type { CollectionEntry } from "astro:content";
diff --git a/src/components/ui/images/ImgWide.astro b/src/components/ui/images/ImgWide.astro
index 2f5a06a..7a58e42 100644
--- a/src/components/ui/images/ImgWide.astro
+++ b/src/components/ui/images/ImgWide.astro
@@ -3,10 +3,10 @@ import { Image } from "astro:assets";
 const { title, src, alt, url } = Astro.props;
 
 interface Props {
-  title: string;
-  src: any;
-  alt: string;
-  url: string;
+  title?: string;
+  src?: any;
+  alt?: string;
+  url?: string;
 }
 
 import type { CollectionEntry } from "astro:content";
diff --git a/src/pages/prod.astro b/src/pages/prod.astro
deleted file mode 100644
index 03891d7..0000000
--- a/src/pages/prod.astro
+++ /dev/null
@@ -1,302 +0,0 @@
----
-// Import section components
-import MainLayout from "../layouts/MainLayout.astro";
-import productData from "../content/products/b203.md";
-import ProductTabBtn from "../components/ui/buttons/ProductTabBtn.astro";
-import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro";
-
-declare global {
-  interface Window {
-    gsap: any;
-  }
-}
-import { Image } from "astro:assets";
----
-
-<MainLayout>
-  <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
-  </div>
-
-  <div
-    class="mx-auto flex max-w-[85rem] flex-col px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
-  >
-    <div>
-      <p
-        id="fadeText"
-        class="mb-8 max-w-prose text-pretty font-light text-neutral-700 dark:text-neutral-300 sm:text-xl"
-      >
-        {productData.main.content}
-      </p>
-    </div>
-    <div
-      class="flex flex-col items-center justify-between space-y-4 sm:flex-row sm:space-y-0"
-    >
-      <div id="fadeInUp">
-        <h1
-          class="block text-4xl font-bold tracking-tighter text-neutral-800 dark:text-neutral-200 sm:text-5xl md:text-6xl lg:text-7xl"
-        >
-          {productData.main.title}
-        </h1>
-        <p class="text-lg text-neutral-600 dark:text-neutral-400">
-          {productData.main.subTitle}
-        </p>
-      </div>
-      <div>
-        <img
-          id="fadeInMoveRight"
-          src="src/images/product-main.avif"
-          class="w-[600px]"
-          alt={productData.main.imgAlt}
-        />
-      </div>
-    </div>
-  </div>
-
-  
-  <div class="mx-auto max-w-[85rem] px-4 pt-10 sm:px-6 lg:px-8 lg:pt-14">
-   
-    <nav
-      class="mx-auto grid max-w-6xl gap-y-px sm:flex sm:gap-x-4 sm:gap-y-0"
-      aria-label="Tabs"
-      role="tablist"
-    >
-      {
-        productData.tabs.map((tab, index) => (
-          <ProductTabBtn
-            title={tab.title}
-            id={tab.id}
-            dataTab={tab.dataTab}
-            first={index === 0}
-          />
-        ))
-      }
-    </nav>
-    
-
-    <div class="mt-12 md:mt-16">
-      <div id="tabs-with-card-1" role="tabpanel">
-        <div class="mx-auto max-w-[85rem] px-4 pb-10 sm:px-6 lg:px-8 lg:pb-14">
-          <div class="grid gap-12 md:grid-cols-2">
-            <div class="lg:w-3/4">
-              <h2
-                class="text-balance text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:leading-tight lg:text-4xl"
-              >
-                {productData.description.title}
-              </h2>
-              <p
-                class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400"
-              >
-                {productData.description.subTitle}
-              </p>
-              <p class="mt-5">
-                <PrimaryCTA
-                  title={productData.description.btnTitle}
-                  url={productData.description.btnURL}
-                />
-              </p>
-            </div>
-            
-
-            <div class="space-y-6 lg:space-y-10">
-             
-              {
-                productData.descriptionList.map((list) => (
-                  <div class="flex">
-                    <div>
-                      <h3 class="text-base font-bold text-gray-800 dark:text-gray-200 sm:text-lg">
-                        {list.title}
-                      </h3>
-                      <p class="mt-1 text-gray-600 dark:text-gray-400">
-                        {list.subTitle}
-                      </p>
-                    </div>
-                  </div>
-                ))
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="tabs-with-card-2" class="hidden" role="tabpanel">
-       
-        <div class="mx-auto max-w-[85rem] px-4 pb-10 sm:px-6 lg:px-8 lg:pb-14">
-          
-            <div class="grid grid-cols-1 md:grid-cols-2 w-full gap-x-16">
-              <div class="space-y-6 max-w-md">
-                {
-                  productData.specificationsLeft.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>
-              <div class="space-y-6 max-w-md mt-6 md:ml-auto md:mt-0">
-                {
-                  productData.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>
-            </div>
-          
-        </div>
-      </div>
-     
-    </div>
-  </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 -ml-12 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 lg:ml-0"
-      >
-        <img
-          src="src/images/blueprint-1.avif"
-          loading="lazy"
-          alt="Photo by Kaung Htet"
-          class="h-full w-full object-cover object-center"
-        />
-      </div>
-
-      <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
-        <img
-          src="src/images/blueprint-2.avif"
-          loading="lazy"
-          alt="Photo by Manny Moreno"
-          class="h-full w-full object-cover object-center "
-        />
-      </div>
-    </div>
-  </div>
-
-  <script is:inline src="/assets/vendor/gsap/gsap.min.js"></script>
-  <script>
-    window.addEventListener("load", (event) => {
-      if (window.gsap) {
-        const gsap = window.gsap;
-        gsap.set("#fadeText", { autoAlpha: 0, y: 50 });
-        gsap.set("#fadeInUp", { autoAlpha: 0, y: 50 });
-        gsap.set("#fadeInMoveRight", { autoAlpha: 0, x: 300 });
-
-        let timeline = gsap.timeline();
-
-        timeline.to("#fadeText", {
-          duration: 2,
-          autoAlpha: 1,
-          y: 0,
-          delay: 1,
-          ease: "power2.out",
-        });
-
-        timeline.to(
-          "#fadeInUp",
-          { duration: 2, autoAlpha: 1, y: 0, ease: "power2.out" },
-          "-=1.2",
-        );
-
-        timeline.to(
-          "#fadeInMoveRight",
-          { duration: 2, autoAlpha: 1, x: 0, ease: "power2.out" },
-          "-=1.2",
-        );
-
-        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.5 });
-      }
-    });
-  </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-[#fa5a15]", "dark:text-[#fb713b]"],
-          );
-        }
-      }
-
-      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");
-          }
-        }
-
-        changeHeadingStyle(
-          button,
-          ["text-[#fa5a15]", "dark:text-[#fb713b]"],
-          ["text-neutral-800", "dark:text-neutral-200"],
-        );
-      }
-
-      function changeHeadingStyle(
-        button: any,
-        addClasses: any,
-        removeClasses: any,
-      ) {
-        let heading = button.querySelector("h2");
-        if (heading) {
-          heading.classList.remove(...removeClasses);
-          heading.classList.add(...addClasses);
-        }
-      }
-
-      const tabButtons = document.querySelectorAll("[data-target]");
-
-      if (tabButtons.length > 0) {
-        changeHeadingStyle(
-          tabButtons[0],
-          ["text-[#fa5a15]", "dark:text-[#fb713b]"],
-          [],
-        );
-      }
-
-      tabButtons.forEach((button) => {
-        button.addEventListener("click", () => {
-          tabButtons.forEach((btn) => setButtonInactive(btn, button));
-          activateButton(button);
-        });
-      });
-    });
-  </script>
-</MainLayout>