✨ Features: - Camera OCR card scanning with Tesseract.js - Beautiful glowing card effects and animations - Intelligent card matching and recognition - Mobile-responsive design with Tailwind CSS 🏗️ Architecture: - Frontend: React TypeScript application - Backend: Vercel Functions (replacing FastAPI) - Database: JSON file with exported card data - Deployment: Single Vercel project 📁 Structure: - api/ - Vercel Functions backend endpoints - src/ - React frontend components and logic - src/data/cards.json - Card database (12 cards) - vercel.json - Optimized Vercel configuration 💰 Cost: /bin/zsh additional (uses existing Vercel Pro) 🚀 Ready for immediate Vercel deployment
45 lines
No EOL
1 KiB
TypeScript
45 lines
No EOL
1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface GlowingCardProps {
|
|
children: React.ReactNode;
|
|
rarity: string;
|
|
className?: string;
|
|
}
|
|
|
|
const GlowingCard: React.FC<GlowingCardProps> = ({
|
|
children,
|
|
rarity,
|
|
className = ''
|
|
}) => {
|
|
// No mouse glow - just static container
|
|
|
|
// Get rarity border class
|
|
const getRarityBorderClass = () => {
|
|
const rarityName = rarity.toLowerCase().replace(/\s+/g, '');
|
|
return `rarity-border-${rarityName}`;
|
|
};
|
|
|
|
// Get optimized animation class based on rarity
|
|
const getAnimationClass = () => {
|
|
switch (rarity.toLowerCase()) {
|
|
case 'mythic':
|
|
return 'mythic-expansion premium-card-animation';
|
|
case 'legendary':
|
|
return 'premium-card-animation';
|
|
case 'super rare':
|
|
return 'premium-card-animation'; // Optimized performance version
|
|
default:
|
|
return 'card-expansion-organic';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${getRarityBorderClass()} ${getAnimationClass()} ${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GlowingCard;
|