1
I need you to create a complete Structured Data system for my Next.js project. Please add ALL of the following files exactly as they are provided below, with all the component parts, and lib file. This is a comprehensive Structured Data system that includes various types of Google-supported structured data snippets.
2

3
Please create the following files with their exact content:
4

5
[V0_FILE]typescriptreact:file="lib/structured-data.tsx"
6
import type { 
7
  Organization, 
8
  WebSite, 
9
  BreadcrumbList, 
10
  Person,
11
  Product,
12
  Article,
13
  LocalBusiness,
14
  Event,
15
  Recipe,
16
  Course,
17
  JobPosting,
18
  WithContext 
19
} from "schema-dts"
20

21
// Base component for any structured data
22

23
interface BaseStructuredDataProps {
24
  data: WithContext<any>
25
  sanitize?: boolean
26
}
27

28
export function StructuredData({ data, sanitize = true }: BaseStructuredDataProps) {
29
  const jsonString = JSON.stringify(data)
30
  const sanitizedJson = sanitize ? jsonString.replace(/</g, "\\u003c") : jsonString
31
  
32
  return (
33
    <script
34
      type="application/ld+json"
35
      dangerouslySetInnerHTML={{ __html: sanitizedJson }}
36
    />
37
  )
38
}
39

40
// Organization Schema
41
interface OrganizationProps {
42
  name: string
43
  url: string
44
  logo?: string
45
  description?: string
46
  address?: {
47
    streetAddress?: string
48
    addressLocality?: string
49
    addressRegion?: string
50
    postalCode?: string
51
    addressCountry?: string
52
  }
53
  contactPoint?: {
54
    telephone?: string
55
    email?: string
56
    contactType?: string
57
  }
58
  sameAs?: string[]
59
  foundingDate?: string
60
}
61

62
export function OrganizationSchema(props: OrganizationProps) {
63
  const data: WithContext<Organization> = {
64
    "@context": "https://schema.org",
65
    "@type": "Organization",
66
    name: props.name,
67
    url: props.url,
68
    ...(props.logo && { logo: props.logo }),
69
    ...(props.description && { description: props.description }),
70
    ...(props.address && {
71
      address: {
72
        "@type": "PostalAddress",
73
        ...props.address
74
      }
75
    }),
76
    ...(props.contactPoint && {
77
      contactPoint: {
78
        "@type": "ContactPoint",
79
        ...props.contactPoint
80
      }
81
    }),
82
    ...(props.sameAs && { sameAs: props.sameAs }),
83
    ...(props.foundingDate && { foundingDate: props.foundingDate })
84
  }
85

86
  return <StructuredData data={data} />
87
}
88

89
// Website Schema
90
interface WebsiteProps {
91
  name: string
92
  url: string
93
  description?: string
94
  searchUrl?: string
95
  searchQueryParam?: string
96
  author?: {
97
    name: string
98
    url?: string
99
  }
100
  publisher?: {
101
    name: string
102
    logo?: string
103
  }
104
}
105

106
export function WebsiteSchema(props: WebsiteProps) {
107
  const data: WithContext<WebSite> = {
108
    "@context": "https://schema.org",
109
    "@type": "WebSite",
110
    name: props.name,
111
    url: props.url,
112
    ...(props.description && { description: props.description }),
113
    ...(props.searchUrl && {
114
      potentialAction: {
115
        "@type": "SearchAction",
116
        target: `${props.searchUrl}?${props.searchQueryParam || 'q'}={search_term_string}`,
117
        "query-input": `required name=search_term_string`
118
      }
119
    }),
120
    ...(props.author && {
121
      author: {
122
        "@type": "Person",
123
        name: props.author.name,
124
        ...(props.author.url && { url: props.author.url })
125
      }
126
    }),
127
    ...(props.publisher && {
128
      publisher: {
129
        "@type": "Organization",
130
        name: props.publisher.name,
131
        ...(props.publisher.logo && { logo: props.publisher.logo })
132
      }
133
    })
134
  }
135

136
  return <StructuredData data={data} />
137
}
138

139
// Breadcrumb Schema
140
interface BreadcrumbItem {
141
  name: string
142
  url: string
143
}
144

