{"size": 1020, "ext": "js", "max_stars_repo_path": "studio/components/to-be-cleaned/Docs/Param.js", "max_stars_repo_name": "kybru91/supabase", "max_stars_repo_stars_event_min_datetime": "2022-03-06T14:33:39.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-23T13:10:50.000Z", "max_issues_repo_path": "studio/components/to-be-cleaned/Docs/Param.js", "max_issues_repo_name": "kybru91/supabase", "max_issues_repo_issues_event_min_datetime": "2021-10-30T03:32:00.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-29T21:21:00.000Z", "max_forks_repo_path": "studio/components/to-be-cleaned/Docs/Param.js", "max_forks_repo_name": "kybru91/supabase", "max_forks_repo_forks_event_min_datetime": "2022-01-21T03:36:08.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-06T21:00:59.000Z"}
{"max_stars_count": 4, "max_issues_count": 148, "max_forks_count": 2, "avg_line_length": 27.5675675676, "max_line_length": 98, "alphanum_fraction": 0.5745098039}
import { Badge } from '@supabase/ui'
import Description from './Description'

const Param = ({
  name,
  type,
  format,
  required,
  description,
  metadata = {},
  onDesciptionUpdated = () => {},
}) => {
  return (
    <>
      <div className="flex justify-between items-center mb-4 ">
        <code className="px-2 inline-block">{name}</code>
        <Badge color={required ? 'amber' : 'scale'}>{required ? 'Required' : 'Optional'}</Badge>
      </div>
      {format && format != type && (
        <div className="mb-4 flex items-center gap-2">
          <label className="uppercase text-xs font-mono text-scale-900">Format:</label>
          <code className="px-2">{format}</code>
          {type}
        </div>
      )}
      {description !== false && (
        <>
          <label className="uppercase text-xs font-mono text-scale-900">Description</label>

          <Description content={description} metadata={metadata} onChange={onDesciptionUpdated} />
        </>
      )}
    </>
  )
}
export default Param
