DisplaySettings() — ui Function Reference

Architecture documentation for the DisplaySettings() function in display-settings.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ DisplaySettings() — ui Function Reference

Dependency Diagram

graph TD
  e6453508_781f_83ff_6531_098430ced540["DisplaySettings()"]
  2c0a3033_6a88_3002_3f51_5473fa7f97b8["display-settings.tsx"]
  e6453508_781f_83ff_6531_098430ced540 -->|defined in| 2c0a3033_6a88_3002_3f51_5473fa7f97b8
  style e6453508_781f_83ff_6531_098430ced540 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/(pages)/forms/display-settings.tsx lines 25–137

export function DisplaySettings() {
  return (
    <FieldSet>
      <FieldLegend>Display</FieldLegend>
      <FieldDescription>
        Configure display settings, brightness, refresh rate, and more.
      </FieldDescription>
      <FieldGroup>
        <Field orientation="responsive">
          <FieldContent>
            <FieldLabel htmlFor="resolution">Resolution</FieldLabel>
            <FieldDescription>Select the display resolution.</FieldDescription>
          </FieldContent>
          <Select>
            <SelectTrigger id="resolution" className="ml-auto">
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent align="end">
              <SelectItem value="1920x1080">1920 x 1080</SelectItem>
              <SelectItem value="2560x1440">2560 x 1440</SelectItem>
              <SelectItem value="3840x2160">3840 x 2160</SelectItem>
              <SelectItem value="auto">Auto</SelectItem>
            </SelectContent>
          </Select>
        </Field>
        <FieldSeparator />
        <Field orientation="responsive">
          <FieldContent>
            <FieldTitle>Brightness</FieldTitle>
            <FieldDescription>
              Adjust the display brightness level.
            </FieldDescription>
          </FieldContent>
          <div className="flex min-w-[150px] items-center gap-2">
            <SunDimIcon className="size-4 shrink-0" />
            <Slider
              id="brightness"
              defaultValue={[75]}
              max={100}
              step={1}
              aria-label="Brightness"
            />
            <SunIcon className="size-4 shrink-0" />
          </div>
        </Field>
        <FieldSeparator />
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="auto-brightness">
              Automatically Adjust Brightness
            </FieldLabel>
            <FieldDescription>
              Automatically adjust brightness based on ambient light.
            </FieldDescription>
          </FieldContent>
          <Checkbox id="auto-brightness" defaultChecked />
        </Field>
        <FieldSeparator />
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="true-tone">True Tone</FieldLabel>
            <FieldDescription>
              Automatically adjust colors to match ambient lighting.
            </FieldDescription>
          </FieldContent>
          <Switch id="true-tone" />
        </Field>
        <FieldSeparator />
        <Field orientation="responsive">
          <FieldContent>
            <FieldLabel htmlFor="refresh-rate">Refresh Rate</FieldLabel>
            <FieldDescription>
              Select the display refresh rate.
            </FieldDescription>
          </FieldContent>
          <Select>
            <SelectTrigger id="refresh-rate" className="ml-auto min-w-[200px]">
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent align="end">
              <SelectItem value="60hz">60 Hz</SelectItem>