145
interface BreadcrumbProps {
146
  items: BreadcrumbItem[]
147
}
148

149
export function BreadcrumbSchema({ items }: BreadcrumbProps) {
150
  const data: WithContext<BreadcrumbList> = {
151
    "@context": "https://schema.org",
152
    "@type": "BreadcrumbList",
153
    itemListElement: items.map((item, index) => ({
154
      "@type": "ListItem",
155
      position: index + 1,
156
      name: item.name,
157
      item: item.url
158
    }))
159
  }
160

161
  return <StructuredData data={data} />
162
}
163

164
// Person Schema
165
interface PersonProps {
166
  name: string
167
  url?: string
168
  image?: string
169
  jobTitle?: string
170
  worksFor?: {
171
    name: string
172
    url?: string
173
  }
174
  description?: string
175
  email?: string
176
  telephone?: string
177
  address?: {
178
    streetAddress?: string
179
    addressLocality?: string
180
    addressRegion?: string
181
    postalCode?: string
182
    addressCountry?: string
183
  }
184
  sameAs?: string[]
185
}
186

187
export function PersonSchema(props: PersonProps) {
188
  const data: WithContext<Person> = {
189
    "@context": "https://schema.org",
190
    "@type": "Person",
191
    name: props.name,
192
    ...(props.url && { url: props.url }),
193
    ...(props.image && { image: props.image }),
194
    ...(props.jobTitle && { jobTitle: props.jobTitle }),
195
    ...(props.worksFor && {
196
      worksFor: {
197
        "@type": "Organization",
198
        name: props.worksFor.name,
199
        ...(props.worksFor.url && { url: props.worksFor.url })
200
      }
201
    }),
202
    ...(props.description && { description: props.description }),
203
    ...(props.email && { email: props.email }),
204
    ...(props.telephone && { telephone: props.telephone }),
205
    ...(props.address && {
206
      address: {
207
        "@type": "PostalAddress",
208
        ...props.address
209
      }
210
    }),
211
    ...(props.sameAs && { sameAs: props.sameAs })
212
  }
213

214
  return <StructuredData data={data} />
215
}
216

217
// Product Schema
218
interface ProductProps {
219
  name: string
220
  description: string
221
  image?: string[]
222
  brand?: string
223
  sku?: string
224
  mpn?: string
225
  offers?: {
226
    price: string
227
    priceCurrency: string
228
    availability?: string
229
    url?: string
230
    seller?: string
231
  }
232
  aggregateRating?: {
233
    ratingValue: number
234
    reviewCount: number
235
    bestRating?: number
236
    worstRating?: number
237
  }
238
  review?: Array<{
239
    author: string
240
    datePublished: string
241
    reviewBody: string
242
    reviewRating: {
243
      ratingValue: number
244
      bestRating?: number
245
    }
246
  }>
247
}
248

249
export function ProductSchema(props: ProductProps) {
250
  const data: WithContext<Product> = {
251
    "@context": "https://schema.org",
252
    "@type": "Product",
253
    name: props.name,
254
    description: props.description,
255
    ...(props.image && { image: props.image }),
256
    ...(props.brand && { brand: { "@type": "Brand", name: props.brand } }),
257
    ...(props.sku && { sku: props.sku }),
258
    ...(props.mpn && { mpn: props.mpn }),
259
    ...(props.offers && {
260
      offers: {
261
        "@type": "Offer",
262
        price: props.offers.price,
263
        priceCurrency: props.offers.priceCurrency,
264
        ...(props.offers.availability && { availability: `https://schema.org/${props.offers.availability}` }),
265
        ...(props.offers.url && { url: props.offers.url }),
266
        ...(props.offers.seller && {
267
          seller: {
268
            "@type": "Organization",
269
            name: props.offers.seller
270
          }
271
        })
272
      }
273
    }),
274
    ...(props.aggregateRating && {
275
      aggregateRating: {
276
        "@type": "AggregateRating",
277
        ratingValue: props.aggregateRating.ratingValue,
278
        reviewCount: props.aggregateRating.reviewCount,
279
        bestRating: props.aggregateRating.bestRating || 5,
280
        worstRating: props.aggregateRating.worstRating || 1
281
      }
282
    }),
283
    ...(props.review && {
284
      review: props.review.map(review => ({
285
        "@type": "Review",
286
        author: {
287
          "@type": "Person",
288
          name: review.author
289
        },
290
        datePublished: review.datePublished,
291
        reviewBody: review.reviewBody,
292
        reviewRating: {
293
          "@type": "Rating",
294
          ratingValue: review.reviewRating.ratingValue,
295
          bestRating: review.reviewRating.bestRating || 5
296
        }
297
      }))
298
    })
299
  }
300

301
  return <StructuredData data={data} />
302
}
303

