rjcodedev · gauravshegokar93 · Feb 5, 2023 · Feb 5, 2023
diff --git a/src/assets/socialmedia/gmail.png b/src/assets/socialmedia/gmail.png
diff --git a/src/assets/socialmedia/instagram.png b/src/assets/socialmedia/instagram.png
diff --git a/src/assets/socialmedia/telegram.png b/src/assets/socialmedia/telegram.png
diff --git a/src/component/Contact.js b/src/component/Contact.js
@@ -12,14 +12,14 @@ const Contact = () => {
       >
         contactlearnwebdevelopment@gmail.com
       </a>
-      <p className="text-xl font-semibold underline">telegram Id:</p>
+      <p className="text-xl font-semibold underline">Telegram</p>
       <a
-        href={`https://t.me/codehangout`}
+        href={`https://telegram.me/codehangout`}
         target="_blank"
         rel="noreferrer"
         className="hover:text-blue-500 hover:underline"
       >
-        https://t.me/codehangout
+        Learn web development
       </a>
     </div>
   );

diff --git a/src/component/Home.js b/src/component/Home.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Banner from '../assets/Banner.jpg'
 import BookList from './BookList'
+import SocialMedia from './SocialMedia'
 
 const Home = () => {
     // w-[200px] h-[200px] md:w-[310px] md:h-[310px]
@@ -20,6 +21,9 @@ const Home = () => {
             <div className='my-10'>
                 <BookList />
             </div>
+            <div>
+                <SocialMedia/>
+            </div>
         </div>
     )
 }

diff --git a/src/component/SocialMedia.js b/src/component/SocialMedia.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import instagram from "../assets/socialmedia/instagram.png";
+import gmail from "../assets/socialmedia/gmail.png";
+import telegram from '../assets/socialmedia/telegram.png'
+const SocialMedia = () => {
+    const SocialIcons = [
+        {
+            id: 1,
+            img: instagram,
+            url: "https://www.instagram.com/learn_web_development1/?igshid=ZmZhODViOGI%3D",
+            name: 'insta'
+        },
+        {
+            id: 2,
+            img: gmail,
+            url: "mailto:contactlearnwebdevelopment@gmail.com?subject=ask%20query",
+            name: 'gmail'
+
+        },
+        {
+            id: 3,
+            img: telegram,
+            url: "https://telegram.me/codehangout",
+            name: 'telegram'
+
+        }
+    ];
+
+    const openUrl = (url) => {
+        window.open(url, "_blank", "noopener,noreferrer");
+    };
+    return (
+        <div className='py-2'>
+            <h2 className='text-center font-bold text-xl underline'>Social media</h2>
+            <div className='flex justify-center gap-x-2'>
+                {SocialIcons.map((item) => (
+                    <div className='cursor-pointer' onClick={() => openUrl(item.url)}><img className='w-10 h-10' alt={item.name} src={item.img} /></div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default SocialMedia