refactor: modals

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

@@ -1,8 +1,6 @@
 'use client';
 
-import Button from '@/components/button/PrimaryButton';
 import SearchBox from '@/components/input/SearchBox';
-import BlurredOverlayContainer from '@/components/overlays/BlurredOverlayContainer';
 import { ScrollArea } from '@/components/ui/scrollarea';
 import { Radar2, Trash } from 'iconsax-react';
 import { Check, CheckCheck } from 'lucide-react';
@@ -10,10 +8,10 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next';
-import { motion } from 'framer-motion';
 import { LongPressCallbackMeta, LongPressReactEvents, useLongPress } from 'use-long-press'
 import { useRouter } from 'next/navigation';
-import { ef } from '@/lib/helpers/utfNumbers';
+import useToggle from '@/hooks/helpers/useToggle';
+import Prompt from '@/components/utils/Prompt';
 
 type Props = object
 
@@ -36,8 +34,8 @@ function ChatIndex({ }: Props) {
     });
     const [search, setSearch] = useState('');
     const [selectedChats, setSelectedChats] = useState<Array<string>>([]);
-    const [deleteModalVisible, setDeleteModalVisible] = useState(false);
     const router = useRouter();
+    const { active: deleteModal, onToggle: onToggleDeleteModal } = useToggle();
 
     const [chatsList, setChatList] = useState<Array<ChatEntryModel>>([
         {
@@ -105,12 +103,10 @@ function ChatIndex({ }: Props) {
     const toggleDeleteModalVisiblity = (e?: React.MouseEvent) => {
         e?.preventDefault();
         e?.stopPropagation();
-        setDeleteModalVisible((state) => {
-            if (state) {
-                setSelectedChats([]);
-            }
-            return !state;
-        });
+        if (deleteModal) {
+            setSelectedChats([]);
+        }
+        onToggleDeleteModal()
     };
 
     const deleteSelectedChats = () => {
@@ -157,7 +153,7 @@ function ChatIndex({ }: Props) {
                 <SearchBox placeholder={t('InputSearch.Placeholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
 
                 {selectedChats.length > 0 ?
-                    <span onClick={toggleDeleteModalVisiblity} className='bg-container p-2 rounded-xl active:bg-gray-50'>
+                    <span onClick={onToggleDeleteModal} className='bg-container p-2 rounded-xl active:bg-gray-50'>
                         <Trash size={24} className='stroke-primary' />
                     </span>
                     :
@@ -222,30 +218,16 @@ function ChatIndex({ }: Props) {
                 </ScrollArea>
             </section>
 
-            <BlurredOverlayContainer visible={deleteModalVisible} onClick={toggleDeleteModalVisiblity} inDuration={100} outDuration={100} outDelay={75}>
-                <div className="absolute top-1/2 left-0 w-full px-6">
-                    <motion.div
-                        animate={{ y: deleteModalVisible ? [10, 0] : [0, 10] }}
-                        transition={{ duration: 0.1, ease: 'easeInOut' }}
-                        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"
-                    >
-                        <h2 className="text-base font-medium">
-                            {tDeleteModal('Heading')}
-                        </h2>
-                        <p className="text-xs font-medium mt-6">
-                            {tDeleteModal('Description').replace('{count}', ef(selectedChats.length))}
-                        </p>
-                        <div className="grid grid-cols-2 gap-5.5 mt-8">
-                            <Button onClick={deleteSelectedChats} className="text-sm font-normal">
-                                {tDeleteModal('ButtonOk')}
-                            </Button>
-                            <Button onClick={toggleDeleteModalVisiblity} className="bg-disabled! text-disabled2! text-sm font-normal">
-                                {tDeleteModal('ButtonCancel')}
-                            </Button>
-                        </div>
-                    </motion.div>
-                </div>
-            </BlurredOverlayContainer>
+            <Prompt
+                title={tDeleteModal('Heading')}
+                description={tDeleteModal('Description').replace('{count}', String(selectedChats.length))}
+                textConfirm={tDeleteModal('ButtonOk')}
+                textCancel={tDeleteModal('ButtonCancel')}
+                onConfirm={deleteSelectedChats}
+                onCancel={toggleDeleteModalVisiblity}
+                onClick={toggleDeleteModalVisiblity}
+                visible={deleteModal}
+            />
         </div>
     )
 }