304
// Article Schema
305
interface ArticleProps {
306
  headline: string
307
  description: string
308
  image?: string[]
309
  author: {
310
    name: string
311
    url?: string
312
  }
313
  publisher: {
314
    name: string
315
    logo?: string
316
  }
317
  datePublished: string
318
  dateModified?: string
319
  url: string
320
  articleBody?: string
321
  wordCount?: number
322
  keywords?: string[]
323
}
324

325
export function ArticleSchema(props: ArticleProps) {
326
  const data: WithContext<Article> = {
327
    "@context": "https://schema.org",
328
    "@type": "Article",
329
    headline: props.headline,
330
    description: props.description,
331
    ...(props.image && { image: props.image }),
332
    author: {
333
      "@type": "Person",
334
      name: props.author.name,
335
      ...(props.author.url && { url: props.author.url })
336
    },
337
    publisher: {
338
      "@type": "Organization",
339
      name: props.publisher.name,
340
      ...(props.publisher.logo && {
341
        logo: {
342
          "@type": "ImageObject",
343
          url: props.publisher.logo
344
        }
345
      })
346
    },
347
    datePublished: props.datePublished,
348
    ...(props.dateModified && { dateModified: props.dateModified }),
349
    url: props.url,
350
    ...(props.articleBody && { articleBody: props.articleBody }),
351
    ...(props.wordCount && { wordCount: props.wordCount }),
352
    ...(props.keywords && { keywords: props.keywords })
353
  }
354

355
  return <StructuredData data={data} />
356
}
357

358
// Local Business Schema
359
interface LocalBusinessProps {
360
  name: string
361
  description?: string
362
  url?: string
363
  telephone?: string
364
  email?: string
365
  address: {
366
    streetAddress: string
367
    addressLocality: string
368
    addressRegion: string
369
    postalCode: string
370
    addressCountry: string
371
  }
372
  geo?: {
373
    latitude: number
374
    longitude: number
375
  }
376
  openingHours?: string[]
377
  priceRange?: string
378
  image?: string[]
379
  aggregateRating?: {
380
    ratingValue: number
381
    reviewCount: number
382
  }
383
}
384

385
export function LocalBusinessSchema(props: LocalBusinessProps) {
386
  const data: WithContext<LocalBusiness> = {
387
    "@context": "https://schema.org",
388
    "@type": "LocalBusiness",
389
    name: props.name,
390
    ...(props.description && { description: props.description }),
391
    ...(props.url && { url: props.url }),
392
    ...(props.telephone && { telephone: props.telephone }),
393
    ...(props.email && { email: props.email }),
394
    address: {
395
      "@type": "PostalAddress",
396
      ...props.address
397
    },
398
    ...(props.geo && {
399
      geo: {
400
        "@type": "GeoCoordinates",
401
        latitude: props.geo.latitude,
402
        longitude: props.geo.longitude
403
      }
404
    }),
405
    ...(props.openingHours && { openingHours: props.openingHours }),
406
    ...(props.priceRange && { priceRange: props.priceRange }),
407
    ...(props.image && { image: props.image }),
408
    ...(props.aggregateRating && {
409
      aggregateRating: {
410
        "@type": "AggregateRating",
411
        ratingValue: props.aggregateRating.ratingValue,
412
        reviewCount: props.aggregateRating.reviewCount
413
      }
414
    })
415
  }
416

417
  return <StructuredData data={data} />
418
}
419

