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.
This commit is contained in:
Emil Gulamov
parent
a24f4137a8
commit
a12fb8be40
3 changed files with 215 additions and 0 deletions
132
src/components/FeaturesNavs.astro
Normal file
132
src/components/FeaturesNavs.astro
Normal file
|
|
@ -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 <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>'s offerings to perfectly suit your hardware and construction needs.`;
|
||||||
|
|
||||||
|
/*
|
||||||
|
In the above, the title attribute is a variable part of the FeaturesNavs component.
|
||||||
|
*/
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
||||||
|
>
|
||||||
|
<div class="relative p-6 md:p-16">
|
||||||
|
<div
|
||||||
|
class="relative z-10 lg:grid lg:grid-cols-12 lg:items-center lg:gap-16"
|
||||||
|
>
|
||||||
|
<!-- Text contents of the section -->
|
||||||
|
<div class="mb-10 lg:order-2 lg:col-span-6 lg:col-start-8 lg:mb-0">
|
||||||
|
<h2
|
||||||
|
class="text-2xl font-bold text-neutral-800 dark:text-neutral-200 sm:text-3xl"
|
||||||
|
>
|
||||||
|
<!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
|
||||||
|
<Fragment set:html={title} />
|
||||||
|
</h2>
|
||||||
|
<!-- Tab navigation - use the attribute 'first' in the first TabNav for the component to work -->
|
||||||
|
<nav class="mt-5 grid gap-4 md:mt-10" aria-label="Tabs" role="tablist">
|
||||||
|
<TabNav
|
||||||
|
id="tabs-with-card-item-1"
|
||||||
|
dataTab="#tabs-with-card-1"
|
||||||
|
aria="tabs-with-card-1"
|
||||||
|
heading="Cutting-Edge Tools"
|
||||||
|
paragraph="Empower your projects with ScrewFast's cutting-edge tools. Experience enhanced efficiency in construction management with our sophisticated automated solutions."
|
||||||
|
first={true}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 -960 960 960"
|
||||||
|
width="48"
|
||||||
|
><path
|
||||||
|
d="M764-80q-6 0-11-2t-10-7L501-331q-5-5-7-10t-2-11q0-6 2-11t7-10l85-85q5-5 10-7t11-2q6 0 11 2t10 7l242 242q5 5 7 10t2 11q0 6-2 11t-7 10l-85 85q-5 5-10 7t-11 2Zm0-72 43-43-200-200-43 43 200 200ZM195-80q-6 0-11.5-2T173-89l-84-84q-5-5-7-10.5T80-195q0-6 2-11t7-10l225-225h85l38-38-175-175h-57L80-779l99-99 125 125v57l175 175 130-130-67-67 56-56H485l-18-18 128-128 18 18v113l56-56 169 169q15 15 23.5 34.5T870-600q0 20-6.5 38.5T845-528l-85-85-56 56-52-52-211 211v84L216-89q-5 5-10 7t-11 2Zm0-72 200-200v-43h-43L152-195l43 43Zm0 0-43-43 22 21 21 22Zm569 0 43-43-43 43Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</TabNav>
|
||||||
|
|
||||||
|
<TabNav
|
||||||
|
id="tabs-with-card-item-2"
|
||||||
|
dataTab="#tabs-with-card-2"
|
||||||
|
aria="tabs-with-card-2"
|
||||||
|
heading="Intuitive Dashboards"
|
||||||
|
paragraph="Navigate with ease using ScrewFast's intuitive dashboards. Set up and oversee your projects seamlessly, with user-friendly interfaces designed for quick and effective workflow management."
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 -960 960 960"
|
||||||
|
width="48"
|
||||||
|
><path
|
||||||
|
d="M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</TabNav>
|
||||||
|
|
||||||
|
<TabNav
|
||||||
|
id="tabs-with-card-item-3"
|
||||||
|
dataTab="#tabs-with-card-3"
|
||||||
|
aria="tabs-with-card-3"
|
||||||
|
heading="Robust Features"
|
||||||
|
paragraph="Minimize complexity, maximize productivity. ScrewFast's robust features are engineered to streamline your construction process, delivering results that stand out for their excellence."
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-[#fa5a15] dark:text-neutral-300 dark:hs-tab-active:text-[#fb713b] md:h-7 md:w-7"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</TabNav>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contents for each tab - the 'first' attribute should be used in the first tab for that tab to be initially visible, 'second' changes the styles -->
|
||||||
|
<div class="lg:col-span-6">
|
||||||
|
<div class="relative">
|
||||||
|
<div>
|
||||||
|
<TabContent
|
||||||
|
id="tabs-with-card-1"
|
||||||
|
aria="tabs-with-card-item-1"
|
||||||
|
src={tools}
|
||||||
|
alt="Yellow and black heavy equipment on brown grass field"
|
||||||
|
first={true}
|
||||||
|
/>
|
||||||
|
<TabContent
|
||||||
|
id="tabs-with-card-2"
|
||||||
|
aria="tabs-with-card-item-2"
|
||||||
|
src={dashboard}
|
||||||
|
alt="A screenshot or graphic representation of the intuitive dashboard"
|
||||||
|
second={true}
|
||||||
|
/>
|
||||||
|
<TabContent
|
||||||
|
id="tabs-with-card-3"
|
||||||
|
aria="tabs-with-card-item-3"
|
||||||
|
src={construction}
|
||||||
|
alt="Gray metal building frame near tower crane during daytime"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="absolute inset-0 grid h-full w-full grid-cols-12">
|
||||||
|
<!-- Decorative background and sizing -->
|
||||||
|
<div
|
||||||
|
class="col-span-full h-5/6 w-full rounded-xl bg-neutral-100 dark:bg-white/[.075] sm:h-3/4 lg:col-span-7 lg:col-start-6 lg:h-full"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
39
src/components/ui/blocks/TabContent.astro
Normal file
39
src/components/ui/blocks/TabContent.astro
Normal file
|
|
@ -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:
|
||||||
|
<TabContent id="" aria="" src="" alt="" first={true}/>
|
||||||
|
<TabContent id="" aria="" src="" alt="" second={true}/>
|
||||||
|
<TabContent id="" aria="" src="" alt="" />
|
||||||
|
*/
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
role="tabpanel"
|
||||||
|
class={`${first ? "" : "hidden"}`}
|
||||||
|
aria-labelledby={aria}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={src}
|
||||||
|
alt={alt}
|
||||||
|
class={`${second ? "shadow-xl aspect-[5/3] bg-neutral-300 dark:bg-neutral-600 object-cover p-3 lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]" : "shadow-xl aspect-[3/2] object-cover lg:aspect-auto shadow-neutral-200 rounded-xl dark:shadow-neutral-900/[.2]"}`}
|
||||||
|
draggable={"false"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
44
src/components/ui/blocks/TabNav.astro
Normal file
44
src/components/ui/blocks/TabNav.astro
Normal file
|
|
@ -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:
|
||||||
|
<TabNav id="" dataTab="" aria="" heading="" paragraph="" first={true} />
|
||||||
|
<TabNav id="" dataTab="" aria="" heading="" paragraph="" />
|
||||||
|
<TabNav id="" dataTab="" aria="" heading="" paragraph="" />
|
||||||
|
*/
|
||||||
|
---
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class={`${first ? "active dark:hover:bg-neutral-700dark:focus:ring-neutral-600 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 dark:hs-tab-active:bg-neutral-700/60 md:p-5" : "dark:hover:bg-neutral-700dark:focus:ring-neutral-600 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 dark:hs-tab-active:bg-neutral-700/60 md:p-5"}`}
|
||||||
|
id={id}
|
||||||
|
data-hs-tab={dataTab}
|
||||||
|
aria-controls={aria}
|
||||||
|
role="tab"
|
||||||
|
>
|
||||||
|
<span class="flex">
|
||||||
|
<slot />
|
||||||
|
<span class="ms-6 grow">
|
||||||
|
<span
|
||||||
|
class="block text-lg font-semibold text-neutral-800 hs-tab-active:text-[#fa5a15] dark:text-neutral-200 dark:hs-tab-active:text-[#fb713b]"
|
||||||
|
>{heading}</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mt-1 block text-neutral-500 hs-tab-active:text-neutral-600 dark:text-neutral-400 dark:hs-tab-active:text-neutral-200"
|
||||||
|
>{paragraph}</span
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
Loading…
Add table
Reference in a new issue