refactor: more use cases with useToggle

src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx

@@ -4,6 +4,7 @@ import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
 import Button from '@/components/button/PrimaryButton';
 import Combobox, { ComboboxOption } from '@/components/combobox/Combobox';
 import InputField from '@/components/input/InputField';
+import useToggle from '@/hooks/helpers/useToggle';
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { ArrowLeft, Box, Card, Cup, Icon, Shop, Ticket, TicketDiscount, TruckTick, Wallet2 } from 'iconsax-react';
@@ -26,12 +27,12 @@ function OrderDetailInex() {
     const [paymentType, setPaymentType] = React.useState<string>('0');
     const [couponType, setCouponType] = React.useState<string>('0');
     const [couponCode, setCouponCode] = React.useState<string>('');
-    const [cartModal, setCartModal] = React.useState<boolean>(false);
     const [couponCodeError, setCouponCodeError] = React.useState<string>(''); // TODO: handle coupon code error
     const [tableNumber, setTableNumber] = useState(0)                      // TODO: must be set to table number
     const incrementTableNumber = () => setTableNumber((prev) => prev + 1);       // TODO: must be set to table number
     const decrementTableNumber = () => setTableNumber((prev) => prev - 1);       // TODO: must be set to table number
     const address = "اراک، مصطفی خمینی، خیابان سینا کوچه چمران ساختمان شهرزاد"
+    const { state: cartModal, toggle: toggleCartModal } = useToggle();
 
     const deliveryOptions: Array<ComboboxOption> = [
         { id: '0', title: t("SectionShipping.InputDeliveryType.Options.Delivery"), icon: TruckTick },
@@ -76,10 +77,6 @@ function OrderDetailInex() {
         setCouponCode(id);
     }, []);
 
-    const toggleCartModal = useCallback(() => {
-        setCartModal((prev) => !prev);
-    }, []);
-
     const addressSection = () => {
         if (deliveryType !== '0') {
             return null;
@@ -313,4 +310,4 @@ function OrderDetailInex() {
     )
 }
 
-export default OrderDetailInex
+export default OrderDetailInex

src/app/[name]/(Dialogs)/order/track/[id]/page.tsx

@@ -8,11 +8,11 @@ import Button from '@/components/button/PrimaryButton';
 import { Skeleton } from '@/components/ui/skeleton';
 import { MarkerData } from '@/app/[name]/(Profile)/profile/address/new/page';
 import { HandPlatter, Package } from 'lucide-react';
-import { motion } from 'framer-motion';
 import AnimatedBar from '@/components/utils/AnimatedBar';
 import { Clock } from 'iconsax-react';
-import BlurredOverlayContainer from '@/components/overlays/BlurredOverlayContainer';
 import clsx from 'clsx';
+import useToggle from '@/hooks/helpers/useToggle';
+import Prompt from '@/components/utils/Prompt';
 
 const CustomMap = dynamic(
     () => import('@/components/map/CustomMap'),
@@ -29,9 +29,8 @@ function OrderTrackingPage() {
     const [markers, setMarkers] = useState<MarkerData[]>([]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [mapCenter, setMapCenter] = useState<[number, number]>([Number(params?.get('lon')) || 35.6892, Number(params?.get('lon')) || 51.3890]);
-    const [bottomSheet1State, setBottomSheet1State] = useState<boolean>(false);
-    const [cancelModalVisibility, setCancelModalVisibility] = useState<boolean>(false);
     const router = useRouter();
+    const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
 
     // Example initial position (Tehran)
     const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);
@@ -68,17 +67,7 @@ function OrderTrackingPage() {
         console.log('Map clicked at:', e.latlng);
     };
 
-    const toggleBottomSheet1 = () => {
+    const onCancelOrder = (e: React.MouseEvent | null) => {
-        setBottomSheet1State((prev) => !prev);
-    }
-
-    const toggleCancelModal = async (e?: React.MouseEvent) => {
-        e?.preventDefault();
-        e?.stopPropagation();
-        setCancelModalVisibility((state) => !state);
-    }
-
-    const onCancelOrder = (e: React.MouseEvent<HTMLButtonElement> | null) => {
         if (!e) return;
 
     };
@@ -99,30 +88,6 @@ function OrderTrackingPage() {
 
             <div className="absolute bottom-0 left-0 right-0 z-[1000]">
                 <div className='relative w-full h-full' >
-                    <AnimatedBottomSheet
-                        bgOpacity={0}
-                        inDuration={0}
-                        blurOpacity={100}
-                        noBlur
-                        visible={bottomSheet1State}
-                        showCloseButton={false}
-                        showTitle={false}
-                        overrideClassName='!pt-6 bg-container!'
-                    >
-                        <div className='grid grid-cols-2 gap-4 px-4'>
-                            <Button
-                                onClick={toggleCancelModal}
-                            >
-                                انتخاب
-                            </Button>
-                            <Button
-                                onClick={toggleBottomSheet1}
-                                className='bg-disabled! text-primary!'
-                            >
-                                انصراف
-                            </Button>
-                        </div>
-                    </AnimatedBottomSheet>
 
                     <AnimatedBottomSheet
                         bgOpacity={0}
@@ -193,32 +158,18 @@ function OrderTrackingPage() {
 
             <div className={clsx(
                 'fixed inset-0 z-1001',
-                !cancelModalVisibility && 'pointer-events-none'
+                !cancelModal && 'pointer-events-none'
             )}>
-                <BlurredOverlayContainer visible={cancelModalVisibility} onClick={toggleCancelModal} inDuration={100} outDuration={100} outDelay={75}>
+                <Prompt
-                    <div className="absolute top-1/2 left-6 right-6 px-6">
+                    title={'لفو سفارش'}
-                        <motion.div
+                    description={'آیا از درخواست خود اطمینان دارید؟'}
-                            animate={{ y: cancelModalVisibility ? [10, 0] : [0, 10] }}
+                    textConfirm={'بله'}
-                            transition={{ duration: 0.1, ease: 'easeInOut' }}
+                    textCancel={'منصرف شدم'}
-                            className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-white/63 rounded-4xl"
+                    onConfirm={onCancelOrder}
-                        >
+                    visible={cancelModal}
-                            <h2 className="text-base font-medium">
+                    onClick={toggleCancelModal}
-                                لفو سفارش
+                    onCancel={toggleCancelModal}
-                            </h2>
+                />
-                            <p className="text-xs font-medium mt-6">
-                                آیا از درخواست خود اطمینان دارید؟
-                            </p>
-                            <div className="grid grid-cols-2 gap-5.5 mt-8">
-                                <Button onClick={onCancelOrder} className="text-sm font-normal">
-                                    بله
-                                </Button>
-                                <Button onClick={toggleCancelModal} className="bg-disabled! text-disabled2! text-sm font-normal">
-                                    منصرف شدم
-                                </Button>
-                            </div>
-                        </motion.div>
-                    </div>
-                </BlurredOverlayContainer>
             </div>
         </div>
     );

src/app/[name]/(Main)/about/AboutPage.tsx

@@ -6,11 +6,12 @@ import TabContainer from '@/components/tab/TabContainer';
 import { TabHeader } from '@/components/tab/TabHeader';
 import Comment from '@/components/utils/Comment';
 import RateBar from '@/components/utils/RateBar';
+import useToggle from '@/hooks/helpers/useToggle';
 import { AboutDataModel } from '@/lib/api/info/getAboutData';
 import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, Star1, Whatsapp } from 'iconsax-react';
 import { useQueryState } from 'next-usequerystate';
 import Image from 'next/image';
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 
 const sortings = [
   'جدیدترین',
@@ -18,12 +19,8 @@ const sortings = [
 ]
 
 function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
-  const [sortingModal, setSortingModal] = useState(false);
   const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
-
+  const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle();
-  const toggleSortingModal = useCallback(() => {
-    setSortingModal((state) => !state);
-  }, []);
 
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
@@ -31,6 +28,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
   }
 
   const firstTab = () => {
+
     return (
       <section aria-labelledby="about-title" className='py-4'>
         <section

src/app/[name]/(Main)/chat/page.tsx

@@ -35,7 +35,7 @@ function ChatIndex({ }: Props) {
     const [search, setSearch] = useState('');
     const [selectedChats, setSelectedChats] = useState<Array<string>>([]);
     const router = useRouter();
-    const { active: deleteModal, onToggle: onToggleDeleteModal } = useToggle();
+    const { state: deleteModal, toggle: toggleDeleteModal } = useToggle();
 
     const [chatsList, setChatList] = useState<Array<ChatEntryModel>>([
         {
@@ -106,7 +106,7 @@ function ChatIndex({ }: Props) {
         if (deleteModal) {
             setSelectedChats([]);
         }
-        onToggleDeleteModal()
+        toggleDeleteModal()
     };
 
     const deleteSelectedChats = () => {
@@ -153,7 +153,7 @@ function ChatIndex({ }: Props) {
                 <SearchBox placeholder={t('InputSearch.Placeholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
 
                 {selectedChats.length > 0 ?
-                    <span onClick={onToggleDeleteModal} className='bg-container p-2 rounded-xl active:bg-gray-50'>
+                    <span onClick={toggleDeleteModal} className='bg-container p-2 rounded-xl active:bg-gray-50'>
                         <Trash size={24} className='stroke-primary' />
                     </span>
                     :

src/app/[name]/(Main)/page.tsx

@@ -22,6 +22,7 @@ import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRe
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
+import useToggle from "@/hooks/helpers/useToggle";
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -148,8 +149,9 @@ const MenuIndex = () => {
     { id: '0', title: tMenu('MenuFilterDrawer.SelectDelivery.Options.Courier'), label: '' },
   ]
 
-  const [filterModal, setFilterModal] = useState(false);
+  const { state: filterModal, toggle: toggleFilterModal } = useToggle();
-  const [sortingModal, setSortingModal] = useState(false);
+  const { state: sortingModal, toggle: toggleSortingModal } = useToggle();
+
   const [, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
   const [search, setSearch] = useQueryState("q", { defaultValue: '' });
   const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' });
@@ -191,14 +193,6 @@ const MenuIndex = () => {
     setSelectedCategory(String(id));
   }, [setSelectedCategory]);
 
-  const toggleFilterModal = useCallback(() => {
-    setFilterModal((state) => !state);
-  }, []);
-
-  const toggleSortingModal = useCallback(() => {
-    setSortingModal((state) => !state);
-  }, []);
-
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
   }

src/app/[name]/(Profile)/profile/address/new/page.tsx

@@ -8,6 +8,7 @@ import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
 import Button from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
 import { Skeleton } from '@/components/ui/skeleton';
+import useToggle from '@/hooks/helpers/useToggle';
 
 const CustomMap = dynamic(
     () => import('@/components/map/CustomMap'),
@@ -60,8 +61,8 @@ function OrderTrackingPage() {
     const [markers, setMarkers] = useState<MarkerData[]>([]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [mapCenter, setMapCenter] = useState<[number, number]>([Number(params?.get('lon')) || 35.6892, Number(params?.get('lon')) || 51.3890]);
-    const [bottomSheet1State, setBottomSheet1State] = useState<boolean>(false);
+    const { state: confirmModal, toggle: toggleConfirmModal, set: setConfirmModal } = useToggle();
-    const [bottomSheet2State, setBottomSheet2State] = useState<boolean>(false);
+    const { state: detailsModal, toggle: _toggleDetailsModal, set: setDetailsModal } = useToggle();
 
     // Example initial position (Tehran)
     const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);
@@ -97,8 +98,8 @@ function OrderTrackingPage() {
             setSelectedAddress(null);
             return position;
         });
-        setBottomSheet1State(position && true);
+        setConfirmModal(position && true);
-        setBottomSheet2State(false);
+        setDetailsModal(false);
         // You can handle the selected position here
         console.log('Selected position:', position);
     };
@@ -111,19 +112,16 @@ function OrderTrackingPage() {
         console.log('Map clicked at:', e.latlng);
     };
 
-    const toggleBottomSheet1 = () => {
-        setBottomSheet1State((prev) => !prev);
-    }
 
-    const toggleBottomSheet2 = async () => {
+    const toggleDetailsModal = async () => {
         if (!selectedPosition) {
-            setBottomSheet1State(false);
+            setConfirmModal(false);
-            setBottomSheet2State(false);
+            setDetailsModal(false);
             return;
         }
-        setBottomSheet1State(false);
+        setConfirmModal(false);
-        setBottomSheet2State((prev) => !prev);
+        _toggleDetailsModal();
-        if (!bottomSheet2State) {
+        if (!detailsModal) {
             const address = await fetchAddressFromCoordinates(selectedPosition[0], selectedPosition[1]);
             setSelectedAddress(address);
         }
@@ -148,6 +146,32 @@ function OrderTrackingPage() {
         console.log(formData);
     }
 
+    const getSelectedAddress = () => {
+        if (!selectedAddress) {
+            return "آدرس یافت نشد"
+        }
+        try {
+            return [
+                selectedAddress.address.state ?? selectedAddress.address.province,
+                selectedAddress.address.city,
+                selectedAddress.address.neighbourhood,
+                !selectedAddress.address.road.startsWith('میدان') &&
+                    !selectedAddress.address.road.startsWith('بلوار') &&
+                    !selectedAddress.address.road.startsWith('خیابان') &&
+                    !selectedAddress.address.road.startsWith('کوچه') ?
+                    selectedAddress.type === 'secondary' ? `بلوار ${selectedAddress.address.road}` :
+                        selectedAddress.type === 'tertiary' ? `خیابان ${selectedAddress.address.road}` :
+                            selectedAddress.type === 'residential' ? `کوچه ${selectedAddress.address.road}` :
+                                selectedAddress.address.road : selectedAddress.address.road
+            ].filter(x => x).join('، ')
+        } catch {
+            if (selectedAddress.display_name)
+                return selectedAddress.display_name;
+            else 
+                return "آدرس یافت نشد"
+        }
+    }
+
     return (
         <div className="fixed inset-0 bg-gray-50">
 
@@ -175,19 +199,19 @@ function OrderTrackingPage() {
                         inDuration={0}
                         blurOpacity={null}
                         noBlur
-                        visible={bottomSheet1State}
+                        visible={confirmModal}
                         showCloseButton={false}
                         showTitle={false}
                         overrideClassName='!pt-6 bg-container!'
                     >
                         <div className='grid grid-cols-2 gap-4 px-4'>
                             <Button
-                                onClick={toggleBottomSheet2}
+                                onClick={toggleDetailsModal}
                             >
                                 انتخاب
                             </Button>
                             <Button
-                                onClick={toggleBottomSheet1}
+                                onClick={toggleConfirmModal}
                                 className='bg-disabled! text-foreground!'
                             >
                                 انصراف
@@ -200,9 +224,9 @@ function OrderTrackingPage() {
                         inDuration={0}
                         blurOpacity={null}
                         noBlur
-                        visible={bottomSheet2State}
+                        visible={detailsModal}
                         title='آدرس'
-                        onClick={toggleBottomSheet2}
+                        onClick={toggleDetailsModal}
                         overrideClassName='bg-container!'
                     >
                         <form onSubmit={submitAddressAction}>
@@ -214,19 +238,7 @@ function OrderTrackingPage() {
                                                 className='h-6 w-full'
                                             />
                                             :
-                                            [
+                                            getSelectedAddress()
-                                                selectedAddress.address.state ?? selectedAddress.address.province,
-                                                selectedAddress.address.city,
-                                                selectedAddress.address.neighbourhood,
-                                                !selectedAddress.address.road.startsWith('میدان') &&
-                                                    !selectedAddress.address.road.startsWith('بلوار') &&
-                                                    !selectedAddress.address.road.startsWith('خیابان') &&
-                                                    !selectedAddress.address.road.startsWith('کوچه') ?
-                                                    selectedAddress.type === 'secondary' ? `بلوار ${selectedAddress.address.road}` :
-                                                        selectedAddress.type === 'tertiary' ? `خیابان ${selectedAddress.address.road}` :
-                                                            selectedAddress.type === 'residential' ? `کوچه ${selectedAddress.address.road}` :
-                                                                selectedAddress.address.road : selectedAddress.address.road
-                                            ].filter(x => x).join('، ')
                                         }
                                     </span>
                                     <hr className='border border-border mt-3 mb-10 ' />
@@ -252,7 +264,7 @@ function OrderTrackingPage() {
                                     </Button>
                                     <Button
                                         type='button'
-                                        onClick={toggleBottomSheet2}
+                                        onClick={toggleDetailsModal}
                                         className='bg-disabled! text-foreground!'
                                     >
                                         انصراف

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import { Metadata, Viewport } from "next";
 import "./globals.css";
-import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
+import { ReactQueryProvider } from "@/features/providers/ReactQueryProvider";
 import { notFound } from "next/navigation";
 import i18nConfig from "../../i18nConfig";
 import initTranslations from '@/lib/i18n';

src/components/bottomsheet/AnimatedBottomSheet.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef } from 'react'
 import BlurredOverlayContainer, { BlurredOverlayContainerProps } from '../overlays/BlurredOverlayContainer'
 import clsx from 'clsx'

src/components/button/NightModeSwitch.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react'
 
 type Props = {

src/components/button/PrimaryButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import React from 'react'
 import { motion } from 'framer-motion';

src/components/button/ToggleButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { Refresh } from 'iconsax-react';

src/components/combobox/Combobox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState, useEffect, useRef } from 'react';
 import { motion, Variants } from 'framer-motion';
 import { Icon, SearchNormal } from 'iconsax-react';

src/components/input/InputField.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react'
 import Tooltip from '../utils/Tooltip';
 import clsx from 'clsx';

src/components/input/SearchBox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import SearchIcon from '../icons/SearchIcon';
 import clsx from 'clsx';

src/components/listview/CategoryItemRenderer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 type Props = {

src/components/listview/CategorySmallItemRenderer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 type Props = {

src/components/listview/HorizontalScrollView.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, ReactNode } from 'react';
 
 type Props = {

src/components/listview/MenuItem.tsx

@@ -1,4 +1,3 @@
-// components/menu/MenuItem.tsx
 'use client'
 
 import { memo } from "react";

src/components/listview/MenuItemRenderer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 type Props = {

src/components/listview/VerticalScrollView.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, ReactNode } from 'react';
 
 type Props = {

src/components/menu/SideMenu.tsx

@@ -53,8 +53,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const menuStateMemo = useMemo(() => menuState, [menuState]);
     const closeRef = useRef<HTMLDivElement>(null);
     const userIsAuthenticated = true; // useAuthStore((state) => state.isAuthenticated);
-    const { active: logoutModal, onToggle: onToggleLogoutModal } = useToggle();
+    const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
-    const { active: shareModal, onToggle: onToggleShareModal } = useToggle();
+    const { state: shareModal, toggle: toggleShareModal } = useToggle();
 
     const params = useParams();
     const { name } = params;
@@ -78,8 +78,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     };
 
     const hrefOnClicks = [
-        { href: '?logout', handler: onToggleLogoutModal },
+        { href: '?logout', handler: toggleLogoutModal },
-        { href: '?share', handler: onToggleShareModal }
+        { href: '?share', handler: toggleShareModal }
     ];
 
     const renderMenu = () => {
@@ -202,13 +202,13 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
             {/* Logout Modal */}
             <LogoutPrompt
                 visible={logoutModal}
-                onClick={onToggleLogoutModal}
+                onClick={toggleLogoutModal}
             />
 
             {/* Share modal */}
             <Modal
                 visible={shareModal}
-                onClick={onToggleShareModal}
+                onClick={toggleShareModal}
             >
                 <h2 className="text-base font-medium">
                     <Share className="inline-block ml-2 mb-1.5 stroke-primary" size={24} />

src/components/menu/SideMenuItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Link, { LinkProps } from 'next/link'
 import React from 'react'
 

src/components/navigation/BottomNavLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Link from 'next/link'
 import React from 'react'
 import type { LinkProps } from 'next/link'

src/components/navigation/BottomNavLinkBig.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Link from 'next/link'
 import React from 'react'
 import type { LinkProps } from 'next/link'

src/components/overlays/animations/PingAnimation.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react'
 
 type Props = object

src/components/tab/TabHeader.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 
 export interface TabItemProps {

src/components/tab/TabHeaderRenderer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 type Props = {

src/components/ui/button.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"

src/components/ui/input.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from "react"
 
 import { cn } from "@/lib/utils"

src/components/ui/skeleton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cn } from "@/lib/utils"
 
 function Skeleton({

src/components/ui/table.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from "react"
 
 import { cn } from "@/lib/utils"

src/components/utils/AnimatedBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { motion } from 'framer-motion'
 import React from 'react'
 

src/components/utils/Comment.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Star1 } from 'iconsax-react'
 import React from 'react'
 

src/components/utils/Modal.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { motion } from 'framer-motion'
 import React from 'react'
 import BlurredOverlayContainer, { BlurredOverlayContainerProps } from '../overlays/BlurredOverlayContainer'

src/components/utils/Prompt.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { BlurredOverlayContainerProps } from '@/components/overlays/BlurredOverlayContainer'
 import Modal from '@/components/utils/Modal'
 import React from 'react'

src/components/utils/RateBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Star1 } from 'iconsax-react'
 import React from 'react'
 import { motion } from 'framer-motion'

src/components/utils/RateSelectionBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Star, Star1 } from 'iconsax-react'
 import React from 'react'
 import { Slider } from '../ui/slider';

src/components/utils/Tooltip.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import React, { ReactNode } from 'react';
 
 type Props = {

src/features/auth/components/AuthFormWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 // import LoadingOverlay from '@/components/overlays/LoadingOverlay';
 import React from 'react'
 

src/features/auth/components/StepEnterOtp.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Button from '@/components/button/PrimaryButton';
 import OTPInputField from '@/components/input/MultiInputField';
 import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';

src/features/auth/components/StepEnterPassword.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Button from '@/components/button/PrimaryButton';
 import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
 import InputField from '@/components/input/InputField';

src/features/auth/components/StepNewPassword.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Button from '@/components/button/PrimaryButton';
 import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
 import InputField from '@/components/input/InputField';

src/features/general/LogoutPrompt.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Prompt, { PromptProps } from '@/components/utils/Prompt'
 import { useAuthStore } from '@/zustand/authStore';
 import { useRouter } from 'next/navigation';

src/hooks/helpers/useToggle.tsx

@@ -1,17 +1,21 @@
 import { useState } from 'react'
 
 const useToggle = () => {
-  const [active, setActive] = useState<boolean>(false);
+  const [state, setState] = useState<boolean>(false);
 
-  const onToggle = (e?: React.MouseEvent | null) => {
+  const toggle = (e?: React.MouseEvent | null) => {
     if (e) {
       e.preventDefault();
       e.stopPropagation();
     }
-    setActive((prev) => !prev);
+    setState((prev) => !prev);
   }
 
-  return { active, onToggle }
+  const set = (value: boolean) => {
+    setState(value);
+  }
+
+  return { state, toggle, set }
 }
 
 export default useToggle