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