420
// Event Schema
421
interface EventProps {
422
  name: string
423
  description: string
424
  startDate: string
425
  endDate?: string
426
  location: {
427
    name: string
428
    address: {
429
      streetAddress: string
430
      addressLocality: string
431
      addressRegion: string
432
      postalCode: string
433
      addressCountry: string
434
    }
435
  }
436
  organizer?: {
437
    name: string
438
    url?: string
439
  }
440
  offers?: {
441
    price: string
442
    priceCurrency: string
443
    availability?: string
444
    url?: string
445
  }
446
  image?: string[]
447
  url?: string
448
}
449

450
export function EventSchema(props: EventProps) {
451
  const data: WithContext<Event> = {
452
    "@context": "https://schema.org",
453
    "@type": "Event",
454
    name: props.name,
455
    description: props.description,
456
    startDate: props.startDate,
457
    ...(props.endDate && { endDate: props.endDate }),
458
    location: {
459
      "@type": "Place",
460
      name: props.location.name,
461
      address: {
462
        "@type": "PostalAddress",
463
        ...props.location.address
464
      }
465
    },
466
    ...(props.organizer && {
467
      organizer: {
468
        "@type": "Organization",
469
        name: props.organizer.name,
470
        ...(props.organizer.url && { url: props.organizer.url })
471
      }
472
    }),
473
    ...(props.offers && {
474
      offers: {
475
        "@type": "Offer",
476
        price: props.offers.price,
477
        priceCurrency: props.offers.priceCurrency,
478
        ...(props.offers.availability && { availability: `https://schema.org/${props.offers.availability}` }),
479
        ...(props.offers.url && { url: props.offers.url })
480
      }
481
    }),
482
    ...(props.image && { image: props.image }),
483
    ...(props.url && { url: props.url })
484
  }
485

486
  return <StructuredData data={data} />
487
}
488
[V0_FILE]typescriptreact:file="components/structured-data-examples.tsx"
489
import {
490
  OrganizationSchema,
491
  WebsiteSchema,
492
  BreadcrumbSchema,
493
  PersonSchema,
494
  ProductSchema,
495
  ArticleSchema,
496
  LocalBusinessSchema,
497
  EventSchema
498
} from "@/lib/structured-data"
499

500
// Example usage components
501
export function ExampleOrganization() {
502
  return (
503
    <OrganizationSchema
504
      name="Acme Corporation"
505
      url="https://acme.com"
506
      logo="https://acme.com/logo.png"
507
      description="Leading provider of innovative solutions"
508
      address={{
509
        streetAddress: "123 Business St",
510
        addressLocality: "San Francisco",
511
        addressRegion: "CA",
512
        postalCode: "94105",
513
        addressCountry: "US"
514
      }}
515
      contactPoint={{
516
        telephone: "+1-555-123-4567",
517
        email: "contact@acme.com",
518
        contactType: "customer service"
519
      }}
520
      sameAs={[
521
        "https://twitter.com/acme",
522
        "https://linkedin.com/company/acme"
523
      ]}
524
    />
525
  )
526
}
527

528
export function ExampleWebsite() {
529
  return (
530
    <WebsiteSchema
531
      name="Acme Blog"
532
      url="https://acme.com"
533
      description="Latest insights and updates from Acme"
534
      searchUrl="https://acme.com/search"
535
      searchQueryParam="q"
536
      author={{
537
        name: "Acme Team",
538
        url: "https://acme.com/about"
539
      }}
540
      publisher={{
541
        name: "Acme Corporation",
542
        logo: "https://acme.com/logo.png"
543
      }}
544
    />
545
  )
546
}
547

548
export function ExampleBreadcrumb() {
549
  return (
550
    <BreadcrumbSchema
551
      items={[
552
        { name: "Home", url: "https://acme.com" },
553
        { name: "Products", url: "https://acme.com/products" },
554
        { name: "Software", url: "https://acme.com/products/software" }
555
      ]}
556
    />
557
  )
558
}
559

560
export function ExamplePerson() {
561
  return (
562
    <PersonSchema
563
      name="John Doe"
564
      url="https://johndoe.com"
565
      image="https://johndoe.com/photo.jpg"
566
      jobTitle="Software Engineer"
567
      worksFor={{
568
        name: "Acme Corporation",
569
        url: "https://acme.com"
570
      }}
571
      description="Experienced software engineer specializing in web development"
572
      email="john@johndoe.com"
573
      sameAs={[
574
        "https://twitter.com/johndoe",
575
        "https://linkedin.com/in/johndoe"
576
      ]}
577
    />
578
  )
579
}
580

