94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { QRCodeSVG } from 'qrcode.react';
|
|
import { Palette } from 'lucide-react';
|
|
|
|
const colorPresets = [
|
|
{ fg: '#000000', bg: '#FFFFFF' },
|
|
{ fg: '#0ea5e9', bg: '#e0f2fe' },
|
|
{ fg: '#8b5cf6', bg: '#f3e8ff' },
|
|
{ fg: '#f59e0b', bg: '#fef3c7' },
|
|
];
|
|
|
|
export const FeatureCustomizationDemo: React.FC = () => {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const [hasAnimated, setHasAnimated] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (hasAnimated) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setActiveIndex((prev) => {
|
|
const next = prev + 1;
|
|
if (next >= colorPresets.length) {
|
|
clearInterval(interval);
|
|
setHasAnimated(true);
|
|
return 0; // Reset to first
|
|
}
|
|
return next;
|
|
});
|
|
}, 1500);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [hasAnimated]);
|
|
|
|
const currentPreset = colorPresets[activeIndex];
|
|
|
|
return (
|
|
<div className="relative h-full min-h-[300px] bg-gradient-to-br from-purple-50 to-pink-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">
|
|
<Palette className="w-6 h-6 text-purple-600" />
|
|
<h3 className="text-2xl font-bold text-gray-900">Customization</h3>
|
|
</div>
|
|
<p className="text-gray-600">Brand your QR codes</p>
|
|
</div>
|
|
|
|
{/* QR Code with Morphing */}
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={activeIndex}
|
|
initial={{ scale: 0.8, rotate: -10, opacity: 0 }}
|
|
animate={{ scale: 1, rotate: 0, opacity: 1 }}
|
|
exit={{ scale: 0.8, rotate: 10, opacity: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.34, 1.56, 0.64, 1] }}
|
|
className="p-6 bg-white rounded-2xl shadow-lg"
|
|
>
|
|
<QRCodeSVG
|
|
value="https://qrmaster.net"
|
|
size={140}
|
|
fgColor={currentPreset.fg}
|
|
bgColor={currentPreset.bg}
|
|
level="M"
|
|
/>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Color Dots Indicator */}
|
|
<div className="flex justify-center gap-2 mt-6">
|
|
{colorPresets.map((preset, index) => (
|
|
<motion.button
|
|
key={index}
|
|
onClick={() => setActiveIndex(index)}
|
|
className={`w-3 h-3 rounded-full transition-all ${
|
|
index === activeIndex ? 'scale-125' : 'scale-100 opacity-50'
|
|
}`}
|
|
style={{
|
|
background: `linear-gradient(135deg, ${preset.fg}, ${preset.bg})`
|
|
}}
|
|
whileHover={{ scale: 1.3 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|