ResetButton() — ui Function Reference

Architecture documentation for the ResetButton() function in reset-button.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ ResetButton() — ui Function Reference

Dependency Diagram

graph TD
  7a244019_d1f7_7dc6_4fea_7fb5e113e90b["ResetButton()"]
  13e5e26c_b364_ac66_f476_d90b636b6f1a["reset-button.tsx"]
  7a244019_d1f7_7dc6_4fea_7fb5e113e90b -->|defined in| 13e5e26c_b364_ac66_f476_d90b636b6f1a
  style 7a244019_d1f7_7dc6_4fea_7fb5e113e90b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/reset-button.tsx lines 22–75

export function ResetButton() {
  const [params, setParams] = useDesignSystemSearchParams()

  const handleReset = React.useCallback(() => {
    setParams({
      base: params.base, // Keep the current base value.
      style: DEFAULT_CONFIG.style,
      baseColor: DEFAULT_CONFIG.baseColor,
      theme: DEFAULT_CONFIG.theme,
      iconLibrary: DEFAULT_CONFIG.iconLibrary,
      font: DEFAULT_CONFIG.font,
      menuAccent: DEFAULT_CONFIG.menuAccent,
      menuColor: DEFAULT_CONFIG.menuColor,
      radius: DEFAULT_CONFIG.radius,
      template: DEFAULT_CONFIG.template,
      item: "preview",
    })
  }, [setParams, params.base])

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
        >
          <div className="flex flex-col justify-start text-left">
            <div className="text-muted-foreground text-xs">Reset</div>
            <div className="text-foreground text-sm font-medium">
              Start Over
            </div>
          </div>
          <HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent className="dialog-ring p-4 sm:max-w-sm">
        <AlertDialogHeader>
          <AlertDialogTitle>Reset to defaults?</AlertDialogTitle>
          <AlertDialogDescription>
            This will reset all customization options to their default values.
            This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel className="rounded-lg">Cancel</AlertDialogCancel>
          <AlertDialogAction className="rounded-lg" onClick={handleReset}>
            Reset
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}