581
export function ExampleProduct() {
582
  return (
583
    <ProductSchema
584
      name="Acme Widget Pro"
585
      description="Professional-grade widget for all your needs"
586
      image={["https://acme.com/widget-1.jpg", "https://acme.com/widget-2.jpg"]}
587
      brand="Acme"
588
      sku="AWP-001"
589
      offers={{
590
        price: "99.99",
591
        priceCurrency: "USD",
592
        availability: "InStock",
593
        url: "https://acme.com/products/widget-pro"
594
      }}
595
      aggregateRating={{
596
        ratingValue: 4.5,
597
        reviewCount: 127
598
      }}
599
    />
600
  )
601
}
602

603
export function ExampleArticle() {
604
  return (
605
    <ArticleSchema
606
      headline="How to Build Better Software"
607
      description="A comprehensive guide to software development best practices"
608
      image={["https://acme.com/article-image.jpg"]}
609
      author={{
610
        name: "Jane Smith",
611
        url: "https://acme.com/authors/jane-smith"
612
      }}
613
      publisher={{
614
        name: "Acme Blog",
615
        logo: "https://acme.com/logo.png"
616
      }}
617
      datePublished="2024-01-15"
618
      dateModified="2024-01-20"
619
      url="https://acme.com/blog/build-better-software"
620
      keywords={["software", "development", "best practices"]}
621
    />
622
  )
623
}
624

625
export function ExampleLocalBusiness() {
626
  return (
627
    <LocalBusinessSchema
628
      name="Acme Coffee Shop"
629
      description="Artisanal coffee and pastries in downtown"
630
      url="https://acmecoffee.com"
631
      telephone="+1-555-COFFEE"
632
      address={{
633
        streetAddress: "456 Main St",
634
        addressLocality: "San Francisco",
635
        addressRegion: "CA",
636
        postalCode: "94102",
637
        addressCountry: "US"
638
      }}
639
      geo={{
640
        latitude: 37.7749,
641
        longitude: -122.4194
642
      }}
643
      openingHours={[
644
        "Mo-Fr 07:00-19:00",
645
        "Sa 08:00-20:00",
646
        "Su 08:00-18:00"
647
      ]}
648
      priceRange="$$"
649
      aggregateRating={{
650
        ratingValue: 4.8,
651
        reviewCount: 203
652
      }}
653
    />
654
  )
655
}
656

657
export function ExampleEvent() {
658
  return (
659
    <EventSchema
660
      name="Acme Tech Conference 2024"
661
      description="Annual technology conference featuring the latest innovations"
662
      startDate="2024-06-15T09:00:00"
663
      endDate="2024-06-16T17:00:00"
664
      location={{
665
        name: "Convention Center",
666
        address: {
667
          streetAddress: "789 Convention Blvd",
668
          addressLocality: "San Francisco",
669
          addressRegion: "CA",
670
          postalCode: "94103",
671
          addressCountry: "US"
672
        }
673
      }}
674
      organizer={{
675
        name: "Acme Corporation",
676
        url: "https://acme.com"
677
      }}
678
      offers={{
679
        price: "299.00",
680
        priceCurrency: "USD",
681
        availability: "InStock",
682
        url: "https://acme.com/conference/tickets"
683
      }}
684
      image={["https://acme.com/conference-banner.jpg"]}
685
      url="https://acme.com/conference"
686
    />
687
  )
688
}
689
[V0_FILE]typescriptreact:file="app/page.tsx" isDeleted="true"
690
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
691
import { Badge } from "@/components/ui/badge"
692
import { 
693
  ExampleOrganization,
694
  ExampleWebsite,
695
  ExampleBreadcrumb,
696
  ExamplePerson,
697
  ExampleProduct,
698
  ExampleArticle,
699
  ExampleLocalBusiness,
700
  ExampleEvent
701
} from "@/components/structured-data-examples"
702

