File size: 3,014 Bytes
c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 'use client';
import { motion } from 'framer-motion';
export default function AnimatedRow({
drop,
index,
prefix,
isVip = false,
}: {
drop: any;
index: number;
prefix: string;
isVip?: boolean;
}) {
return (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 0.4,
delay: index * 0.05,
ease: [0.22, 1, 0.36, 1],
}}
className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-4 px-6 md:px-8 py-5 border-b border-zinc-900/50 hover:bg-white/[0.02] transition-all duration-300 font-mono text-[10px] tracking-widest group items-center relative overflow-hidden"
>
<div className="col-span-1 md:col-span-3 flex md:contents justify-between text-zinc-600">
<div className="md:col-span-2 group-hover:text-zinc-400 transition-colors font-mono tabular-nums">
{new Date(drop.published_at).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
})}
</div>
<div className="md:col-span-1 text-zinc-700 group-hover:text-zinc-500 transition-colors">
{prefix}{drop.id.toString().padStart(3, '0')}
</div>
</div>
<div className="col-span-1 md:col-span-4 text-white font-black tracking-tighter uppercase text-xs italic group-hover:pl-2 transition-all duration-300">
{drop.title}
</div>
<div className="col-span-1 md:col-span-5 flex md:contents justify-between items-center text-[9px] tracking-[0.2em]">
<div className="md:col-span-2 text-zinc-500 group-hover:text-zinc-300 transition-colors flex items-center gap-2">
{drop.file_url ? (
<>
<span className="w-1 h-1 bg-green-500 rounded-full shadow-[0_0_5px_rgba(34,197,94,0.5)]" />
AVAILABLE
</>
) : (
<>
<span className="w-1 h-1 bg-zinc-800 rounded-full" />
N/A
</>
)}
</div>
<div
className={`md:col-span-2 ${
drop.status === 'checked'
? 'text-white'
: 'text-zinc-600 animate-pulse'
} transition-all duration-300`}
>
{drop.status === 'checked' ? '• SECURE' : '• UNVERIFIED'}
</div>
<div className="md:col-span-1 text-right">
{drop.file_url && (
isVip ? (
<a
href={drop.file_url}
target="_blank"
rel="noopener noreferrer"
className="bg-white text-black px-3 py-1.5 font-black text-[9px] tracking-widest hover:bg-zinc-200 transition-colors"
>
FETCH
</a>
) : (
<span className="text-zinc-800 border border-zinc-900 px-3 py-1.5 cursor-not-allowed">
LOCKED
</span>
)
)}
</div>
</div>
</motion.div>
);
}
|