ShippingMethods() — ui Function Reference

Architecture documentation for the ShippingMethods() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ShippingMethods() — ui Function Reference

Dependency Diagram

graph TD
  2b44187d_948a_c670_3adc_e67de1a5a925["ShippingMethods()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  2b44187d_948a_c670_3adc_e67de1a5a925 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 2b44187d_948a_c670_3adc_e67de1a5a925 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 968–1134

function ShippingMethods() {
  return (
    <div className="flex flex-col gap-6">
      <Card>
        <CardContent>
          <FieldSet>
            <FieldLegend>Shipping Method</FieldLegend>
            <FieldDescription>
              Select the shipping method for your order.
            </FieldDescription>
            <RadioGroup>
              <FieldLabel htmlFor="pickup-x8m">
                <Field orientation="horizontal">
                  <RadioGroupItem value="pickup" id="pickup-x8m" />
                  <FieldContent>
                    <FieldTitle>
                      Pick up your order at a nearby store
                    </FieldTitle>
                    <FieldDescription>
                      Available at most stores.
                    </FieldDescription>
                  </FieldContent>
                  <Badge
                    variant="secondary"
                    className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
                  >
                    Free
                  </Badge>
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="delivery-v3s">
                <Field orientation="horizontal">
                  <RadioGroupItem value="delivery" id="delivery-v3s" />
                  <FieldContent>
                    <FieldTitle>Delivery to your door</FieldTitle>
                    <FieldDescription>
                      We will deliver your order to your door.
                    </FieldDescription>
                  </FieldContent>
                  <Badge
                    variant="secondary"
                    className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
                  >
                    $10.00
                  </Badge>
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="express-l7r">
                <Field orientation="horizontal">
                  <RadioGroupItem value="express" id="express-l7r" />
                  <FieldContent>
                    <FieldTitle>Express delivery</FieldTitle>
                    <FieldDescription>
                      Next day delivery. Available in most areas.
                    </FieldDescription>
                  </FieldContent>
                  <Badge
                    variant="secondary"
                    className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
                  >
                    $15.00
                  </Badge>
                </Field>
              </FieldLabel>
            </RadioGroup>
          </FieldSet>
        </CardContent>
      </Card>
      <form>
        <FieldGroup className="bg-background gap-6 rounded-lg border p-6">
          <FieldSet>
            <FieldLegend>GPU Type</FieldLegend>
            <FieldDescription>
              Select the GPU type for your cluster.
            </FieldDescription>
            <RadioGroup defaultValue="h100">
              <FieldLabel htmlFor="h100-v00">
                <Field orientation="horizontal">
                  <RadioGroupItem value="h100" id="h100-v00" />
                  <FieldContent>
                    <FieldTitle>NVIDIA H100</FieldTitle>