update(added favicon)

tashfiqul-islam · Jan 17, 2024 · 14b42a7 · 14b42a7
1 parent 9340ac3
commit 14b42a7
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 65 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="next" />
+/// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,6 +6,7 @@ import MetroInfoCard from '../components/MetroInfoCard';
 import { findNearestMetro } from '../services/metroServices';
 import { MetroStation } from '../utils/constants';
 import { FaGithub } from 'react-icons/fa';
+import Head from 'next/head';
 
 // Dynamically import MapView with no server-side rendering
 const MapView = dynamic(() => import('../components/MapView'), { ssr: false });
@@ -54,78 +55,85 @@ const HomePage: React.FC = () => {
   }, []);
 
   return (
-    <div
-      className="flex flex-col min-h-screen"
-      style={{ backgroundColor: '#121212' }}
-    >
-      {/* Header Section */}
-      <div className="w-full text-center py-10 relative">
-        <h1 className="text-2xl font-bold text-white font-mono">
-          Metro Station Finder
-        </h1>
-        <a
-          href="https://github.com/tashfiqul-islam/metro-station-finder"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hidden md:absolute top-8 right-12 mt-2 text-white hover:text-slate-400 md:block"
-        >
-          <FaGithub size={24} /> {/* GitHub Icon */}
-        </a>
-      </div>
-
-      {/* Main Content Section */}
-      <div className="flex-grow">
-        <header className="w-full max-w-lg mx-auto mt-5">
-          <SearchBar onSearch={handleSearch} />
-          {errorMessage && (
-            <p className="text-red-600 text-center mt-2">{errorMessage}</p>
-          )}
-        </header>
+    <>
+      <Head>
+        <link rel="icon" href="/favicon-16x16.png" sizes="16x16" />
+        <link rel="icon" href="/favicon-32x32.png" sizes="32x32" />
+        <link rel="shortcut icon" href="/favicon.png" />
+      </Head>
+      <div
+        className="flex flex-col min-h-screen"
+        style={{ backgroundColor: '#121212' }}
+      >
+        {/* Header Section */}
+        <div className="w-full text-center py-10 relative">
+          <h1 className="text-2xl font-bold text-white font-mono">
+            Metro Station Finder
+          </h1>
+          <a
+            href="https://github.com/tashfiqul-islam/metro-station-finder"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hidden md:absolute top-8 right-12 mt-2 text-white hover:text-slate-400 md:block"
+          >
+            <FaGithub size={24} /> {/* GitHub Icon */}
+          </a>
+        </div>
 
-        <main className="w-full max-w-lg mx-auto mt-5">
-          {isClient && (
-            <>
-              {/* MapView Section */}
-              <div className="mb-4">
-                <MapView
-                  userLocation={userLocation}
-                  metroStation={nearestMetro}
-                  onDistanceCalculated={handleDistanceUpdate}
-                />
-              </div>
+        {/* Main Content Section */}
+        <div className="flex-grow">
+          <header className="w-full max-w-lg mx-auto mt-5">
+            <SearchBar onSearch={handleSearch} />
+            {errorMessage && (
+              <p className="text-red-600 text-center mt-2">{errorMessage}</p>
+            )}
+          </header>
 
-              {/* MetroInfoCard Section */}
-              {distance !== null && nearestMetro && (
-                <div className="mt-10">
-                  <MetroInfoCard
+          <main className="w-full max-w-lg mx-auto mt-5">
+            {isClient && (
+              <>
+                {/* MapView Section */}
+                <div className="mb-4">
+                  <MapView
+                    userLocation={userLocation}
                     metroStation={nearestMetro}
-                    distance={distance}
-                    unit={unit}
+                    onDistanceCalculated={handleDistanceUpdate}
                   />
                 </div>
-              )}
-            </>
-          )}
-        </main>
-      </div>
 
-      {/* Footer Section */}
-      <div className="w-full text-center py-5">
-        <p className="text-slate-300 text-sm">
-          &copy; 2024 | v0.0.1 | Made with{' '}
-          <span className="text-red-500">&hearts;</span> by
-          <a
-            href="https://github.com/tashfiqul-islam"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-500 hover:text-blue-700"
-          >
-            {' '}
-            Tashfiq
-          </a>
-        </p>
+                {/* MetroInfoCard Section */}
+                {distance !== null && nearestMetro && (
+                  <div className="mt-10">
+                    <MetroInfoCard
+                      metroStation={nearestMetro}
+                      distance={distance}
+                      unit={unit}
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </main>
+        </div>
+
+        {/* Footer Section */}
+        <div className="w-full text-center py-5">
+          <p className="text-slate-300 text-sm">
+            &copy; 2024 | v0.0.1 | Made with{' '}
+            <span className="text-red-500">&hearts;</span> by
+            <a
+              href="https://github.com/tashfiqul-islam"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 hover:text-blue-700"
+            >
+              {' '}
+              Tashfiq
+            </a>
+          </p>
+        </div>
       </div>
-    </div>
+    </>
   );
 };