cf3a338b9f
- Introduced a new "max" subscription tier with associated monthly credits and top-up limits. - Updated existing subscription tiers' monthly credits and top-up limits for "starter", "pro", and "business". - Enhanced credit display and overview components to reflect the new tier and its attributes. - Integrated Polar authentication features for improved subscription management and credit handling.
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Slider as SliderPrimitive } from "radix-ui";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function Slider({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
|
return (
|
|
<SliderPrimitive.Root
|
|
data-slot="slider"
|
|
className={cn(
|
|
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<SliderPrimitive.Track
|
|
data-slot="slider-track"
|
|
className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted"
|
|
>
|
|
<SliderPrimitive.Range
|
|
data-slot="slider-range"
|
|
className="absolute h-full bg-primary"
|
|
/>
|
|
</SliderPrimitive.Track>
|
|
{Array.from({ length: props.value?.length ?? props.defaultValue?.length ?? 1 }).map((_, index) => (
|
|
<SliderPrimitive.Thumb
|
|
key={index}
|
|
data-slot="slider-thumb"
|
|
className="block size-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
|
|
/>
|
|
))}
|
|
</SliderPrimitive.Root>
|
|
);
|
|
}
|
|
|
|
export { Slider };
|