42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { FC, ReactNode } from "react";
|
|
import * as ToggleGroupComponents from "@radix-ui/react-toggle-group";
|
|
import { motion } from "framer-motion";
|
|
|
|
const ToggleGroupItem: FC<{
|
|
children: ReactNode;
|
|
selected: boolean;
|
|
onClick?: () => void;
|
|
}> = ({ children, selected, onClick }) => {
|
|
return (
|
|
<ToggleGroupComponents.Item
|
|
data-selected={selected}
|
|
asChild
|
|
onClick={onClick}
|
|
className="hover:bg-primary/30 text-main data-[selected=true]:bg-primary/60
|
|
data-[selected=true]:text-indigo-200 flex h-6 w-6
|
|
items-center justify-center bg-neutral text-sm leading-4
|
|
first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black
|
|
focus:outline-none transition-colors"
|
|
value="left"
|
|
aria-label="Left aligned"
|
|
>
|
|
<motion.button animate={{ scale: 1 }} whileTap={{ scale: 0.9 }}>
|
|
{children}
|
|
</motion.button>
|
|
</ToggleGroupComponents.Item>
|
|
);
|
|
};
|
|
|
|
const ToggleGroup: FC<{ children: ReactNode }> = ({ children }) => (
|
|
<ToggleGroupComponents.Root
|
|
className="inline-flex my-auto bg-neutral-accent h-fit rounded shadow-[0_2px_10px] shadow-black space-x-px"
|
|
type="single"
|
|
defaultValue="center"
|
|
aria-label="Text alignment"
|
|
>
|
|
{children}
|
|
</ToggleGroupComponents.Root>
|
|
);
|
|
|
|
export { ToggleGroup, ToggleGroupItem };
|