All files / src/components/shared/JsonLd index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * JsonLd Component
 * Renders JSON-LD structured data scripts for SEO
 */

import type {
  ProductSchema,
  OrganizationSchema,
  WebsiteSchema,
  BreadcrumbListSchema,
  FAQPageSchema,
  CollectionPageSchema,
} from '@/lib/seo';

type JsonLdData =
  | ProductSchema
  | OrganizationSchema
  | WebsiteSchema
  | BreadcrumbListSchema
  | FAQPageSchema
  | CollectionPageSchema
  | Record<string, unknown>;

interface JsonLdProps {
  /** The structured data object to render */
  data: JsonLdData | JsonLdData[];
}

/**
 * Renders JSON-LD structured data in a script tag
 * Supports single schema or array of schemas
 */
export function JsonLd({ data }: JsonLdProps) {
  // Handle array of schemas (multiple schemas on one page)
  const jsonLdString = JSON.stringify(data);

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: jsonLdString }}
    />
  );
}

/**
 * Renders multiple JSON-LD schemas as separate script tags
 * Use this when you need each schema in its own script tag
 */
export function JsonLdMultiple({ schemas }: { schemas: JsonLdData[] }) {
  return (
    <>
      {schemas.map((schema, index) => (
        <script
          key={`jsonld-${index}`}
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
        />
      ))}
    </>
  );
}

export default JsonLd;