added toast notification for share link action

package.json

@@ -26,8 +26,10 @@
     "dompurify": "^3.2.6",
     "framer-motion": "^12.17.3",
     "lucide-react": "^0.476.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^7.6.2",
@@ -38,6 +40,7 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-supersub": "^1.0.0",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.0.4",
     "tailwindcss-animate": "^1.0.7",

src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

src/pages/News/NewsPage.tsx

@@ -4,6 +4,8 @@ import { getAllPosts, groupPostsByCategory, Post } from '@/utils/posts-utils';
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import { motion, AnimatePresence } from 'framer-motion';
+import { Toaster } from 'sonner';
+import { toast } from 'sonner';
 import {
   fadeIn,
   slideInBottom,
@@ -125,15 +127,21 @@ const NewsPage: React.FC = () => {
   };
 
   const sharePost = (post: Post, e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (navigator.share) {
-      navigator.share({
-        title: post.title,
-        text: post.excerpt,
-        url: window.location.href + `/${post.slug}`,
-      });
-    } else {
-      navigator.clipboard.writeText(window.location.href + `/${post.slug}`);
+    try {
+      e.stopPropagation();
+      if (navigator.share) {
+        navigator.share({
+          title: post.title,
+          text: post.excerpt,
+          url: window.location.href + `/${post.slug}`,
+        });
+      } else {
+        navigator.clipboard.writeText(window.location.href + `/${post.slug}`);
+        toast.success('URL Copied successfuly');
+      }
+    } catch (error) {
+      console.error('Unable to fetch Url', error);
+      toast.error('URL not available');
     }
   };
 
@@ -227,6 +235,7 @@ const NewsPage: React.FC = () => {
   return (
     <>
       <Header />
+      <Toaster />
       <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
         {/* Enhanced Hero Section */}
         <div className="relative overflow-hidden">