SubscriptionPlan() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ SubscriptionPlan() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

function SubscriptionPlan() {
  return (
    <Card>
      <CardContent>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Subscription Plan</FieldLegend>
            <FieldDescription>Choose your subscription plan.</FieldDescription>
            <RadioGroup defaultValue="plus">
              <FieldLabel htmlFor="plus-g4s">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Plus</FieldTitle>
                    <FieldDescription>
                      For individuals and small teams
                    </FieldDescription>
                  </FieldContent>
                  <RadioGroupItem value="plus" id="plus-g4s" />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="pro-m9d">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Pro</FieldTitle>
                    <FieldDescription>
                      For individuals and small teams
                    </FieldDescription>
                  </FieldContent>
                  <RadioGroupItem value="pro" id="pro-m9d" />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="enterprise-k7w">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Enterprise</FieldTitle>
                    <FieldDescription>
                      For large teams and enterprises
                    </FieldDescription>
                  </FieldContent>
                  <RadioGroupItem value="enterprise" id="enterprise-k7w" />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="custom-plan-r3t">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Custom</FieldTitle>
                    <FieldDescription>
                      For large teams and enterprises
                    </FieldDescription>
                  </FieldContent>
                  <RadioGroupItem value="custom-plan" id="custom-plan-r3t" />
                </Field>
              </FieldLabel>
            </RadioGroup>
          </FieldSet>
          <FieldSet>
            <FieldLegend>Display Settings</FieldLegend>
            <FieldDescription>Manage your display settings.</FieldDescription>
            <Field>
              <FieldLabel htmlFor="increase-contrast-b8h">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Increase Contrast</FieldTitle>
                    <FieldDescription>
                      Increase the contrast of the UI to make it easier to read.
                    </FieldDescription>
                  </FieldContent>
                  <Switch id="increase-contrast-b8h" />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="reduce-transparency-v5l">
                <Field orientation="horizontal">
                  <FieldContent>
                    <FieldTitle>Reduce Transparency</FieldTitle>
                    <FieldDescription>
                      Reduce the transparency of the UI to make it easier to
                      read.
                    </FieldDescription>
                  </FieldContent>
                  <Switch id="reduce-transparency-v5l" />
                </Field>