deckhearth/src/components/GlowingCard.tsx
Randall Stillwell 6b81ed38b0 🚀 TCG Vault - Complete All-Vercel Setup
 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
2025-07-21 13:53:06 -05:00

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;