FieldExamples() — ui Function Reference

Architecture documentation for the FieldExamples() function in preview.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ FieldExamples() — ui Function Reference

Dependency Diagram

graph TD
  053e045b_4e9d_a789_1e14_d9ff6dc6b3e6["FieldExamples()"]
  f02a92c6_0fdc_9231_5419_752092d638ff["preview.tsx"]
  053e045b_4e9d_a789_1e14_d9ff6dc6b3e6 -->|defined in| f02a92c6_0fdc_9231_5419_752092d638ff
  style 053e045b_4e9d_a789_1e14_d9ff6dc6b3e6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/preview.tsx lines 162–324

function FieldExamples() {
  const [gpuCount, setGpuCount] = React.useState(8)
  const [value, setValue] = useState([200, 800])

  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
    setGpuCount((prevCount) =>
      Math.max(1, Math.min(99, prevCount + adjustment))
    )
  }, [])

  const handleGpuInputChange = React.useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = parseInt(e.target.value, 10)
      if (!isNaN(value) && value >= 1 && value <= 99) {
        setGpuCount(value)
      }
    },
    []
  )

  return (
    <Example title="Fields">
      <FieldSet className="w-full max-w-md">
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Compute Environment</FieldLegend>
            <FieldDescription>
              Select the compute environment for your cluster.
            </FieldDescription>
            <RadioGroup defaultValue="kubernetes">
              <FieldLabel htmlFor="kubernetes-r2h">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Kubernetes</FieldTitle>
                    <FieldDescription>
                      Run GPU workloads on a K8s configured cluster. This is the
                      default.
                    </FieldDescription>
                  </FieldContent>
                  <RadioGroupItem
                    value="kubernetes"
                    id="kubernetes-r2h"
                    aria-label="Kubernetes"
                  />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="vm-z4k">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Virtual Machine</FieldTitle>
                    <FieldDescription>
                      Access a VM configured cluster to run workloads. (Coming
                      soon)
                    </FieldDescription>
                  </FieldContent>
                  <RadioGroupItem
                    value="vm"
                    id="vm-z4k"
                    aria-label="Virtual Machine"
                  />
                </Field>
              </FieldLabel>
            </RadioGroup>
          </FieldSet>
          <FieldSeparator />
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="number-of-gpus-f6l">
                Number of GPUs
              </FieldLabel>
              <FieldDescription>You can add more later.</FieldDescription>
            </FieldContent>
            <ButtonGroup>
              <Input
                id="number-of-gpus-f6l"
                value={gpuCount}
                onChange={handleGpuInputChange}
                size={3}
                maxLength={3}
              />
              <Button