Day Range

1'use client';
2 
3import * as React from 'react';
4import { motion } from 'motion/react';
5import { cn } from '@/lib/utils';
6 
7export interface DayRangeProps extends React.HTMLAttributes<HTMLDivElement> {
8  low: number;
9  high: number;
10  current: number;
11  currencySymbol?: string;
12  lowLabel?: string;
13  highLabel?: string;
14  formatValue?: (value: number) => string;
15}
16 
17export const DayRange = React.forwardRef<HTMLDivElement, DayRangeProps>(
18  (
19    {
20      low,
21      high,
22      current,
23      currencySymbol = '₹',
24      lowLabel = "Today's low",
25      highLabel = "Today's high",
26      formatValue,
27      className,
28      ...props
29    },
30    ref
31  ) => {
32    // Ensure current is clamped between low and high
33    const clampedCurrent = Math.max(low, Math.min(high, current));
34 
35    // Calculate percentage (0 to 100)
36    const percentage =
37      high === low ? 0 : ((clampedCurrent - low) / (high - low)) * 100;
38 
39    const defaultFormat = (val: number) =>
40      new Intl.NumberFormat('en-IN', {
41        maximumFractionDigits: 2,
42      }).format(val);
43 
44    const formatter = formatValue || defaultFormat;
45 
46    return (
47      <div
48        ref={ref}
49        className={cn('flex w-full flex-col space-y-3', className)}
50        {...props}
51      >
52        {/* Top Labels */}
53        <div className='flex w-full items-center justify-between'>
54          <div className='flex flex-col gap-1'>
55            <span className='text-sm font-medium text-red-700'>{lowLabel}</span>
56            <span className='text-foreground text-xl font-bold'>
57              {currencySymbol}
58              {formatter(low)}
59            </span>
60          </div>
61          <div className='flex flex-col items-end gap-1'>
62            <span className='text-sm font-medium text-teal-700'>
63              {highLabel}
64            </span>
65            <span className='text-foreground text-xl font-bold'>
66              {currencySymbol}
67              {formatter(high)}
68            </span>
69          </div>
70        </div>
71 
72        {/* Range Bar */}
73        <div className='relative mt-2 h-1.5 w-full rounded-full bg-slate-200 dark:bg-slate-800'>
74          {/* Filled part */}
75          <motion.div
76            initial={{ width: 0 }}
77            animate={{ width: `${percentage}%` }}
78            transition={{ duration: 1, ease: 'easeOut' }}
79            className='absolute top-0 left-0 h-full rounded-full bg-blue-600'
80          />
81 
82          {/* Current Value Tooltip/Indicator */}
83          <motion.div
84// … truncated