Added some animations
This commit is contained in:
coolcoala
@@ -1,72 +1,123 @@
|
||||
import React from "react";
|
||||
import { motion, HTMLMotionProps, Transition, AnimatePresence } from "framer-motion";
|
||||
import { cn } from "@root/lib/utils";
|
||||
import { Power } from "lucide-react";
|
||||
|
||||
export interface PowerButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
checked?: boolean;
|
||||
loading?: boolean;
|
||||
export interface PowerButtonProps extends HTMLMotionProps<"button"> {
|
||||
checked?: boolean;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export const PowerButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
PowerButtonProps
|
||||
>(({ className, checked = false, loading = false, ...props }, ref) => {
|
||||
const state = checked ? "on" : "off";
|
||||
export const PowerButton = React.forwardRef<HTMLButtonElement, PowerButtonProps>(
|
||||
({ className, checked = false, loading = false, ...props }, ref) => {
|
||||
const state = checked ? "on" : "off";
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center justify-center h-44 w-44">
|
||||
<div
|
||||
className={cn(
|
||||
"absolute h-28 w-28 rounded-full blur-3xl transition-all duration-500",
|
||||
state === "on" ? "bg-green-400/60" : "bg-red-500/40",
|
||||
props.disabled && "opacity-0",
|
||||
)}
|
||||
/>
|
||||
// Единые, мягкие настройки для всех пружинных анимаций
|
||||
const sharedSpring: Transition = {
|
||||
type: "spring",
|
||||
stiffness: 100,
|
||||
damping: 30,
|
||||
mass: 1,
|
||||
};
|
||||
|
||||
<button
|
||||
ref={ref}
|
||||
type="button"
|
||||
disabled={loading || props.disabled}
|
||||
data-state={state}
|
||||
className={cn(
|
||||
"relative z-10 flex items-center justify-center h-36 w-36 rounded-full border-2",
|
||||
"backdrop-blur-sm bg-white/10 border-white/20",
|
||||
"text-red-500 shadow-[0_0_30px_rgba(239,68,68,0.6)]",
|
||||
"data-[state=on]:text-green-500 dark:data-[state=on]:text-white",
|
||||
"data-[state=on]:shadow-[0_0_50px_rgba(34,197,94,1)]",
|
||||
"transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none",
|
||||
"disabled:cursor-not-allowed disabled:scale-100",
|
||||
const glowColors = {
|
||||
on: "rgba(74, 222, 128, 0.6)",
|
||||
off: "rgba(239, 68, 68, 0.4)",
|
||||
};
|
||||
|
||||
// Стили ТОЛЬКО для отключенного состояния (но не для загрузки)
|
||||
props.disabled &&
|
||||
!loading &&
|
||||
"grayscale opacity-50 shadow-none bg-slate-100/70 border-slate-300/80",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Power
|
||||
className={cn(
|
||||
"h-20 w-20",
|
||||
!props.disabled &&
|
||||
"active:scale-90 transition-transform duration-300",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
const shadows = {
|
||||
on: "0px 0px 50px rgba(34, 197, 94, 1)",
|
||||
off: "0px 0px 30px rgba(239, 68, 68, 0.6)",
|
||||
disabled: "none",
|
||||
};
|
||||
|
||||
{loading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center z-20">
|
||||
<div
|
||||
className={cn(
|
||||
"h-full w-full animate-spin rounded-full border-4",
|
||||
"border-transparent",
|
||||
checked ? "border-t-green-500" : "border-t-red-500",
|
||||
"blur-xs",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
const textColors = {
|
||||
on: "rgb(255, 255, 255)",
|
||||
off: "rgb(239, 68, 68)",
|
||||
disabled: "rgb(100, 116, 139)",
|
||||
};
|
||||
|
||||
const isDisabled = props.disabled && !loading;
|
||||
const currentShadow = isDisabled ? shadows.disabled : checked ? shadows.on : shadows.off;
|
||||
const currentColor = isDisabled ? textColors.disabled : checked ? textColors.on : textColors.off;
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center justify-center h-44 w-44">
|
||||
<motion.div
|
||||
className="absolute h-28 w-28 rounded-full blur-3xl"
|
||||
animate={{
|
||||
backgroundColor: state === "on" ? glowColors.on : glowColors.off,
|
||||
opacity: isDisabled ? 0 : checked ? 1 : 0.3,
|
||||
scale: checked ? 1.2 : 0.8,
|
||||
}}
|
||||
transition={sharedSpring}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
className="absolute h-40 w-40 rounded-full blur-[60px]"
|
||||
animate={{
|
||||
backgroundColor: checked ? "rgba(34, 197, 94, 0.2)" : "rgba(239, 68, 68, 0.1)",
|
||||
opacity: isDisabled ? 0 : checked ? 0.8 : 0,
|
||||
scale: checked ? 1.4 : 0.6,
|
||||
}}
|
||||
transition={sharedSpring}
|
||||
/>
|
||||
|
||||
<motion.button
|
||||
ref={ref}
|
||||
type="button"
|
||||
disabled={loading || props.disabled}
|
||||
animate={{
|
||||
scale: checked ? 1.1 : 0.9,
|
||||
boxShadow: currentShadow,
|
||||
color: currentColor,
|
||||
}}
|
||||
whileHover={{ scale: checked ? 1.15 : 0.95 }}
|
||||
whileTap={{ scale: checked ? 1.05 : 0.85 }}
|
||||
transition={sharedSpring}
|
||||
className={cn(
|
||||
"group",
|
||||
"relative z-10 flex items-center justify-center h-36 w-36 rounded-full border-2",
|
||||
"backdrop-blur-sm bg-white/10 border-white/20",
|
||||
"focus:outline-none",
|
||||
"disabled:cursor-not-allowed",
|
||||
isDisabled && "grayscale opacity-50 bg-slate-100/70 border-slate-300/80",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<motion.span
|
||||
className="flex items-center justify-center"
|
||||
animate={{ scale: checked ? 1 / 1.1 : 1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={sharedSpring}
|
||||
>
|
||||
<Power className="h-20 w-20" />
|
||||
</motion.span>
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{loading && (
|
||||
<motion.div
|
||||
key="pb-loader"
|
||||
className="absolute inset-0 z-20 flex items-center justify-center"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"h-full w-full animate-spin rounded-full border-4",
|
||||
"border-transparent",
|
||||
checked ? "border-t-green-500" : "border-t-red-500",
|
||||
"blur-xs"
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user