23 lines
1010 B
TypeScript
23 lines
1010 B
TypeScript
import React from 'react';
|
|
|
|
export const Candle: React.FC = () => {
|
|
return (
|
|
<div className="relative w-8 h-24 mx-2">
|
|
{/* Flame */}
|
|
<div className="absolute -top-6 left-1/2 -translate-x-1/2 w-4 h-8 candle-flame animate-flicker z-20 shadow-[0_0_20px_rgba(255,165,0,0.8)]"></div>
|
|
|
|
{/* Wick */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-0.5 h-2 bg-black z-10 opacity-50"></div>
|
|
|
|
{/* Candle Body */}
|
|
<div className="absolute top-2 w-full h-full bg-gradient-to-b from-purple-100 to-purple-300 rounded-t-lg shadow-inner">
|
|
{/* Drip */}
|
|
<div className="absolute top-0 left-0 w-full h-4 bg-purple-100 rounded-t-lg blur-[1px]"></div>
|
|
<div className="absolute top-2 left-1 w-2 h-6 bg-purple-100 rounded-b-full opacity-80 shadow-sm"></div>
|
|
</div>
|
|
|
|
{/* Glow Base */}
|
|
<div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-16 h-4 bg-purple-500/20 blur-xl rounded-full"></div>
|
|
</div>
|
|
);
|
|
}; |