feat: add snowflakes ❄️

package.json

@@ -90,6 +90,7 @@
         "react-intersection-observer": "^9.13.1",
         "react-markdown": "^9.0.1",
         "react-number-format": "^5.4.2",
+        "react-snowfall": "^2.2.0",
         "rehype-external-links": "^3.0.0",
         "remark-directive": "^3.0.0",
         "remark-directive-rehype": "^0.4.2",

src/app/(pages)/layout.tsx

@@ -1,5 +1,7 @@
 import { FC, ReactNode, Suspense } from 'react';
 
+import SnowfallManager from '@/components/snowfall-manager';
+
 import Footer from '@/features/common/footer.component';
 import ModalManager from '@/features/common/modal-manager.component';
 import NavBar from '@/features/common/navbar/navbar.component';
@@ -20,6 +22,10 @@ const Layout: FC<Props> = ({ children }) => {
             <NavBar />
 
             <main className="container mx-auto mt-8 max-w-screen-xl px-4 lg:mt-16">
+                <Suspense>
+                    <SnowfallManager />
+                </Suspense>
+
                 {children}
             </main>
             <div className="sticky bottom-4 mt-12 w-full">

src/components/snowfall-manager.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import Snowfall from 'react-snowfall';
+
+import { useSettingsContext } from '@/services/providers/settings-provider';
+
+const SnowfallManager = () => {
+    const { snowflakes } = useSettingsContext();
+
+    if (!snowflakes) {
+        return null;
+    }
+
+    return (
+        <Snowfall snowflakeCount={100} speed={[0.5, 1.5]} wind={[-0.5, 1]} />
+    );
+};
+
+export default SnowfallManager;

src/features/settings/customization/customization.component.tsx

@@ -5,6 +5,7 @@ import MaterialSymbolsСomputerOutlineRounded from '~icons/material-symbols/comp
 import MaterialSymbolsNightlightOutlineRounded from '~icons/material-symbols/nightlight-outline-rounded';
 import MaterialSymbolsSunnyOutlineRounded from '~icons/material-symbols/sunny-outline-rounded';
 
+import Small from '@/components/typography/small';
 import { Label } from '@/components/ui/label';
 import {
     Select,
@@ -15,11 +16,16 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
 
 import { useSettingsContext } from '@/services/providers/settings-provider';
 
 const Component = () => {
-    const { titleLanguage, setState: setSettingsState } = useSettingsContext();
+    const {
+        titleLanguage,
+        snowflakes,
+        setState: setSettingsState,
+    } = useSettingsContext();
     const { setTheme, theme } = useTheme();
 
     const handleChangeTitleLanguage = (value: string[]) =>
@@ -35,6 +41,13 @@ const Component = () => {
                 : prev,
         );
 
+    const handleChangeSnowflakes = (value: boolean) => {
+        setSettingsState!((prev) => ({
+            ...prev,
+            snowflakes: value,
+        }));
+    };
+
     return (
         <div className="flex w-full flex-col gap-6">
             <div className="flex w-full flex-col gap-2">
@@ -97,6 +110,18 @@ const Component = () => {
                     </SelectContent>
                 </Select>
             </div>
+            <div className="flex w-full flex-row items-center justify-between gap-2">
+                <div className="flex flex-col">
+                    <Label>Сніжинки ❄️</Label>
+                    <Small className="text-muted-foreground">
+                        Включити анімацію сніжинок на сайті
+                    </Small>
+                </div>
+                <Switch
+                    checked={snowflakes}
+                    onCheckedChange={handleChangeSnowflakes}
+                />
+            </div>
         </div>
     );
 };

src/services/providers/settings-provider.tsx

@@ -13,6 +13,7 @@ import {
 interface State {
     titleLanguage?: 'title_en' | 'title_ua' | 'title_ja';
     editTags?: string[];
+    snowflakes?: boolean;
 }
 
 interface ContextProps extends State {