From a12fb8be402bb7ed9b7efcf882cfe9633e6d2483 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Mon, 12 Feb 2024 03:50:38 +0400
Subject: [PATCH] Add FeaturesNavs component and update TabNav & TabContent
components
This commit introduces a new component 'FeaturesNavs' that includes the navigation for the tools, dashboards, and robust features selections. It also modifies the existing 'TabNav' and 'TabContent' components to manage the functionality of the tabs dynamically. Changes emphasize the use of 'first' and 'second' props to manage the initial active tab and style variations.
---
src/components/FeaturesNavs.astro | 132 ++++++++++++++++++++++
src/components/ui/blocks/TabContent.astro | 39 +++++++
src/components/ui/blocks/TabNav.astro | 44 ++++++++
3 files changed, 215 insertions(+)
create mode 100644 src/components/FeaturesNavs.astro
create mode 100644 src/components/ui/blocks/TabContent.astro
create mode 100644 src/components/ui/blocks/TabNav.astro
diff --git a/src/components/FeaturesNavs.astro b/src/components/FeaturesNavs.astro
new file mode 100644
index 0000000..ca07b0c
--- /dev/null
+++ b/src/components/FeaturesNavs.astro
@@ -0,0 +1,132 @@
+---
+import TabNav from "./ui/blocks/TabNav.astro";
+import TabContent from "./ui/blocks/TabContent.astro";
+import { Image } from "astro:assets";
+import construction from "../images/construction-image.avif";
+import tools from "../images/automated-tools.avif";
+import dashboard from "../images/dashboard-image.avif";
+
+/* `title` variable used to customise the heading. */
+const title: string = `Customize ScrewFast's offerings to perfectly suit your hardware and construction needs.`;
+
+/*
+ In the above, the title attribute is a variable part of the FeaturesNavs component.
+*/
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/ui/blocks/TabContent.astro b/src/components/ui/blocks/TabContent.astro
new file mode 100644
index 0000000..2d37967
--- /dev/null
+++ b/src/components/ui/blocks/TabContent.astro
@@ -0,0 +1,39 @@
+---
+import { Image } from "astro:assets";
+
+const { id, aria, src, alt, first, second } = Astro.props;
+
+interface Props {
+ id: string;
+ aria: string;
+ src?: any;
+ alt: string;
+ first?: boolean;
+ second?: boolean;
+}
+
+/*
+first: This prop should be set to true for the initial TabContent component in your list to ensure that it's visible when the page first loads. All subsequent TabContent components should omit this prop or set it to false.
+
+second: This prop allows to control changes in the look of the Image. If it is set to true, the Image will have different aspect ratio and background color. If this prop is not provided or is set to false, the Image will use default styling. You can enable this for any TabContent component you want to apply these changes to.
+
+Example:
+
+
+
+*/
+---
+
+
+
+
diff --git a/src/components/ui/blocks/TabNav.astro b/src/components/ui/blocks/TabNav.astro
new file mode 100644
index 0000000..0469076
--- /dev/null
+++ b/src/components/ui/blocks/TabNav.astro
@@ -0,0 +1,44 @@
+---
+const { aria, dataTab, id, heading, paragraph, first } = Astro.props;
+
+interface Props {
+ dataTab: string;
+ id: string;
+ aria: string;
+ heading?: string;
+ paragraph?: string;
+ first?: boolean;
+}
+
+/*
+first: This prop should be set to true for the initial TabNav component in your list to ensure that it's visible when the page first loads. All subsequent TabNav components should omit this prop or set it to false.
+
+Example:
+
+
+
+*/
+---
+
+