45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import { Thing, WithContext } from 'schema-dts'
|
|
|
|
interface StructuredDataProps {
|
|
data: WithContext<Thing> | any
|
|
id?: string
|
|
}
|
|
|
|
/**
|
|
* StructuredData component for rendering JSON-LD
|
|
* Sanitizes output to prevent XSS attacks by replacing < with \u003c
|
|
*/
|
|
export default function StructuredData({ data, id }: StructuredDataProps) {
|
|
return (
|
|
<script
|
|
id={id || 'structured-data'}
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify(data).replace(/</g, '\\u003c')
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// Utility component for multiple structured data objects
|
|
interface MultipleStructuredDataProps {
|
|
dataArray: Array<WithContext<Thing> | any>
|
|
idPrefix?: string
|
|
}
|
|
|
|
export function MultipleStructuredData({ dataArray, idPrefix = 'structured-data' }: MultipleStructuredDataProps) {
|
|
return (
|
|
<>
|
|
{dataArray.map((data, index) => (
|
|
<StructuredData
|
|
key={`${idPrefix}-${index}`}
|
|
id={`${idPrefix}-${index}`}
|
|
data={data}
|
|
/>
|
|
))}
|
|
</>
|
|
)
|
|
}
|