From bfc01cc16de2fede441b63f5533096dbaafb6f1c Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Sat, 17 Feb 2024 08:16:16 +0400 Subject: [PATCH] Add new card components for blog and product sections Introduced four new Astro components: CardBlog, CardBlogRecent, CardSmall and CardWide, designed for displaying blog entries and products. These components have been equipped with asset imports, content collection types, and interactive prefetch links for better user experience and performance. --- src/components/ui/cards/CardBlog.astro | 52 ++++++++++++++++++++ src/components/ui/cards/CardBlogRecent.astro | 50 +++++++++++++++++++ src/components/ui/cards/CardSmall.astro | 42 ++++++++++++++++ src/components/ui/cards/CardWide.astro | 42 ++++++++++++++++ 4 files changed, 186 insertions(+) create mode 100644 src/components/ui/cards/CardBlog.astro create mode 100644 src/components/ui/cards/CardBlogRecent.astro create mode 100644 src/components/ui/cards/CardSmall.astro create mode 100644 src/components/ui/cards/CardWide.astro diff --git a/src/components/ui/cards/CardBlog.astro b/src/components/ui/cards/CardBlog.astro new file mode 100644 index 0000000..b478245 --- /dev/null +++ b/src/components/ui/cards/CardBlog.astro @@ -0,0 +1,52 @@ +--- +import AvatarBlog from "../avatars/AvatarBlog.astro"; +import {Image} from "astro:assets"; + +import {formatDate} from "../../../utils"; +import type {CollectionEntry} from "astro:content"; + +const {blogEntry} = Astro.props; + +interface Props { + blogEntry: CollectionEntry<"blog">; +} +--- + + +
+ {blogEntry.data.cardImageAlt} +
+ +
+
+ +
+ + + +
+

+ {blogEntry.data.author} +

+

+ {formatDate(blogEntry.data.pubDate)} + +

+
+
+
+
+ +
+
+

+ {blogEntry.data.title} +

+

+ {blogEntry.data.description} +

+
+
+
\ No newline at end of file diff --git a/src/components/ui/cards/CardBlogRecent.astro b/src/components/ui/cards/CardBlogRecent.astro new file mode 100644 index 0000000..cdfd9b5 --- /dev/null +++ b/src/components/ui/cards/CardBlogRecent.astro @@ -0,0 +1,50 @@ +--- + +import { Image } from "astro:assets"; + + +import type { CollectionEntry } from "astro:content"; +import AvatarBlogLarge from "../avatars/AvatarBlogLarge.astro"; +import PrimaryCTA from "../buttons/PrimaryCTA.astro"; + +const { blogEntry } = Astro.props; + +interface Props { + blogEntry: CollectionEntry<"blog">; +} +--- +
+
+
+ {blogEntry.data.cardImageAlt} +
+
+ +
+

+ + {blogEntry.data.description} + +

+ + +
+ + + +
+

+ {blogEntry.data.author} +

+

+ {blogEntry.data.role} +

+
+
+ +
+ +
+
+ +
\ No newline at end of file diff --git a/src/components/ui/cards/CardSmall.astro b/src/components/ui/cards/CardSmall.astro new file mode 100644 index 0000000..af38f25 --- /dev/null +++ b/src/components/ui/cards/CardSmall.astro @@ -0,0 +1,42 @@ +--- +import { Image } from "astro:assets"; + +import type { CollectionEntry } from "astro:content"; + +const { product } = Astro.props; + +interface Props { + product: CollectionEntry<"products">; +} + +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"; +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 new file mode 100644 index 0000000..fe68893 --- /dev/null +++ b/src/components/ui/cards/CardWide.astro @@ -0,0 +1,42 @@ +--- +import { Image } from "astro:assets"; + +import type { CollectionEntry } from "astro:content"; + +const { product } = Astro.props; + +interface Props { + product: CollectionEntry<"products">; +} + +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"; +const AnchorSVG = ` + + + `; +--- + + + {product.data.main.imgAlt} + +
+
+ + {product.data.main.subTitle} +