Param() — supabase Function Reference

Architecture documentation for the Param() function in Param.tsx from the supabase codebase.

Function tsx ContentManagement Collections calls 1

Entity Profile

ContentManagement→ Collections→ Param() — supabase Function Reference

Dependency Diagram

graph TD
  564d1cb6_7086_82b9_d8b3_a8ba32e834f2["Param()"]
  17008518_6c21_525e_04b0_9e407d53b104["getColumnType()"]
  564d1cb6_7086_82b9_d8b3_a8ba32e834f2 -->|calls| 17008518_6c21_525e_04b0_9e407d53b104
  style 564d1cb6_7086_82b9_d8b3_a8ba32e834f2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Docs/Param.tsx lines 36–106

const Param = ({
  name,
  type,
  format,
  required,
  description,
  metadata = {},
  onDesciptionUpdated = noop,
}: ParamProps) => {
  return (
    <>
      <div className="mb-4 flex items-center justify-between ">
        <div className="flex gap-2 items-center">
          <div className="flex items-center gap-2">
            <label className="font-mono text-xs uppercase text-foreground-lighter  min-w-[55px]">
              Column
            </label>

            <div className="flex items-center gap-4">
              <span className="text-md text-foreground pb-0.5">{name}</span>
            </div>
          </div>
        </div>

        <Badge variant={required ? 'warning' : 'default'}>
          {required ? 'Required' : 'Optional'}
        </Badge>
      </div>
      {format && (
        <div className="grid gap-2 mt-6">
          <div className="mb-4 flex items-center gap-2">
            <label className="font-mono text-xs uppercase text-foreground-lighter min-w-[55px]">
              Type
            </label>
            <div>
              <span className="flex grow-0 bg-slate-300 px-2 py-0.5 rounded-md text-foreground-light">
                <span className="flex items-center gap-2 text-sm">
                  <Code size="14" />
                  <span>{getColumnType(type, format)}</span>
                </span>
              </span>
            </div>
          </div>
          <div className="mb-4 flex items-center gap-2">
            <label className="font-mono text-xs uppercase text-foreground-lighter min-w-[55px]">
              Format
            </label>
            <div>
              <span className="flex grow-0 bg-slate-300 px-2 py-0.5 rounded-md text-foreground-light">
                <span className="flex items-center gap-2 text-sm">
                  <Database size="14" />
                  <span>{format}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
      )}
      {description !== false && (
        <div className="grid gap-2 mt-2">
          <label className="font-mono text-xs uppercase text-foreground-lighter">Description</label>
          <Description
            content={description?.toString()}
            metadata={metadata}
            onChange={onDesciptionUpdated}
          />
        </div>
      )}
    </>
  )
}