112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { QRCodeSVG } from 'qrcode.react';
|
|
import { FileSpreadsheet, ArrowRight } from 'lucide-react';
|
|
|
|
export const FeatureBulkDemo: React.FC = () => {
|
|
const [showQRs, setShowQRs] = useState(false);
|
|
const [hasAnimated, setHasAnimated] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (hasAnimated) return;
|
|
|
|
const timer = setTimeout(() => {
|
|
setShowQRs(true);
|
|
setHasAnimated(true);
|
|
}, 500);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [hasAnimated]);
|
|
|
|
const qrCodes = [
|
|
{ id: 1, url: 'product-1', delay: 0 },
|
|
{ id: 2, url: 'product-2', delay: 0.1 },
|
|
{ id: 3, url: 'product-3', delay: 0.2 },
|
|
{ id: 4, url: 'product-4', delay: 0.3 },
|
|
{ id: 5, url: 'product-5', delay: 0.4 },
|
|
{ id: 6, url: 'product-6', delay: 0.5 },
|
|
];
|
|
|
|
return (
|
|
<div className="relative h-full min-h-[300px] bg-gradient-to-br from-emerald-50 to-teal-100 rounded-2xl p-8 overflow-hidden">
|
|
<div className="relative z-10 h-full flex flex-col">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<FileSpreadsheet className="w-6 h-6 text-emerald-600" />
|
|
<h3 className="text-2xl font-bold text-gray-900">Bulk Creation</h3>
|
|
</div>
|
|
<p className="text-gray-600">Generate hundreds at once</p>
|
|
</div>
|
|
|
|
{/* Animation */}
|
|
<div className="flex-1 flex items-center justify-center gap-8">
|
|
{/* CSV Icon */}
|
|
<motion.div
|
|
animate={{
|
|
scale: showQRs ? 0.8 : 1,
|
|
opacity: showQRs ? 0.5 : 1,
|
|
}}
|
|
transition={{ duration: 0.5 }}
|
|
className="flex flex-col items-center"
|
|
>
|
|
<div className="w-20 h-24 bg-white rounded-lg shadow-md flex items-center justify-center border-2 border-emerald-200">
|
|
<FileSpreadsheet className="w-10 h-10 text-emerald-600" />
|
|
</div>
|
|
<p className="text-xs text-gray-600 mt-2 font-medium">products.csv</p>
|
|
</motion.div>
|
|
|
|
{/* Arrow */}
|
|
<motion.div
|
|
animate={{
|
|
x: showQRs ? [0, 10, 0] : 0,
|
|
opacity: showQRs ? 1 : 0.3,
|
|
}}
|
|
transition={{ duration: 0.5, repeat: showQRs ? Infinity : 0, repeatDelay: 1 }}
|
|
>
|
|
<ArrowRight className="w-8 h-8 text-emerald-600" />
|
|
</motion.div>
|
|
|
|
{/* QR Codes Grid */}
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{qrCodes.map((qr) => (
|
|
<motion.div
|
|
key={qr.id}
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{
|
|
scale: showQRs ? 1 : 0,
|
|
opacity: showQRs ? 1 : 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.4,
|
|
delay: showQRs ? qr.delay : 0,
|
|
ease: [0.34, 1.56, 0.64, 1]
|
|
}}
|
|
className="p-1.5 bg-white rounded shadow-sm"
|
|
>
|
|
<QRCodeSVG
|
|
value={`https://qrmaster.net/${qr.url}`}
|
|
size={32}
|
|
level="L"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Counter */}
|
|
<motion.div
|
|
animate={{ opacity: showQRs ? 1 : 0 }}
|
|
className="text-center"
|
|
>
|
|
<p className="text-sm font-semibold text-emerald-700">
|
|
✓ 6 QR codes generated
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|