ToggleGroup ToggleGroupItem.tsx

100% Statements 3/3

100% Branches 0/0

100% Functions 1/1

100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26  
 
 
 
 
 
 
 
 
105x
 
42x
 
 
42x
 
 
 
 
 
 
 
 
 
 
  import { ToggleGroupItem as RadixToggleGroupItem } from "@radix-ui/react-toggle-group";
import React from "react";
 
import { cn } from "@/utils";
 
type ToggleGroupItemProps = React.ComponentProps<typeof RadixToggleGroupItem> & {
  className?: string;
};
 
const ToggleGroupItem = ({ className, ...props }: ToggleGroupItemProps) => {
  const toggleGroupItemStyle =
    "inline-flex items-center justify-center px-3 py-1.5 text-lg bg-neutral-100 rounded-xs ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50 border-b-4 border-b-transparent";
 
  const toggleGroupItemActiveStyle =
    "data-[state=on]:border-b-primary-bright data-[state=on]:bg-blue-50 data-[state=on]:text-primary-bright data-[state=on]:font-bold";
 
  return (
    <RadixToggleGroupItem
      className={cn(toggleGroupItemStyle, toggleGroupItemActiveStyle, className)}
      {...props}
    />
  );
};
 
export default ToggleGroupItem;