From 8564f92d030c589dce0b13091220e29d387932f1 Mon Sep 17 00:00:00 2001
From: SalmanPathan <salmanpathan03292004@gmail.com>
Date: Sat, 18 Jan 2025 13:54:25 +0530
Subject: [PATCH] Update the github page

---
 .../src/components/Github/Github.jsx          | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/07reactRouter/src/components/Github/Github.jsx b/07reactRouter/src/components/Github/Github.jsx
index 9669a2b..2568794 100644
--- a/07reactRouter/src/components/Github/Github.jsx
+++ b/07reactRouter/src/components/Github/Github.jsx
@@ -1,28 +1,43 @@
-import React, { useEffect, useState } from 'react'
-import { useLoaderData } from 'react-router-dom'
+import React, { useEffect, useState } from "react";
+import { useLoaderData } from "react-router-dom";
 
 function Github() {
-    const data = useLoaderData()
-    // const [data, setData] = useState([])
-    // useEffect(() => {
-    //  fetch('https://api.github.com/users/hiteshchoudhary')
-    //  .then(response => response.json())
-    //  .then(data => {
-    //     console.log(data);
-    //     setData(data)
-    //  })
-    // }, [])
-    
+  const data = useLoaderData();
+  // const [data, setData] = useState([])
+  // useEffect(() => {
+  //  fetch('https://api.github.com/users/hiteshchoudhary')
+  //  .then(response => response.json())
+  //  .then(data => {
+  //     console.log(data);
+  //     setData(data)
+  //  })
+  // }, [])
+
   return (
-    <div className='text-center m-4 bg-gray-600 text-white p-4 text-3xl'>Github followers: {data.followers}
-    <img src={data.avatar_url} alt="Git picture" width={300} />
+    <div className='text-center m-4 bg-gray-600 text-white p-4 text-3xl'>
+      Github followers: {data.followers}
+      <img
+        src={data.avatar_url}
+        alt='Git picture'
+        width={300}
+        className='rounded-full flex justify-center items-center mx-auto'
+      />
+      <a
+        href={`https://github.com/${data.login}`}
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <button className='bg-white text-gray-800 px-4 py-2 rounded-md'>
+          View Profile
+        </button>
+      </a>
     </div>
-  )
+  );
 }
 
-export default Github
+export default Github;
 
 export const githubInfoLoader = async () => {
-    const response = await fetch('https://api.github.com/users/hiteshchoudhary')
-    return response.json()
-}
\ No newline at end of file
+  const response = await fetch("https://api.github.com/users/hiteshchoudhary");
+  return response.json();
+};