diff --git a/src/components/Authentication.astro b/src/components/Authentication.astro index 7e0a8fd..69a9e79 100644 --- a/src/components/Authentication.astro +++ b/src/components/Authentication.astro @@ -1,15 +1,16 @@ --- -// Import the necessary dependencies from individual component files +// Import the necessary components from their respective component files import LoginModal from "./ui/forms/LoginModal.astro"; import RegisterModal from "./ui/forms/RegisterModal.astro"; import RecoverModal from "./ui/forms/RecoverModal.astro"; import LoginBtn from "./ui/buttons/LoginBtn.astro"; --- + - + - + - + diff --git a/src/components/ui/avatars/Avatar.astro b/src/components/ui/avatars/Avatar.astro index d39b6ff..5f67be6 100644 --- a/src/components/ui/avatars/Avatar.astro +++ b/src/components/ui/avatars/Avatar.astro @@ -1,6 +1,8 @@ --- +// Destructure the properties from Astro.props const { src, alt } = Astro.props; +// Define TypeScript interface for the properties interface Props { src: string; alt: string; diff --git a/src/components/ui/avatars/AvatarBlog.astro b/src/components/ui/avatars/AvatarBlog.astro index 9e20c2f..dfa1440 100644 --- a/src/components/ui/avatars/AvatarBlog.astro +++ b/src/components/ui/avatars/AvatarBlog.astro @@ -1,14 +1,17 @@ --- +// Import necessary components import { Image } from "astro:assets"; - +// Import necessary types import type { CollectionEntry } from "astro:content"; +// Extract blogEntry property from Astro.props const { blogEntry } = Astro.props; - +// Define Props interface interface Props { blogEntry: CollectionEntry<"blog">; } --- +
; } --- +
- {blogEntry.data.authorImageAlt} -
\ No newline at end of file + {blogEntry.data.authorImageAlt} +
diff --git a/src/components/ui/avatars/AvatarTestimonialSection2.astro b/src/components/ui/avatars/AvatarTestimonialSection.astro similarity index 100% rename from src/components/ui/avatars/AvatarTestimonialSection2.astro rename to src/components/ui/avatars/AvatarTestimonialSection.astro diff --git a/src/components/ui/blocks/AccordionItem.astro b/src/components/ui/blocks/AccordionItem.astro index 5dba715..e94dac2 100644 --- a/src/components/ui/blocks/AccordionItem.astro +++ b/src/components/ui/blocks/AccordionItem.astro @@ -1,6 +1,7 @@ --- +// Define props from Astro const { id, collapseId, heading, content, first } = Astro.props; - +// Define TypeScript interface for props interface Props { id: string; collapseId: string; @@ -8,45 +9,58 @@ interface Props { content: string; first?: boolean; } +// Define class names for the accordion and its content const ACCORDION_CLASS_DEFAULT = "hs-accordion pb-3 active"; const ACCORDION_CLASS_COLLAPSED = "hs-accordion pt-6 pb-3"; const ACCORDION_CONTENT_CLASS = "hs-accordion-content w-full overflow-hidden transition-[height] duration-300"; +// Helper function to return the correct class for the accordion function getAccordionClass(first: boolean = false) { return first ? ACCORDION_CLASS_DEFAULT : ACCORDION_CLASS_COLLAPSED; } -const SVG_PARAMS = { - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - strokeWidth: "2", - strokeLinecap: "round", - strokeLinejoin: "round", -}; --- +
+ +
+

{content}

