1import type { FC, PropsWithChildren } from 'react';
 2import {
 3    RadioGroup,
 4    RadioGroupItem,
 5    Label
 6} from "@marzneshin/common/components";
 7
 8const SelectDateViewItem: FC<PropsWithChildren & { interval: string }> = ({ interval, children }) => (
 9    <div className="flex gap-2 justify-center items-center relative rounded-full py-0.5 px-1 cursor-pointer">
10        <RadioGroupItem
11            value={interval}
12            id={interval}
13            className="sr-only peer"
14        />
15        <Label
16            htmlFor={interval}
17            className="dark:peer-data-[state=checked]:bg-primary-foreground  dark:peer-data-[state=checked]:border-primary peer-data-[state=checked]:border-primary peer-data-[state=checked]:border-1 border-0 peer-data-[state=checked]:text-primary-foreground dark:peer-data-[state=checked]:text-primary peer-data-[state=checked]:bg-primary dark:peer-data-[state=checked]:text-white text-xs rounded-full py-0.5 px-2 transition-colors"
18        >
19            {children}
20        </Label>
21    </div>
22)
23
24export const SelectDateView = (
25    { timeRange, setTimeRange }: { timeRange: string, setTimeRange: (s: string) => void }
26) => {
27    return (
28        <RadioGroup
29            className="bg-muted border flex flex-row rounded-full"
30            value={timeRange}
31            onValueChange={setTimeRange}
32        >
33            <SelectDateViewItem interval="1d"> 24H</SelectDateViewItem>
34            <SelectDateViewItem interval="7d"> 7D</SelectDateViewItem>
35            <SelectDateViewItem interval="30d"> 30D</SelectDateViewItem>
36            <SelectDateViewItem interval="90d"> 3M</SelectDateViewItem>
37        </RadioGroup>
38    )
39};