FieldExamples() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ FieldExamples() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/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
                variant="outline"