Param.tsx76 lines · main

1	import { noop } from 'lodash'
2	import { Badge } from 'ui'
3
4	import Description from '@/components/interfaces/Docs/Description'
5
6	function getColumnType(type: string, format: string) {
7	// json and jsonb both have type=undefined, so check format instead
8	if (type === undefined && (format === 'jsonb' || format === 'json')) return 'json'
9
10	switch (type) {
11	case 'string':
12	return 'string'
13	case 'integer':
14	return 'number'
15	case 'json':
16	return 'json'
17	case 'number':
18	return 'number'
19	case 'boolean':
20	return 'boolean'
21	default:
22	return ''
23	}
24	}
25
26	interface ParamProps {
27	name: string
28	type: string
29	format: string
30	required: boolean
31	description: boolean
32	metadata?: any
33	onDesciptionUpdated?: () => void
34	}
35	const Param = ({
36	name,
37	type,
38	format,
39	required,
40	description,
41	metadata = {},
42	onDesciptionUpdated = noop,
43	}: ParamProps) => {
44	return (
45	<div className="not-prose">
46	<div className="mb-4 flex items-center gap-4">
47	<h3 className="heading-default text-foreground mb-0 mt-0">{name}</h3>
48
49	<Badge variant={required ? 'warning' : 'default'}>
50	{required ? 'Required' : 'Optional'}
51	</Badge>
52	</div>
53	{format && (
54	<div className="grid grid-cols-[auto_1fr] gap-y-2 gap-x-10 text-sm">
55	<label className="text-foreground-lighter">Type</label>
56	<div className="text-foreground">{getColumnType(type, format)}</div>
57	<label className="text-foreground-lighter">Format</label>
58	<div className="text-foreground">{format}</div>
59	{description !== false && (
60	<>
61	<label className="text-foreground-lighter">Description</label>
62	<div className="text-foreground pt-1">
63	<Description
64	content={description?.toString()}
65	metadata={metadata}
66	onChange={onDesciptionUpdated}
67	/>
68	</div>
69	</>
70	)}
71	</div>
72	)}
73	</div>
74	)
75	}
76	export default Param