import { Undo2Icon } from "lucide-react";
import { type ReactNode, useEffect, useState } from "react";
import { cn } from "../../lib/utils";
import { Button } from "../ui/button";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
/** Re-render every `intervalMs`; return a stable timestamp snapshot for render-time relative labels. */
export function useRelativeTimeTick(intervalMs = 1_000) {
const [nowMs, setNowMs] = useState(() => Date.now());
useEffect(() => {
const id = setInterval(() => setNowMs(Date.now()), intervalMs);
return () => clearInterval(id);
}, [intervalMs]);
return nowMs;
}
export function SettingsSection({
title,
icon,
headerAction,
children,
}: {
title: string;
icon?: ReactNode;
headerAction?: ReactNode;
children: ReactNode;
}) {
return (
{icon}
{title}
{headerAction}
{children}
);
}
export function SettingsRow({
title,
description,
status,
resetAction,
control,
children,
}: {
title: ReactNode;
description: string;
status?: ReactNode;
resetAction?: ReactNode;
control?: ReactNode;
children?: ReactNode;
}) {
return (
{title}
{resetAction}
{description}
{status ?
{status}
: null}
{control ? (
{control}
) : null}
{children}
);
}
export function SettingResetButton({ label, onClick }: { label: string; onClick: () => void }) {
return (
{
event.stopPropagation();
onClick();
}}
>
}
/>
Reset to default
);
}
export function SettingsPageContainer({ children }: { children: ReactNode }) {
return (
);
}