Fixed the AntD message warning (dynamic theme / context)

src/app/components/Preferences/Preferences.tsx

@@ -50,6 +50,7 @@ const PreferencesSelector: React.FC<PreferencesSelectorProps> = ({
   onComplete,
 }) => {
   const [selectedPreferences, setSelectedPreferences] = useState<string[]>([]);
+  const [messageApi, contextHolder] = message.useMessage();
 
   const handleTogglePreference = (id: string) => {
     setSelectedPreferences((prev) =>
@@ -59,7 +60,7 @@ const PreferencesSelector: React.FC<PreferencesSelectorProps> = ({
 
   const handleSubmit = () => {
     if (selectedPreferences.length === 0) {
-      message.warning("Please select at least one preference");
+      messageApi.warning("Please select at least one preference");
       return;
     }
 
@@ -68,7 +69,7 @@ const PreferencesSelector: React.FC<PreferencesSelectorProps> = ({
       "userPreferences",
       JSON.stringify(selectedPreferences)
     );
-    message.success("Preferences saved successfully!");
+    messageApi.success("Preferences saved successfully!");
     onComplete();
   };
 
@@ -79,6 +80,7 @@ const PreferencesSelector: React.FC<PreferencesSelectorProps> = ({
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
     >
+      {contextHolder}
       <Card className={styles.card}>
         <Title level={2}>Welcome to Tech Master</Title>
         <Text>

src/app/contact/page.tsx

@@ -22,13 +22,14 @@ const { TextArea } = Input;
 export default function ContactPage() {
   const [form] = Form.useForm();
   const [submitting, setSubmitting] = useState(false);
+  const [messageApi, contextHolder] = message.useMessage();
 
   const handleSubmit = async () => {
     setSubmitting(true);
 
     // Simulate API call
     setTimeout(() => {
-      message.success("Your message has been sent successfully!");
+      messageApi.success("Your message has been sent successfully!");
       form.resetFields();
       setSubmitting(false);
     }, 1500);
@@ -55,6 +56,7 @@ export default function ContactPage() {
 
   return (
     <main className={styles.main}>
+      {contextHolder}
       {/* Hero Section */}
       <section className={styles.heroSection}>
         <div className={styles.heroBackground}>