0176f89cb7
Introduces an exportOrdersToCSV function in lib/api-client.ts to allow exporting orders by status as a CSV file. Updates various UI components to use the '•' (bullet) symbol instead of '·' (middle dot) and replaces some emoji/unicode characters for improved consistency and compatibility. Also normalizes the 'use client' directive to include a BOM in many files.
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState } from "react"
|
||
import { isDecember } from "@/lib/utils/christmas"
|
||
|
||
export function ChristmasDecorations() {
|
||
const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number }>>([])
|
||
const [isDec, setIsDec] = useState(false)
|
||
|
||
useEffect(() => {
|
||
setIsDec(isDecember())
|
||
|
||
if (isDecember()) {
|
||
// Generate snowflakes
|
||
const flakes = Array.from({ length: 30 }, (_, i) => ({
|
||
id: i,
|
||
left: Math.random() * 100,
|
||
delay: Math.random() * 5,
|
||
duration: 8 + Math.random() * 4,
|
||
}))
|
||
setSnowflakes(flakes)
|
||
}
|
||
}, [])
|
||
|
||
if (!isDec) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
|
||
{/* Snowflakes */}
|
||
{snowflakes.map((flake) => (
|
||
<div
|
||
key={flake.id}
|
||
className="absolute top-0 text-white/60 text-xs animate-snowflake"
|
||
style={{
|
||
left: `${flake.left}%`,
|
||
animationDelay: `${flake.delay}s`,
|
||
animationDuration: `${flake.duration}s`,
|
||
}}
|
||
>
|
||
ÔØä
|
||
</div>
|
||
))}
|
||
|
||
{/* Twinkling stars in corners */}
|
||
<div className="absolute top-4 left-4 text-yellow-300 animate-twinkle text-lg">
|
||
Ô£¿
|
||
</div>
|
||
<div className="absolute top-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '0.5s' }}>
|
||
Ô£¿
|
||
</div>
|
||
<div className="absolute bottom-4 left-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1s' }}>
|
||
Ô£¿
|
||
</div>
|
||
<div className="absolute bottom-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1.5s' }}>
|
||
Ô£¿
|
||
</div>
|
||
|
||
{/* Christmas tree emoji decorations */}
|
||
<div className="absolute top-8 left-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '2s' }}>
|
||
ƒÄä
|
||
</div>
|
||
<div className="absolute top-8 right-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '3s' }}>
|
||
ƒÄä
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|