feat: change font item size

Author: choosenname

app/layout.tsx

@@ -10,6 +10,7 @@ import {SocketProvider} from "@/components/providers/socket-provider";
 import {QueryProvider} from "@/components/providers/query-provider";
 import {Toaster} from "@/components/ui/toaster";
 import Notifications from "@/components/notifications";
+import { FontSizeProvider } from "@/components/providers/FontSizeProvider";
 
 const inter = Inter({subsets: ["latin"]});
 
@@ -37,7 +38,9 @@ export default async function RootLayout({
                 <QueryProvider>
                     <Toaster/>
                     <Notifications />
-                    {children}
+                    <FontSizeProvider>
+                        {children}
+                    </FontSizeProvider>
                 </QueryProvider>
             </SocketProvider>
         </ThemeProvider>

components/auth/user-button.tsx

@@ -13,6 +13,7 @@ import {UserAvatar} from "@/components/user-avatar";
 import {Button} from "@/components/ui/button";
 import {useModal} from "@/hooks/use-modal-store";
 import {User} from "@prisma/client";
+import {useFontSize} from "@/components/providers/FontSizeProvider";
 
 
 interface UserButtonProps {
@@ -21,6 +22,7 @@ interface UserButtonProps {
 
 export const UserButton = ({user}: UserButtonProps) => {
     const { onOpen } = useModal();
+    const { changeFontSize } = useFontSize();
 
     return (
         <DropdownMenu>
@@ -34,9 +36,14 @@ export const UserButton = ({user}: UserButtonProps) => {
                         Профиль
                     </DropdownMenuItem>
                 </Button>
+                <div>
+                    <button onClick={() => changeFontSize('14px')}>14px</button>
+                    <button onClick={() => changeFontSize('16px')}>16px</button>
+                    <button onClick={() => changeFontSize('18px')}>18px</button>
+                </div>
                 <LogoutButton>
                     <DropdownMenuItem>
-                        <LogOut className="h-4 w-4 mr-2" />
+                        <LogOut className="h-4 w-4 mr-2"/>
                         Выйти
                     </DropdownMenuItem>
                 </LogoutButton>

components/chat/conver-chat-item.tsx

@@ -23,6 +23,7 @@ import {FileType} from "next/dist/lib/file-exists";
 import {useModal} from "@/hooks/use-modal-store";
 import {useParams, useRouter} from "next/navigation";
 import {ExtendedUser} from "@/next-auth";
+import {useFontSize} from "@/components/providers/FontSizeProvider";
 
 interface ChatItemProps {
     id: string;
@@ -68,6 +69,7 @@ export const ConverChatItem = ({
     const {onOpen} = useModal();
     const params = useParams();
     const router = useRouter();
+    const { fontSize } = useFontSize();
 
     const onMemberClick = () => {
         if (member.id === currentMember.id) {
@@ -216,7 +218,8 @@ export const ConverChatItem = ({
                     </a>
                 </div>)}
                 {!fileUrl && !isEditing && (
-                    <p className={cn("text-sm text-zinc-600 dark:text-zinc-300", deleted && "italic text-zinc-500 dark:text-zinc-400 text-xs mt-1")}>
+                    <p style={{fontSize: fontSize}} className={cn("text-sm text-zinc-600 dark:text-zinc-300",
+                        deleted && "italic text-zinc-500 dark:text-zinc-400 text-xs mt-1", )}>
                         {content}
                         {isUpdated && !deleted && (<span className="text-[10px] mx-2 text-zinc-500 dark:text-zinc-400">
                   (edited)

components/providers/FontSizeProvider.tsx

@@ -0,0 +1,42 @@
+"use client"
+import React, { createContext, useState, useContext, useEffect } from 'react';
+
+interface FontSizeContextType {
+    fontSize: string;
+    changeFontSize: (size: string) => void;
+}
+
+const FontSizeContext = createContext<FontSizeContextType | undefined>(undefined);
+
+export const FontSizeProvider = ({ children }: {
+    children: React.ReactNode;
+}) => {
+    const [fontSize, setFontSize] = useState<string>('16px');
+
+    useEffect(() => {
+        const savedFontSize = localStorage.getItem('fontSize');
+        if (savedFontSize) {
+            setFontSize(savedFontSize);
+        }
+    }, []);
+
+    const changeFontSize = (size: string) => {
+        setFontSize(size);
+        console.log(size);
+        localStorage.setItem('fontSize', size);
+    };
+
+    return (
+        <FontSizeContext.Provider value={{ fontSize, changeFontSize }}>
+            {children}
+        </FontSizeContext.Provider>
+    );
+};
+
+export const useFontSize = (): FontSizeContextType => {
+    const context = useContext(FontSizeContext);
+    if (!context) {
+        throw new Error('useFontSize must be used within a FontSizeProvider');
+    }
+    return context;
+};