add generic cta component

app/components/rich-text/CallToAction.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image'
+import ButtonLink from '../shared/ButtonLink'
+
+type Image = {
+  fields: {
+    title?: string
+    file: {
+      url: string
+    }
+  }
+}
+
+type CtaData = {
+  title: string
+  description?: string
+  linkPath: string
+  linkText: string
+  image?: Image | null
+}
+
+const CallToAction = ({ data }: { data: CtaData }) => {
+  const { linkPath, linkText, description, image, title } = data
+  const imageSrc = image?.fields?.file?.url
+  const imageAlt = image?.fields?.title || 'CTA Image'
+  const isExtenalLink = linkPath.includes('http')
+  return (
+    <span className="bg-th-bkg-1 border border-th-bkg-4 p-4 md:px-6 rounded-lg flex flex-col md:flex-row md:items-center md:justify-between my-4">
+      <span className="flex items-center space-x-3">
+        {imageSrc ? (
+          <Image
+            className="flex-shrink-0"
+            src={`https:${imageSrc}`}
+            alt={imageAlt}
+            height={56}
+            width={56}
+          />
+        ) : null}
+        <span>
+          <span className="text-th-fgd-2 text-base block font-display">
+            {title}
+          </span>
+          <span className="text-sm block text-th-fgd-2">{description}</span>
+        </span>
+      </span>
+      <span className="flex space-x-2 md:pl-4 pt-4 md:pt-0">
+        <ButtonLink
+          linkText={linkText}
+          path={linkPath}
+          size="small"
+          target={isExtenalLink ? '_blank' : undefined}
+        />
+      </span>
+    </span>
+  )
+}
+
+export default CallToAction

app/components/rich-text/RichText.tsx

@@ -4,6 +4,7 @@ import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
 import Link from 'next/link'
 import TokenCallToAction from './TokenCallToAction'
 import { formatNumericValue } from '../../utils/numbers'
+import CallToAction from './CallToAction'
 
 type RichTextProps = {
   document: RichTextDocument | undefined
@@ -94,6 +95,9 @@ function RichText({ document, currentPrice }: RichTextProps) {
         if (node.data.target.sys.contentType.sys.id === 'tokenCallToAction') {
           return <TokenCallToAction data={node.data.target.fields} />
         }
+        if (node.data.target.sys.contentType.sys.id === 'callToAction') {
+          return <CallToAction data={node.data.target.fields} />
+        }
         if (node.data.target.sys.contentType.sys.id === 'inlineTextPrice') {
           const priceType = node.data.target.fields.priceType
           if (priceType === 'Current price') {

contentful/types/TypeBlogPost.ts

@@ -10,7 +10,7 @@ export interface TypeBlogPostFields {
   postTitle: EntryFieldTypes.Symbol
   slug: EntryFieldTypes.Symbol
   author?: EntryFieldTypes.Symbol
-  category: EntryFieldTypes.Symbol<'Meme Coins' | 'Repost'>
+  category: EntryFieldTypes.Symbol<'Markets' | 'Meme Coins' | 'Repost'>
   authorProfileImage?: EntryFieldTypes.AssetLink
   postDescription: EntryFieldTypes.Text
   postContent: EntryFieldTypes.RichText

contentful/types/TypeCallToAction.ts

@@ -0,0 +1,24 @@
+import type {
+  ChainModifiers,
+  Entry,
+  EntryFieldTypes,
+  EntrySkeletonType,
+  LocaleCode,
+} from 'contentful'
+
+export interface TypeCallToActionFields {
+  title: EntryFieldTypes.Symbol
+  description?: EntryFieldTypes.Symbol
+  linkPath: EntryFieldTypes.Symbol
+  linkText: EntryFieldTypes.Symbol
+  image?: EntryFieldTypes.AssetLink
+}
+
+export type TypeCallToActionSkeleton = EntrySkeletonType<
+  TypeCallToActionFields,
+  'callToAction'
+>
+export type TypeCallToAction<
+  Modifiers extends ChainModifiers,
+  Locales extends LocaleCode,
+> = Entry<TypeCallToActionSkeleton, Modifiers, Locales>

contentful/types/TypeLearnPost.ts

@@ -10,7 +10,7 @@ export interface TypeLearnPostFields {
   postTitle: EntryFieldTypes.Symbol
   slug: EntryFieldTypes.Symbol
   author?: EntryFieldTypes.Symbol
-  category: EntryFieldTypes.Symbol<'Repost'>
+  category: EntryFieldTypes.Symbol<'Repost' | 'Spot Trading'>
   authorProfileImage?: EntryFieldTypes.AssetLink
   postDescription: EntryFieldTypes.Text
   postContent: EntryFieldTypes.RichText

contentful/types/TypeNewsArticle.ts

@@ -26,22 +26,26 @@ export interface TypeNewsArticleFields {
       | 'DeFi'
       | 'DePIN'
       | 'Derivatives'
-      | 'Domains'
+      | 'ELON'
       | 'ETH (Portal)'
+      | 'EURC'
       | 'Exchange'
       | 'GECKO'
       | 'GUAC'
       | 'Gaming'
       | 'Governance'
       | 'HNT'
+      | 'Infrastructure'
       | 'JLP'
       | 'JTO'
+      | 'JUP'
       | 'JitoSOL'
       | 'KIN'
       | 'LDO'
       | 'Layer 1'
       | 'Liquid Staking'
       | 'MNGO'
+      | 'MOUTAI'
       | 'Meme'
       | 'NEON'
       | 'NOS'
@@ -55,7 +59,6 @@ export interface TypeNewsArticleFields {
       | 'SAMO'
       | 'SLCL'
       | 'SOL'
-      | 'Social'
       | 'Stablecoin'
       | 'TBTC'
       | 'USDC'

contentful/types/TypeToken.ts

@@ -23,6 +23,7 @@ export interface TypeTokenFields {
       | 'Exchange'
       | 'Gaming'
       | 'Governance'
+      | 'Infrastructure'
       | 'Layer 1'
       | 'Liquid Staking'
       | 'Meme'

contentful/types/index.ts

@@ -3,6 +3,11 @@ export type {
   TypeBlogPostFields,
   TypeBlogPostSkeleton,
 } from './TypeBlogPost'
+export type {
+  TypeCallToAction,
+  TypeCallToActionFields,
+  TypeCallToActionSkeleton,
+} from './TypeCallToAction'
 export type {
   TypeInlineTextPrice,
   TypeInlineTextPriceFields,

next.config.js

@@ -19,6 +19,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'img.fotofolio.xyz/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'images.ctfassets.net/**',
+      },
     ],
   },
   reactStrictMode: true,