feat: cta, blog snippet and blog components

components/amplience/blog-snippet/blog-snippet.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { AmplienceContentItem } from '~/amplience-client';
+import AmplienceContent from '../wrapper/amplience-content';
+import CallToAction from '../call-to-action/call-to-action';
+import NextHead from 'next/head';
+import { AmplienceImage } from '../image/image.types';
+import { getImageURL } from '../image/image.utils';
+
+export type BlogSnippetProps = {
+  image: AmplienceContentItem;
+  title: string;
+  blogdate: string;
+  author: string;
+  category: string[];
+  description: string;
+  cta: any;
+  tags: any[];
+  keywords: string;
+};
+
+const buildCTAUrl = (cta: any) => {
+  switch (cta.type) {
+    case 'URL':
+      return cta.value;
+    case 'Category ID':
+      return `/category/${cta.value}`;
+    case 'Product SKU':
+      return `/product/${cta.value}`;
+    case 'Page ID':
+      return `/${cta.value}`;
+    default:
+      return '#';
+  }
+};
+
+const BlogSnippet = ({
+  image,
+  title,
+  blogdate,
+  author,
+  category,
+  description,
+  cta,
+  keywords,
+}: BlogSnippetProps) => {
+  return (
+    <>
+      <NextHead>
+        <title>{title || 'Amplience Retail Storefront Website'}</title>
+        <meta name="description" content={description} />
+        <meta property="og:title" content={title || 'Amplience Retail Storefront Website'} />
+        <meta property="og:description" content={description} />
+        <meta name="keywords" content={keywords} />
+        <meta property="og:image" content={getImageURL(image.image as AmplienceImage)} />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@amplience" />
+        <meta name="twitter:creator" content="@amplience" />
+        <meta name="twitter:title" content={title || 'Amplience Retail Storefront Website'} />
+        <meta name="twitter:description" content={description} />
+        <meta name="twitter:image" content={getImageURL(image.image as AmplienceImage)} />
+      </NextHead>
+      <div className="amp-dc-banner js_dc_banner">
+        <div className="amp-dc-banner-wrapper">
+          <div className="amp-dc-banner-pic-wrap">
+            <AmplienceContent content={image} />
+          </div>
+        </div>
+      </div>
+
+      <div className="amp-dc-snippet-info-wrap">
+        {category?.length ? <small>{category.join(', ')}</small> : null}
+        {title ? <h1 className="mb-8 text-3xl font-black lg:text-5xl">{title}</h1> : null}
+        <div className="amp-dc-snippet-info-wrap__description">
+          {author ? <h4 className="mb-2 text-gray-500">{author}</h4> : null}
+          {blogdate ? <h4 className="mb-2 text-gray-500">{blogdate}</h4> : null}
+        </div>
+
+        {description ? <h2>{description}</h2> : null}
+
+        {cta ? (
+          <CallToAction
+            key={cta?.label}
+            href={buildCTAUrl(cta)}
+            style={{ marginTop: '15px !important', marginRight: '15px !important' }}
+            variant={'contained'}
+          >
+            {cta?.label}
+          </CallToAction>
+        ) : null}
+      </div>
+    </>
+  );
+};
+
+export default BlogSnippet;

components/amplience/blog/blog.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { AmplienceContentItem } from '~/amplience-client';
+import AmplienceContent from '../wrapper/amplience-content';
+
+export interface BlogProps {
+  snippet: AmplienceContentItem;
+  contentTypes?: AmplienceContentItem[];
+  content: AmplienceContentItem;
+}
+
+const Blog = ({ snippet, content, contentTypes = [] }: BlogProps) => {
+  const Blog = (
+    <div>
+      <div>
+        <AmplienceContent content={snippet} />
+      </div>
+      <div
+        style={{
+          maxWidth: '100%',
+          margin: 'auto',
+        }}
+      >
+        <AmplienceContent content={content} />
+        {contentTypes.map((item: any, index: number) => (
+          <div key={index}>
+            <AmplienceContent content={item} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  return Blog;
+};
+
+export default Blog;

components/amplience/call-to-action/call-to-action.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import Link from 'next/link';
+
+interface CallToActionProps extends PropsWithChildren {
+  href: string;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: 'outlined' | 'contained';
+}
+
+const CallToAction = ({
+  children,
+  href,
+  className,
+  variant = 'outlined',
+  ...other
+}: CallToActionProps) => {
+  return href ? (
+    <Link
+      href={href}
+      className={clsx(
+        `font mt-4 rounded bg-[#333] px-3.5 py-2.5 text-xs font-bold text-[#eee] no-underline hover:bg-[#eee] hover:text-[#333] hover:no-underline`,
+        {
+          ['font mt-4 rounded bg-[#eee] px-3.5 py-2.5 text-xs font-bold text-[#333] no-underline hover:bg-[#333] hover:text-[#eee] hover:no-underline']:
+            variant === 'contained',
+        },
+        className,
+      )}
+      {...other}
+    >
+      {children}
+    </Link>
+  ) : null;
+};
+
+export default CallToAction;

components/amplience/wrapper/amplience-content.tsx

@@ -9,6 +9,8 @@ import Text from '../text/text';
 import Card from '../card/card';
 import CardList from '../card-list/card-list';
 import RichText from '../rich-text/rich-text';
+import Blog from '../blog/blog';
+import BlogSnippet from '../blog-snippet/blog-snippet';
 
 interface ComponentMapType {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -26,6 +28,8 @@ const COMPONENT_MAPPING: ComponentMapType = {
   'https://demostore.amplience.com/content/card': Card,
   'https://demostore.amplience.com/content/card-list': CardList,
   'https://demostore.amplience.com/content/rich-text': RichText,
+  'https://demostore.amplience.com/content/blog': Blog,
+  'https://demostore.amplience.com/content/blog-snippet': BlogSnippet,
 };
 
 const MappingNotFound = (content: AmplienceContentItem) => {