diff --git a/src/components/ContactUsMessageModal.tsx b/src/components/ContactUsMessageModal.tsx new file mode 100644 index 0000000..27b0dbb --- /dev/null +++ b/src/components/ContactUsMessageModal.tsx @@ -0,0 +1,56 @@ +import { type FC } from 'react' +import DefaulModal from './DefaulModal' +import { type ContactUsItem } from '../pages/contactUs/types' + +interface Props { + open: boolean + close: () => void + contactUs: ContactUsItem | null +} + +const ContactUsMessageModal: FC = ({ open, close, contactUs }) => { + if (!contactUs) return null + + return ( + +
+
+
+ +
+ {contactUs.fullName} +
+
+ +
+ +
+ {contactUs.email_phone} +
+
+ +
+ +
+ {contactUs.message} +
+
+
+
+
+ ) +} + +export default ContactUsMessageModal diff --git a/src/pages/contactUs/List.tsx b/src/pages/contactUs/List.tsx index 07a44c9..6b26018 100644 --- a/src/pages/contactUs/List.tsx +++ b/src/pages/contactUs/List.tsx @@ -6,9 +6,13 @@ import PageLoading from '../../components/PageLoading'; import Error from '../../components/Error'; import PaginationUi from '../../components/PaginationUi'; import Td from '../../components/Td'; +import { Eye } from 'iconsax-react'; +import ContactUsMessageModal from '../../components/ContactUsMessageModal'; const ContactUsList: FC = () => { const [currentPage, setCurrentPage] = useState(1); + const [selectedContactUs, setSelectedContactUs] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); const { data: contactUsData, isLoading, error } = useGetContactUs(currentPage); if (isLoading) { @@ -34,6 +38,16 @@ const ContactUsList: FC = () => { return text.length > maxLength ? text.substring(0, maxLength) + '...' : text; }; + const handleViewMessage = (contactUs: ContactUsItem) => { + setSelectedContactUs(contactUs); + setIsModalOpen(true); + }; + + const handleCloseModal = () => { + setIsModalOpen(false); + setSelectedContactUs(null); + }; + return (
@@ -44,6 +58,8 @@ const ContactUsList: FC = () => { + + @@ -59,6 +75,14 @@ const ContactUsList: FC = () => { + + + )) )} @@ -72,6 +96,12 @@ const ContactUsList: FC = () => { setCurrentPage(page); }} /> + +
) }