703
export default function StructuredDataLibrary() {
704
  const schemas = [
705
    {
706
      name: "Organization",
707
      description: "For companies, organizations, and institutions",
708
      component: <ExampleOrganization />,
709
      useCase: "Company pages, about pages, contact pages"
710
    },
711
    {
712
      name: "Website",
713
      description: "For websites and web applications",
714
      component: <ExampleWebsite />,
715
      useCase: "Homepage, main site pages"
716
    },
717
    {
718
      name: "Breadcrumb",
719
      description: "For navigation breadcrumbs",
720
      component: <ExampleBreadcrumb />,
721
      useCase: "Product pages, category pages, deep navigation"
722
    },
723
    {
724
      name: "Person",
725
      description: "For individual people and profiles",
726
      component: <ExamplePerson />,
727
      useCase: "Author pages, team member profiles, personal websites"
728
    },
729
    {
730
      name: "Product",
731
      description: "For products and services",
732
      component: <ExampleProduct />,
733
      useCase: "E-commerce product pages, service listings"
734
    },
735
    {
736
      name: "Article",
737
      description: "For blog posts, news articles, and content",
738
      component: <ExampleArticle />,
739
      useCase: "Blog posts, news articles, documentation"
740
    },
741
    {
742
      name: "Local Business",
743
      description: "For local businesses and physical locations",
744
      component: <ExampleLocalBusiness />,
745
      useCase: "Restaurant pages, store locations, service providers"
746
    },
747
    {
748
      name: "Event",
749
      description: "For events, conferences, and gatherings",
750
      component: <ExampleEvent />,
751
      useCase: "Event pages, conference listings, meetups"
752
    }
753
  ]
754

755
  return (
756
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
757
      <div className="max-w-7xl mx-auto">
758
        <div className="text-center mb-12">
759
          <h1 className="text-4xl font-bold text-slate-900 mb-4">
760
            Generic Structured Data Library
761
          </h1>
762
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
763
            A comprehensive collection of reusable structured data components for better SEO and search engine understanding. 
764
            Each component follows Schema.org standards and includes XSS protection.
765
          </p>
766
        </div>
767

768
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
769
          {schemas.map((schema) => (
770
            <Card key={schema.name} className="hover:shadow-lg transition-shadow">
771
              <CardHeader>
772
                <div className="flex items-center justify-between">
773
                  <CardTitle className="text-lg">{schema.name} Schema</CardTitle>
774
                  <Badge variant="secondary">Schema.org</Badge>
775
                </div>
776
                <CardDescription>{schema.description}</CardDescription>
777
              </CardHeader>
778
              <CardContent>
779
                <div className="space-y-3">
780
                  <div>
781
                    <h4 className="font-medium text-sm text-slate-700 mb-1">Use Cases:</h4>
782
                    <p className="text-sm text-slate-600">{schema.useCase}</p>
783
                  </div>
784
                  <div className="hidden">
785
                    {schema.component}
786
                  </div>
787
                </div>
788
              </CardContent>
789
            </Card>
790
          ))}
791
        </div>
792

793
        <Card className="mb-8">
794
          <CardHeader>
795
            <CardTitle>Key Features</CardTitle>
796
            <CardDescription>What makes this library special</CardDescription>
797
          </CardHeader>
798
          <CardContent>
799
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
800
              <div className="space-y-2">
801
                <h4 className="font-medium text-slate-900">🔒 XSS Protection</h4>
802
                <p className="text-sm text-slate-600">
803
                  Automatic sanitization of dangerous characters to prevent XSS attacks
804
                </p>
805
              </div>
806
              <div className="space-y-2">
807
                <h4 className="font-medium text-slate-900">📝 TypeScript Support</h4>
808
                <p className="text-sm text-slate-600">
809
                  Full TypeScript support with schema-dts for type safety
810
                </p>
811
              </div>
812
              <div className="space-y-2">
813
                <h4 className="font-medium text-slate-900">🎯 Schema.org Compliant</h4>
814
                <p className="text-sm text-slate-600">
815
                  All components follow official Schema.org specifications
816
                </p>
817
              </div>
818
              <div className="space-y-2">
819
                <h4 className="font-medium text-slate-900">🔧 Highly Configurable</h4>
820
                <p className="text-sm text-slate-600">
821
                  Flexible props system with optional fields for customization
822
                </p>
823
              </div>
824
              <div className="space-y-2">
825
                <h4 className="font-medium text-slate-900">⚡ Performance Optimized</h4>
826
                <p className="text-sm text-slate-600">
827
                  Lightweight components with minimal runtime overhead
828
                </p>
829
              </div>
830
              <div className="space-y-2">
831
                <h4 className="font-medium text-slate-900">🎨 Framework Agnostic</h4>
832
                <p className="text-sm text-slate-600">
833
                  Works with Next.js, React, and other modern frameworks
834
                </p>
835
              </div>
836
            </div>
837
          </CardContent>
838
        </Card>
839

840
        <Card>
841
          <CardHeader>
842
            <CardTitle>Installation & Usage</CardTitle>
843
            <CardDescription>How to use these components in your project</CardDescription>
844
          </CardHeader>
845
          <CardContent>
846
            <div className="space-y-4">
847
              <div>
848
                <h4 className="font-medium mb-2">1. Install Dependencies</h4>
849
                <code className="block bg-slate-100 p-3 rounded text-sm">
850
                  npm install schema-dts
851
                </code>
852
              </div>
853
              <div>
854
                <h4 className="font-medium mb-2">2. Copy the Library</h4>
855
                <p className="text-sm text-slate-600 mb-2">
856
                  Copy the <code>lib/structured-data.tsx</code> file to your project
857
                </p>
858
              </div>
859
              <div>
860
                <h4 className="font-medium mb-2">3. Use in Your Components</h4>
861
                <code className="block bg-slate-100 p-3 rounded text-sm whitespace-pre">
862
{`import { OrganizationSchema } from "@/lib/structured-data"
863

864
export default function AboutPage() {
865
  return (
866
    <div>
867
      <OrganizationSchema
868
        name="Your Company"
869
        url="https://yoursite.com"
870
        description="Your company description"
871
      />
872
      {/* Your page content */}
873
    </div>
874
  )
875
}`}
876
                </code>
877
              </div>
878
            </div>
879
          </CardContent>
880
        </Card>
881
      </div>
882
    </div>
883
  )
884
}
885
[V0_FILE]typescriptreact:file="README.md" type="code" isDeleted="true"
886
# Generic Structured Data Library
887