diff --git a/src/components/ui/buttons/AuthBtn.astro b/src/components/ui/buttons/AuthBtn.astro index 52cf9ce..7aad2a7 100644 --- a/src/components/ui/buttons/AuthBtn.astro +++ b/src/components/ui/buttons/AuthBtn.astro @@ -1,11 +1,14 @@ --- +// Destructure the properties from Astro.props const { title } = Astro.props; +// Define TypeScript interface for the properties interface Props { title: string; } - -const baseClasses = "inline-flex w-full items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-700 focus-visible:ring outline-none transition duration-300"; +// Define CSS classes for styling the button +const baseClasses = + "inline-flex w-full items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-700 focus-visible:ring outline-none transition duration-300"; const borderClasses = "border border-transparent"; const bgColorClasses = "bg-yellow-400 dark:focus:outline-none"; const hoverClasses = "hover:bg-yellow-500"; @@ -13,7 +16,10 @@ const fontSizeClasses = "2xl:text-base"; const disabledClasses = "disabled:pointer-events-none disabled:opacity-50"; const ringClasses = "ring-zinc-500 dark:ring-zinc-200"; --- + + \ No newline at end of file + type="submit" + class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${disabledClasses} ${ringClasses}`} + >{title} diff --git a/src/components/ui/buttons/Btn404.astro b/src/components/ui/buttons/Btn404.astro index dc46d43..8026ef4 100644 --- a/src/components/ui/buttons/Btn404.astro +++ b/src/components/ui/buttons/Btn404.astro @@ -1,18 +1,22 @@ --- +// Destructure the properties from Astro.props const { title, id, noArrow } = Astro.props; - +// Define TypeScript interface for the properties interface Props { - title?: string; - id?: string; - noArrow?: boolean; + title?: string; + id?: string; + noArrow?: boolean; } - -const baseClasses = "group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none"; +// Define CSS classes for styling the button +const baseClasses = + "group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none"; const borderClasses = "border border-transparent"; -const bgColorClasses = "bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none"; +const bgColorClasses = + "bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none"; const disableClasses = "disabled:pointer-events-none disabled:opacity-50"; const fontSizeClasses = "2xl:text-base"; const ringClasses = "dark:ring-zinc-200"; +// SVG for an arrow icon const arrowSVG = ``; --- + \ No newline at end of file + {title} + + + {noArrow ? null : } + diff --git a/src/components/ui/cards/CardBlog.astro b/src/components/ui/cards/CardBlog.astro index 732feac..8c0831e 100644 --- a/src/components/ui/cards/CardBlog.astro +++ b/src/components/ui/cards/CardBlog.astro @@ -1,22 +1,29 @@ --- +// Import necessary components and utilities import AvatarBlog from "../avatars/AvatarBlog.astro"; import { Image } from "astro:assets"; - import { formatDate } from "../../../utils"; import type { CollectionEntry } from "astro:content"; +// Define data sources from Astro props const { blogEntry } = Astro.props; +// Define TypeScript props interface interface Props { blogEntry: CollectionEntry<"blog">; } --- + +
@@ -28,7 +35,7 @@ interface Props { format={"avif"} />
- +
@@ -45,7 +52,7 @@ interface Props {
- +

; } --- +
+
- +
+

@@ -36,7 +39,7 @@ interface Props { {blogEntry.data.description}

- +
@@ -49,7 +52,7 @@ interface Props {

- +
; + insightEntry: CollectionEntry<"insights">; } --- - -
- {insightEntry.data.cardImageAlt} -
- -
-

- {insightEntry.data.title} -

-

+ + + +

+ {insightEntry.data.cardImageAlt} +
+ +
+ +

+ {insightEntry.data.title} +

+ +

{insightEntry.data.description} -

-

- Read more - -

-
- \ No newline at end of file +

+ +

+ Read more + +

+
+ diff --git a/src/components/ui/cards/CardRelated.astro b/src/components/ui/cards/CardRelated.astro index e6b6b04..a609f1f 100644 --- a/src/components/ui/cards/CardRelated.astro +++ b/src/components/ui/cards/CardRelated.astro @@ -1,20 +1,23 @@ --- +// Import necessary modules and utilities import { Image } from "astro:assets"; - import { formatDate } from "../../../utils"; import type { CollectionEntry } from "astro:content"; - +// Define data source from Astro.js incoming props const { blogEntry } = Astro.props; - +// Define TypeScript props interface interface Props { blogEntry: CollectionEntry<"blog">; } --- + +
+

{blogEntry.data.title}

+

{formatDate(blogEntry.data.pubDate)}

diff --git a/src/components/ui/cards/CardSmall.astro b/src/components/ui/cards/CardSmall.astro index af38f25..8b710ff 100644 --- a/src/components/ui/cards/CardSmall.astro +++ b/src/components/ui/cards/CardSmall.astro @@ -1,27 +1,30 @@ --- +// Import necessary modules and utilities import { Image } from "astro:assets"; - import type { CollectionEntry } from "astro:content"; - +// Define data source from Astro.js incoming props const { product } = Astro.props; - +// Define TypeScript props interface interface Props { product: CollectionEntry<"products">; } - +// Define classes to be used with the Image component const imageClass = "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110"; +// AnchorSVG - an SVG icon to be added next to the product's subtitle const AnchorSVG = ` `; --- + + {product.data.main.imgAlt} - +
- + {product.data.main.subTitle} diff --git a/src/components/ui/cards/CardWide.astro b/src/components/ui/cards/CardWide.astro index fe68893..beca57c 100644 --- a/src/components/ui/cards/CardWide.astro +++ b/src/components/ui/cards/CardWide.astro @@ -1,27 +1,30 @@ --- +// Import necessary modules and utilities import { Image } from "astro:assets"; - import type { CollectionEntry } from "astro:content"; - +// Define data source from Astro.js incoming props const { product } = Astro.props; - +// Define TypeScript props interface interface Props { product: CollectionEntry<"products">; } - +// Define classes to be used with the Image component const imageClass = "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110"; +// AnchorSVG - an SVG icon to be added next to the product's subtitle const AnchorSVG = ` `; --- + + {product.data.main.imgAlt} - +
- + {product.data.main.subTitle} - 404 + {title}

- Oops, this isn't the tool you were looking for! + {subTitle}

- Don't let this hiccup slow you down. Let's get you back to building - your masterpiece. + {content}

- + +
+