+
{hearts.map((heart) => {
const style = {
'--angle': `${heart.angle}deg`,
@@ -82,6 +94,9 @@ export function FloatingHearts({ intensity }: FloatingHeartsProps) {
key={heart.id}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-float-heart"
style={style}
+ onAnimationEnd={() => {
+ setHearts(prev => prev.filter(h => h.id !== heart.id));
+ }}
>
(null);
+
+ const locales: Locale[] = ['en', 'de', 'ru', 'ka', 'ar'];
+
+ const languageOptions: LanguageOption[] = locales.map((code) => ({
+ code,
+ name: t(`languages.${code}`)
+ }));
+
+ const currentLanguage = languageOptions.find(lang => lang.code === locale) || languageOptions[0];
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setIsOpen(false);
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('mousedown', handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [isOpen]);
+
+ useEffect(() => {
+ const handleEscape = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ setIsOpen(false);
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleEscape);
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleEscape);
+ };
+ }, [isOpen]);
+
+ const toggleDropdown = () => {
+ setIsOpen(!isOpen);
+ };
+
+ return (
+
+
+
+ {isOpen && (
+
+
+ {languageOptions.map((option) => (
+
setIsOpen(false)}
+ className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+ locale === option.code
+ ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400'
+ : 'text-gray-700 dark:text-gray-300'
+ }`}
+ role="menuitem"
+ >
+
+
{option.name}
+ {locale === option.code && (
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
+
+ Premium Skin
+
+
+
+
+
+
+
+
+
+ {skinName}
+
+
+ Unlock this premium skin to customize your experience!
+
+
+ {pricesLoading ? '...' : (price ?? '')}
+
+
+
+ {error && (
+
+ )}
+
+
+
+
+
+
+
+ Secure payment powered by Lemon Squeezy
+
+
+
+ {/* Main toggle button */}
+
+
+ {/* Dropdown menu */}
+ {isOpen && (
+
+
+ {skinOptions.map((option) => {
+ const skin = appConfig.skins[option.id];
+ const isPremium = skin.isPremium;
+
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ {/* Premium Checkout Modal */}
+ {showCheckout && (
+
+ )}
+
+ {message}
+
+ );
+}
diff --git a/app/components/ThemeToggle.tsx b/app/components/ThemeToggle.tsx
index 6172f85..b89e2b7 100644
--- a/app/components/ThemeToggle.tsx
+++ b/app/components/ThemeToggle.tsx
@@ -1,22 +1,138 @@
'use client';
+import { useState, useRef, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
import { useTheme } from '../providers/ThemeProvider';
-import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+import { SunIcon, MoonIcon, ComputerDesktopIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeOption {
+ mode: ThemeMode;
+ label: string;
+ icon: React.ReactNode;
+}
export function ThemeToggle() {
- const { darkMode, toggleDarkMode } = useTheme();
+ const { themeMode, setThemeMode } = useTheme();
+ const t = useTranslations('ui');
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef(null);
+
+ const themeOptions: ThemeOption[] = [
+ {
+ mode: 'light',
+ label: t('themes.light'),
+ icon:
+ },
+ {
+ mode: 'dark',
+ label: t('themes.dark'),
+ icon:
+ },
+ {
+ mode: 'system',
+ label: t('themes.system'),
+ icon:
+ }
+ ];
+
+ // Get current theme option
+ const currentTheme = themeOptions.find(option => option.mode === themeMode) || themeOptions[2];
+
+ // Handle clicking outside to close dropdown
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setIsOpen(false);
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('mousedown', handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [isOpen]);
+
+ // Handle escape key to close dropdown
+ useEffect(() => {
+ const handleEscape = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ setIsOpen(false);
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleEscape);
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleEscape);
+ };
+ }, [isOpen]);
+
+ const handleThemeSelect = (mode: ThemeMode) => {
+ setThemeMode(mode);
+ setIsOpen(false);
+ };
+
+ const toggleDropdown = () => {
+ setIsOpen(!isOpen);
+ };
return (
-
+ }>
+ {children}
+
+
+
)
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index 9138fbe..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import Image from 'next/image';
-import { FloatingHearts } from './components/FloatingHearts';
-
-export default function Home() {
- const [isShaken, setIsShaken] = useState(false);
- const [shakeIntensity, setShakeIntensity] = useState(0);
- const [lastUpdate, setLastUpdate] = useState(0);
- const [motionPermission, setMotionPermission] = useState
('prompt');
- const shakeThreshold = 15;
-
- // Check if device motion is available and handle permissions
- const requestMotionPermission = async () => {
- if (typeof window === 'undefined') return;
-
- // Check if device motion is available
- if (!('DeviceMotionEvent' in window)) {
- setMotionPermission('denied');
- return;
- }
-
- // Request permission on iOS devices
- if ('requestPermission' in DeviceMotionEvent) {
- try {
- // @ts-expect-error - TypeScript doesn't know about requestPermission
- const permission = await DeviceMotionEvent.requestPermission();
- setMotionPermission(permission);
- } catch (err) {
- console.error('Error requesting motion permission:', err);
- setMotionPermission('denied');
- }
- } else {
- // Android or desktop - no permission needed
- setMotionPermission('granted');
- }
- };
-
- const triggerShake = (intensity: number) => {
- // Start shake animation
- setIsShaken(true);
-
- // Always reset shake after 500ms
- setTimeout(() => {
- setIsShaken(false);
- }, 500);
-
- // Trigger hearts with a shorter duration
- setShakeIntensity(intensity);
- setTimeout(() => setShakeIntensity(0), 300);
- };
-
- useEffect(() => {
- const handleKeyPress = (event: KeyboardEvent) => {
- if (event.code === 'Space') {
- triggerShake(25);
- }
- };
-
- const handleMotion = (event: DeviceMotionEvent) => {
- const acceleration = event.accelerationIncludingGravity;
- if (!acceleration) return;
-
- const currentTime = new Date().getTime();
- const timeDiff = currentTime - lastUpdate;
-
- if (timeDiff > 100) {
- setLastUpdate(currentTime);
-
- const speed = Math.abs(acceleration.x || 0) +
- Math.abs(acceleration.y || 0) +
- Math.abs(acceleration.z || 0);
-
- if (speed > shakeThreshold) {
- triggerShake(speed);
- }
- }
- };
-
- // Only add motion listener if permission is granted
- if (typeof window !== 'undefined') {
- if (motionPermission === 'granted' && 'DeviceMotionEvent' in window) {
- window.addEventListener('devicemotion', handleMotion);
- }
- window.addEventListener('keydown', handleKeyPress);
- }
-
- return () => {
- if (typeof window !== 'undefined') {
- if (motionPermission === 'granted') {
- window.removeEventListener('devicemotion', handleMotion);
- }
- window.removeEventListener('keydown', handleKeyPress);
- }
- };
- }, [lastUpdate, motionPermission, triggerShake]);
-
- // Initial permission check
- useEffect(() => {
- requestMotionPermission();
- }, []);
-
- const handleClick = () => {
- triggerShake(25);
- };
-
- return (
-
-
-
-
-
-
-
- {motionPermission === 'prompt' ? (
-
- ) : motionPermission === 'granted' ? (
- "Shake your device, press spacebar, or click/tap frog!"
- ) : (
- "Press spacebar or click/tap frog!"
- )}
-
-
+