888
A comprehensive, type-safe library for adding structured data to your web applications. Built with TypeScript and following Schema.org standards.
889

890
## Features
891

892
- 🔒 **XSS Protection**: Automatic sanitization of dangerous characters
893
- 📝 **TypeScript Support**: Full type safety with schema-dts
894
- 🎯 **Schema.org Compliant**: Follows official specifications
895
- 🔧 **Highly Configurable**: Flexible props with optional fields
896
- ⚡ **Performance Optimized**: Lightweight with minimal overhead
897
- 🎨 **Framework Agnostic**: Works with Next.js, React, and more
898

899
## Installation
900

901
```bash
902
npm install schema-dts
903
```
904

905
## Available Schemas
906

907
### OrganizationSchema
908
For companies, organizations, and institutions.
909

910
```tsx
911

912
```
913

914
### WebsiteSchema
915
For websites and web applications.
916

917
```tsx
918

919
```
920

921
### ProductSchema
922
For e-commerce products and services.
923

924
```tsx
925

926
```
927

928
### ArticleSchema
929
For blog posts, news articles, and content.
930

931
```tsx
932

933
```
934

935
### PersonSchema
936
For individual people and profiles.
937

938
```tsx
939

940
```
941

942
### LocalBusinessSchema
943
For local businesses and physical locations.
944

945
```tsx
946

947
```
948

949
### EventSchema
950
For events, conferences, and gatherings.
951

952
```tsx
953

954
```
955

956
### BreadcrumbSchema
957
For navigation breadcrumbs.
958

959
```tsx
960

961
```
962

963
## Security
964

965
All components include XSS protection by default. The library automatically sanitizes dangerous characters like `<` to prevent injection attacks. You can disable this by setting `sanitize={false}` on the base `StructuredData` component, but this is not recommended.
966

967
## Validation
968

969
You can validate your structured data using:
970
- md-link-0
971
- md-link-1
972

973
## Contributing
974

975
Feel free to extend this library with additional schema types or improvements.
976