SonnerPositionConfig() — supabase Function Reference

Architecture documentation for the SonnerPositionConfig() function in sonner-expand-position.tsx from the supabase codebase.

Function tsx DesignSystem ThemeEngine calls 1

Entity Profile

DesignSystem→ ThemeEngine→ SonnerPositionConfig() — supabase Function Reference

Dependency Diagram

graph TD
  f18b265f_ffeb_bd76_c86e_4333d43751ea["SonnerPositionConfig()"]
  7f5e411e_7cf4_eced_8892_c042ff271b21["useConfig()"]
  f18b265f_ffeb_bd76_c86e_4333d43751ea -->|calls| 7f5e411e_7cf4_eced_8892_c042ff271b21
  style f18b265f_ffeb_bd76_c86e_4333d43751ea fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/components/sonner-expand-position.tsx lines 16–69

function SonnerPositionConfig() {
  const [config, setConfig] = useConfig()

  type Position = NonNullable<ComponentProps<typeof SonnerToaster>['position']>

  const positions: Position[] = [
    'top-left',
    'top-right',
    'bottom-left',
    'bottom-right',
    'top-center',
    'bottom-center',
  ]

  return (
    <div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
      <form>
        <FormItemLayout
          name="sonnerExpand"
          id="sonnerExpand"
          isReactForm={false}
          label="Use position prop"
          description="You will need to fire a few Sonner toasts first"
          layout="flex"
        >
          <Select_Shadcn_
            value={config.sonnerPosition}
            defaultValue={config.sonnerPosition}
            onValueChange={(e: Position) => {
              setConfig({
                ...config,
                sonnerPosition: e,
              })
            }}
          >
            <SelectTrigger_Shadcn_ className="w-[180px]">
              <SelectValue_Shadcn_ placeholder="Select a position" />
            </SelectTrigger_Shadcn_>
            <SelectContent_Shadcn_>
              <SelectGroup_Shadcn_>
                <SelectLabel_Shadcn_>Positions available</SelectLabel_Shadcn_>
                {positions.map((position) => (
                  <SelectItem_Shadcn_ key={position} value={position}>
                    {position}
                  </SelectItem_Shadcn_>
                ))}
              </SelectGroup_Shadcn_>
            </SelectContent_Shadcn_>
          </Select_Shadcn_>
        </FormItemLayout>
      </form>
    </div>
  )
}