45 lines
1 KiB
TypeScript
45 lines
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;
|