SPB Git

Repository Public

switch.tsx 893 B 21 lines tsx

1'use client';2import * as React from 'react';3import * as S from '@radix-ui/react-switch';4import { cn } from '@/lib/cn';56export function Switch({ className, label, ...props }: React.ComponentProps<typeof S.Root> & { label: string }) {7  return (8    <S.Root9      aria-label={label}10      className={cn(11        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-line-2 bg-surface-2 transition-colors duration-150 data-[state=checked]:border-accent/60 data-[state=checked]:bg-accent/70 disabled:opacity-50',12        'pointer-coarse:h-7 pointer-coarse:w-12',13        className,14      )}15      {...props}16    >17      <S.Thumb className="block size-3.5 translate-x-0.5 rounded-full bg-text transition-transform duration-150 data-[state=checked]:translate-x-[18px] pointer-coarse:size-5 pointer-coarse:data-[state=checked]:translate-x-[24px]" />18    </S.Root>19  );20}21
Files main
Menu

Theme