diff --git a/src/components/shared/Breadcrumb.tsx b/src/components/shared/Breadcrumb.tsx new file mode 100644 index 000000000..1d8a26d2b --- /dev/null +++ b/src/components/shared/Breadcrumb.tsx @@ -0,0 +1,34 @@ +import Link from 'next/link'; + +export interface BreadcrumbItem { + name: string; + url: string; +} + +interface BreadcrumbProps { + items: BreadcrumbItem[]; + className?: string; +} + +export const Breadcrumb = ({ items, className = '' }: BreadcrumbProps) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/components/templates/comparisonPageTemplate.tsx b/src/components/templates/comparisonPageTemplate.tsx index 2057d33f1..803cea193 100644 --- a/src/components/templates/comparisonPageTemplate.tsx +++ b/src/components/templates/comparisonPageTemplate.tsx @@ -1,5 +1,8 @@ import Layout from '@/components/layout/Layout'; import Navbar from '@/components/layout/navbars/Navbar'; +import { Breadcrumb } from '@/components/shared/Breadcrumb'; +import { sm_breadcrumb } from '@/components/utils/schema-markup-generator'; +import Script from 'next/script'; import { PricingSectionWrapper } from '@/components/shared/pricing/PricingSectionWrapper'; import { CloudObjectStoragePriceCardSection } from '@/components/cloud-object-storage/PriceCardSection'; import { PromoCodeName } from '@/lib/types'; @@ -70,6 +73,8 @@ interface ComparisonPageProps { }; couponCodeName?: PromoCodeName; isS3Alternative?: boolean; + breadcrumbName?: string; + urlSlug?: string; } export const ComparisonPage = ({ @@ -85,6 +90,8 @@ export const ComparisonPage = ({ customSections = {}, couponCodeName, isS3Alternative = false, + breadcrumbName, + urlSlug, }: ComparisonPageProps): JSX.Element => { const metatags = metatagsDescriptions.filter((desc) => desc.id === metaTagId); const { @@ -138,8 +145,25 @@ export const ComparisonPage = ({ } = customSections; return ( - - + <> + {breadcrumbName && urlSlug && ( + + )} + + + + {breadcrumbName && urlSlug && ( +
+ +
+ )} @@ -205,5 +229,6 @@ export const ComparisonPage = ({