forked from 77media/video-flow
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { Loader2 } from "lucide-react";
|
|
|
|
// 创建流光钮
|
|
export function ActionButton({
|
|
isCreating,
|
|
handleCreateVideo,
|
|
icon,
|
|
width = "w-12",
|
|
height = "h-12",
|
|
className = "",
|
|
disabled = false,
|
|
}: {
|
|
isCreating: boolean;
|
|
handleCreateVideo: () => void;
|
|
icon: React.ReactNode;
|
|
width?: string;
|
|
height?: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
}) {
|
|
return (
|
|
<div className={`relative group ${className}`}>
|
|
<div
|
|
data-alt="action-button"
|
|
className={`relative ${width} ${height} opacity-90 cursor-pointer overflow-hidden rounded-full bg-black z-10`}
|
|
>
|
|
<div className={`absolute z-10 -translate-x-12 group-hover:translate-x-12 transition-all duration-700 h-full ${width} bg-gradient-to-r from-gray-500 to-white/10 opacity-30 -skew-x-12`}></div>
|
|
<div className="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-full inset-0.5 bg-black">
|
|
<button
|
|
name="text"
|
|
className="w-full h-full opacity-90 rounded-full bg-black flex items-center justify-center disabled:cursor-not-allowed"
|
|
onClick={isCreating ? undefined : handleCreateVideo}
|
|
disabled={isCreating || disabled}
|
|
>
|
|
{isCreating ? <Loader2 className="w-5 h-5 animate-spin" /> : icon}
|
|
</button>
|
|
</div>
|
|
<div className={`absolute duration-1000 group-hover:animate-spin w-full ${height} bg-gradient-to-r from-[rgb(106,244,249)] to-[rgb(199,59,255)] blur-[20px]`}></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|