status-monitor/ui/src/components/TimePeriodSelector.tsx

import type { TimePeriod } from "@/services/store";

type TimePeriodSelectorProps = {
    currentPeriod: TimePeriod | "realtime";
    onChange: (period: TimePeriod | "realtime") => void;
};

export function TimePeriodSelector({
    currentPeriod,
    onChange,
}: TimePeriodSelectorProps) {
    const periods: { value: TimePeriod | "realtime"; label: string }[] = [
        { value: "realtime", label: "Real time" },
        { value: "hour", label: "Past hour" },
        { value: "day", label: "Past day" },
        { value: "week", label: "Past week" },
        { value: "month", label: "Past month" },
        { value: "all", label: "All" },
    ];

    return (
        <div className="space-x-3">
            {periods.map((period) => (
                <button
                    key={period.value}
                    onClick={() => onChange(period.value)}
                    className={`px-4 py-2 text-md font-medium rounded-full bg-[#0d0d0d] border border-[#101010] ${currentPeriod === period.value && "text-purple-500 font-semibold"}`}
                >
                    {period.label}
                </button>
            ))}
        </div>
    );
}