Files
supabase/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionIntervalSelector.tsx
T
Saxon FletcherandClaude Opus 5.5 c4d83ff536 feat(studio): slim edge function detail layout and move header to Overview
The function detail layout is now breadcrumbs plus tabs (PageNav), so
the Logs and Code tabs get the full height below the tabs. The name,
invoke URL and last deploy details move into a header on the Overview
tab, which also hosts the chart period selector.

Overview sections (invocations, errors, performance, usage) now share a
default-width PageContainer instead of each nesting a full-width one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-28 15:59:52 +10:00

31 lines
874 B
TypeScript

import { Button } from 'ui'
import {
EDGE_FUNCTION_CHART_INTERVALS,
getSegmentedButtonClassName,
} from './EdgeFunctionOverview.utils'
interface EdgeFunctionIntervalSelectorProps {
interval: string
onIntervalChange: (interval: string) => void
}
/** Segmented control for the period every Overview chart covers */
export const EdgeFunctionIntervalSelector = ({
interval,
onIntervalChange,
}: EdgeFunctionIntervalSelectorProps) => (
<div className="flex items-center">
{EDGE_FUNCTION_CHART_INTERVALS.map((item, index) => (
<Button
key={`function-filter-${item.key}`}
variant={interval === item.key ? 'secondary' : 'default'}
onClick={() => onIntervalChange(item.key)}
className={getSegmentedButtonClassName(index, EDGE_FUNCTION_CHART_INTERVALS.length)}
>
{item.label}
</Button>
))}
</div>
)