Billing interval toggle

1"use client"
2 
3import * as React from "react"
4import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
5import { cn } from "@/lib/utils"
6import { formatIntervalLabel } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format"
7 
8export type BillingIntervalToggleProps = {
9  intervals: string[]
10  value: string
11  onValueChange: (value: string) => void
12  className?: string
13}
14 
15export function BillingIntervalToggle({
16  intervals,
17  value,
18  onValueChange,
19  className,
20}: BillingIntervalToggleProps) {
21  return (
22    <Tabs value={value} onValueChange={onValueChange} className={cn("w-full", className)}>
23      <TabsList className="mx-auto flex w-fit">
24        {intervals.map((interval) => (
25          <TabsTrigger key={interval} value={interval}>
26            {formatIntervalLabel(interval)}
27          </TabsTrigger>
28        ))}
29      </TabsList>
30    </Tabs>
31  )
32}