feat: content & item detail.

client/src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerProvider.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useContact } from 'hooks/query';
+
+const ContactDetailDrawerContext = React.createContext();
+
+/**
+ * Contact detail provider.
+ */
+function ContactDetailDrawerProvider({ contactId, ...props }) {
+  // Handle fetch contact duplicate details.
+  const { data: contact, isLoading: isContactLoading } = useContact(contactId, {
+    enabled: !!contactId,
+  });
+  //provider.
+  const provider = {
+    contact,
+    contactId,
+  };
+
+  return (
+    <DashboardInsider loading={isContactLoading}>
+      <DrawerHeaderContent
+        name="contact-detail-drawer"
+        title={contact?.display_name}
+      />
+
+      <ContactDetailDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useContactDetailDrawerContext = () =>
+  React.useContext(ContactDetailDrawerContext);
+
+export { ContactDetailDrawerProvider, useContactDetailDrawerContext };