Toggle Group

Copyimport { ToggleGroup } from "@/components/ui/toggle-group";

Copy<ToggleGroup
  state="Monthly"
  items={[
    { value: "Monthly", label: "Monthly" },
    { value: "Yearly", label: "Yearly" },
  ]}
/>

Copyimport { H, W } from "@/lib/customizer-config";
import { Cursor } from "@/components/framecn/cursor";
import { useCursorPath } from "@/components/framecn/use-cursor-path";
import { ToggleGroup } from "@/components/framecn/toggle-group";
import { useToggleGroupTransition } from "@/components/framecn/use-toggle-group-transition";
 
const SEG_W = 88;
const PAD = 4;
const TRACK_W = PAD * 2 + SEG_W * 2;
const TRACK_LEFT = W / 2 - TRACK_W / 2;
const MONTHLY_X = TRACK_LEFT + PAD + SEG_W / 2;
const YEARLY_X = TRACK_LEFT + PAD + SEG_W + SEG_W / 2;
const TOGGLE_Y = H / 2;
 
const cursorStyle = useCursorPath([
  { at: 0, x: 80, y: 60 },
  { at: 32, x: YEARLY_X, y: TOGGLE_Y, duration: 28 },
  { at: 44, x: YEARLY_X, y: TOGGLE_Y, click: true, duration: 0 },
  { at: 80, x: MONTHLY_X, y: TOGGLE_Y, duration: 20 },
  { at: 90, x: MONTHLY_X, y: TOGGLE_Y, click: true, duration: 0 },
]);
 
const toggleStyle = useToggleGroupTransition([
  { at: 46, state: "Yearly", duration: 14 },
  { at: 92, state: "Monthly", duration: 14 },
]);
 
<ToggleGroup style={toggleStyle} />
<Cursor style={cursorStyle} variant="pointer" />;