ui.marketmaker.cc
Trading

Timeframe Select

Compact timeframe picker for chart toolbars. Ships with a standard set of CCXT timeframes and accepts a custom list of plain strings or labeled options.

Preview

Fullscreen

Source

Copy this file to components/trading/timeframe-select.tsx

tsx
'use client'

import * as React from 'react'
import { useMemo } from 'react'
import { Clock } from 'lucide-react'
import { cn } from '@/lib/utils'

export type TimeframeOption = string | { value: string; label: string }

export interface TimeframeSelectProps {
  value: string
  onChange: (timeframe: string) => void
  timeframes?: TimeframeOption[]
  className?: string
}

const DEFAULT_TIMEFRAMES: string[] = ['1m', '5m', '15m', '1h', '4h', '1d', '1w']

// Compact timeframe picker for charts. Defaults to a standard CCXT timeframe set.
// See components/trading/timeframe-select.tsx for the full implementation.

Props

PropType
value*string
onChange*(timeframe: string) => void
timeframes(string | { value: string; label: string })[]
classNamestring