forked from
standard.site/standard.site
Standard.site landing page built in Next.js
1'use client'
2
3import { BlocksIcon } from 'lucide-react'
4import { TabbedLexiconViewer } from '@/app/components'
5import { getAllSchemas, getLexicon, parseLexiconFields, } from '@/app/lib/lexicon'
6import { LEXICON_TABS } from '@/app/data/content'
7
8export function DefinitionsSection() {
9 const allSchemas = getAllSchemas()
10
11 // Build tab configs from the defined NSIDs
12 const tabs = LEXICON_TABS.map((nsid) => {
13 const schema = getLexicon(nsid)
14 return schema ? {
15 nsid,
16 schema,
17 fields: parseLexiconFields(schema),
18 } : null
19 }).filter((tab) => tab !== null)
20
21 if (tabs.length === 0) {
22 return (
23 <section id="definitions" className="flex flex-col gap-8">
24 <h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
25 Definitions
26 </h2>
27 <p className="text-xl leading-snug tracking-tight text-muted">
28 Failed to load lexicon definitions. Please try again later.
29 </p>
30 </section>
31 )
32 }
33
34 return (
35 <section id="definitions" className="flex flex-col gap-8">
36 <h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
37 Definitions
38 </h2>
39
40 <p className="text-base sm:text-xl leading-snug tracking-tight text-muted">
41 We currently define three main lexicons that cover the core building
42 blocks of long-form platforms: where content lives, what it
43 contains, and how users connect with publications.
44 </p>
45
46 <TabbedLexiconViewer tabs={ tabs } allSchemas={ allSchemas } />
47
48 {/* Modularity callout */}
49 <div className="flex gap-4 rounded-2xl border border-border bg-base-200 p-4">
50 <div className="pt-1">
51 <BlocksIcon className="size-4 text-base-content" />
52 </div>
53 <p className="flex-1 text-sm sm:text-base leading-snug tracking-tight text-muted">
54 <span className="font-semibold">Modularity.</span>{ ' ' }
55 Each lexicon is independent. Use them together for full support, or implement only
56 what your platform requires.
57 </p>
58 </div>
59 </section>
60 )
61}