forked from 77media/video-flow
141 lines
3.8 KiB
TypeScript
141 lines
3.8 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
|
||
interface TaskInfoProps {
|
||
isLoading: boolean;
|
||
taskObject: any;
|
||
currentLoadingText: string;
|
||
}
|
||
|
||
export function TaskInfo({ isLoading, taskObject, currentLoadingText }: TaskInfoProps) {
|
||
if (isLoading) {
|
||
return (
|
||
<>
|
||
<Skeleton className="h-8 w-64 mb-2" />
|
||
<Skeleton className="h-4 w-96" />
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div className="title-JtMejk">
|
||
{taskObject?.projectName}：{taskObject?.taskName}
|
||
</div>
|
||
|
||
{currentLoadingText === '任务完成' ? (
|
||
<motion.div
|
||
className="flex items-center gap-3 justify-center"
|
||
initial={{ opacity: 0, y: -10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
<motion.div
|
||
className="w-2 h-2 rounded-full bg-emerald-500"
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [1, 0.5, 1]
|
||
}}
|
||
transition={{
|
||
duration: 1,
|
||
repeat: Infinity,
|
||
repeatDelay: 0.2
|
||
}}
|
||
/>
|
||
<motion.div
|
||
className="flex items-center gap-1.5"
|
||
initial="hidden"
|
||
animate="visible"
|
||
variants={{
|
||
hidden: { opacity: 0 },
|
||
visible: { opacity: 1 }
|
||
}}
|
||
>
|
||
<motion.span
|
||
className="text-emerald-500 font-medium"
|
||
variants={{
|
||
hidden: { opacity: 0, y: 20 },
|
||
visible: { opacity: 1, y: 0 }
|
||
}}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
{currentLoadingText}
|
||
</motion.span>
|
||
</motion.div>
|
||
<motion.div
|
||
className="w-2 h-2 rounded-full bg-emerald-500"
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [1, 0.5, 1]
|
||
}}
|
||
transition={{
|
||
duration: 1,
|
||
repeat: Infinity,
|
||
repeatDelay: 0.2,
|
||
delay: 0.3
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
) : (
|
||
<motion.div
|
||
className="flex items-center gap-2 justify-center"
|
||
initial={{ opacity: 0, y: -10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
<motion.div
|
||
className="w-1.5 h-1.5 rounded-full bg-blue-500"
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [1, 0.5, 1]
|
||
}}
|
||
transition={{
|
||
duration: 1,
|
||
repeat: Infinity,
|
||
repeatDelay: 0.2
|
||
}}
|
||
/>
|
||
<motion.p
|
||
className="normalS400 subtitle-had8uE text-blue-500/80"
|
||
key={currentLoadingText}
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
exit={{ opacity: 0, x: 10 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
{currentLoadingText}
|
||
</motion.p>
|
||
<motion.div
|
||
className="w-1.5 h-1.5 rounded-full bg-blue-500"
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [1, 0.5, 1]
|
||
}}
|
||
transition={{
|
||
duration: 1,
|
||
repeat: Infinity,
|
||
repeatDelay: 0.2,
|
||
delay: 0.3
|
||
}}
|
||
/>
|
||
<motion.div
|
||
className="w-1.5 h-1.5 rounded-full bg-blue-500"
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [1, 0.5, 1]
|
||
}}
|
||
transition={{
|
||
duration: 1,
|
||
repeat: Infinity,
|
||
repeatDelay: 0.2,
|
||
delay: 0.6
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|