quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove toggle animation

Browse Source
This commit is contained in:
Vyacheslav Matyukhin 2022-07-26 23:00:20 +04:00
parent 25c95170e6
commit d6cc3a419b
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
1 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/components/src/components/ui/Toggle.tsx
View File

@ -1,5 +1,4 @@
import clsx from "clsx"; import clsx from "clsx";
import { motion } from "framer-motion";
import React from "react"; import React from "react";
type IconType = (props: React.ComponentProps<"svg">) => JSX.Element; type IconType = (props: React.ComponentProps<"svg">) => JSX.Element;
@ -19,9 +18,7 @@ export const Toggle: React.FC<Props> = ({
}) => { }) => {
const CurrentIcon = status ? OnIcon : OffIcon; const CurrentIcon = status ? OnIcon : OffIcon;
return ( return (
<motion.button <button
layout
transition={{ duration: 0.2 }}
className={clsx( className={clsx(
"rounded-md py-0.5 bg-slate-500 text-white text-xs font-semibold flex items-center space-x-1", "rounded-md py-0.5 bg-slate-500 text-white text-xs font-semibold flex items-center space-x-1",
status ? "bg-slate-500" : "bg-gray-400", status ? "bg-slate-500" : "bg-gray-400",
@ -30,12 +27,10 @@ export const Toggle: React.FC<Props> = ({
)} )}
onClick={() => onChange(!status)} onClick={() => onChange(!status)}
> >
<motion.div layout transition={{ duration: 0.2 }}> <div>
<CurrentIcon className="w-6 h-6" /> <CurrentIcon className="w-6 h-6" />
</motion.div> </div>
<motion.span layout transition={{ duration: 0.2 }}> <span>{status ? onText : offText}</span>
{status ? onText : offText} </button>
</motion.span>
</motion.button>
); );
}; };