From c3adb7e4cd588e1f964eaefe2ca6358cf236813a Mon Sep 17 00:00:00 2001
From: Joel Varty <joel@agilitycms.com>
Date: Wed, 23 Jun 2021 09:34:21 -0400
Subject: [PATCH] added featured prod
---
.../agility-modules/FeaturedProduct.tsx | 86 +++++++++++++++++++
components/agility-modules/index.ts | 4 +-
2 files changed, 89 insertions(+), 1 deletion(-)
create mode 100644 components/agility-modules/FeaturedProduct.tsx
diff --git a/components/agility-modules/FeaturedProduct.tsx b/components/agility-modules/FeaturedProduct.tsx
new file mode 100644
index 000000000..c0383b075
--- /dev/null
+++ b/components/agility-modules/FeaturedProduct.tsx
@@ -0,0 +1,86 @@
+import React, { FC } from 'react'
+import { URLField, Module, ImageField, AgilityImage } from "@agility/nextjs"
+import Link from 'next/link'
+import Image from "next/image"
+
+
+interface Fields {
+ title: string
+ description: string
+ cTA?: URLField
+ product: string
+ image: ImageField
+ imagePosition: 'left' | 'right'
+
+}
+
+const HeroModule: Module<Fields> = ({ module: { fields } }) => {
+
+ const productJSON = fields.product
+ const product = JSON.parse(productJSON)
+
+ return (
+ <div className="relative px-4">
+ <div className="flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto py-10 md:py-10 items-center">
+ <div className="md:w-6/12 flex-shrink-0 relative pb-20">
+ {fields.cTA ? (
+ <Link href={fields.cTA.href}>
+ <AgilityImage
+ src={fields.image.url}
+ alt={fields.image.label}
+ width="768"
+ height="400"
+ className="rounded-lg object-cover object-center cursor-pointer"
+ />
+ </Link>
+ ) : (
+ <AgilityImage
+ src={fields.image.url}
+ alt={fields.image.label}
+ width="768"
+ height="400"
+ className="rounded-lg object-cover object-center"
+ />
+ )}
+
+ <Link href={`/product${product.slug}`}>
+ <a className="absolute" style={{ bottom: "-10px", left: "-20px" }}>
+ <img src={product.imageUrl} alt={product.name} width={300} height={300} />
+ </a>
+ </Link>
+
+ </div>
+ <div
+ className={`md:w-6/12 mt-10 md:mt-0 ${fields.imagePosition != "right"
+ ? `md:ml-4 lg:ml-8 md:order-last`
+ : `md:mr-4 lg:mr-8 md:order-first`
+ }`}
+ >
+ <div className="g:py-8 text-center md:text-left">
+ {product && (
+ <span className="font-bold text-primary-500 text-sm text-center md:text-left uppercase">
+ {product.name}
+ </span>
+ )}
+ <h2 className="font-display text-4xl font-black text-secondary-500 md:text-3xl lg:text-5xl tracking-wide text-center mt-4 lg:leading-tight md:text-left">
+ {fields.title}
+ </h2>
+ <p className="mt-4 text-center md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-200">
+ {fields.description}
+ </p>
+ {fields.cTA &&
+ <Link href={fields.cTA.href}>
+ <a className="inline-block mt-8 md:mt-8 px-8 py-3 border border-transparent leading-6 font-medium text-white bg-black hover:bg-gray-700 focus:outline-none focus:border-primary-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+ {fields.cTA.text}
+ </a>
+ </Link>
+ }
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default HeroModule
+
diff --git a/components/agility-modules/index.ts b/components/agility-modules/index.ts
index 8224bc6d8..7d7aa9ec3 100644
--- a/components/agility-modules/index.ts
+++ b/components/agility-modules/index.ts
@@ -12,6 +12,7 @@ import Profile from "./Profile"
import Wishlist from "./Wishlist"
import BlogPostListing from "./BlogPostListing"
import BlogPostDetails from "./BlogPostDetails"
+import FeaturedProduct from "./FeaturedProduct"
const allModules = [
@@ -27,7 +28,8 @@ const allModules = [
{ name: "Profile", module: Profile },
{ name: "Wishlist", module: Wishlist },
{ name: "BlogPostListing", module: BlogPostListing },
- { name: "BlogPostDetails", module: BlogPostDetails }
+ { name: "BlogPostDetails", module: BlogPostDetails },
+ { name: "FeaturedProduct", module: FeaturedProduct }
]