refactor: more use cases with useToggle

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 toggleSortingModal = useCallback(() => {
-    setSortingModal((state) => !state);
-  }, []);
+  const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle();
 
   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