Add dynamic time display to homepage

pranshu05 · Feb 16, 2024 · da768fc · da768fc
1 parent 64ce415
commit da768fc
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 23 deletions.
diff --git a/src/lib/Time.ts b/src/lib/Time.ts
@@ -0,0 +1,12 @@
+export function getFormattedTime(): string {
+    const date = new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    const formattedHours = hours % 12 || 12;
+    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+    const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
+
+    return `${formattedHours}:${formattedMinutes}:${formattedSeconds} ${ampm}`;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,6 +1,10 @@
+"use client";
+
 import { FaGithub, FaInstagram, FaLinkedin, FaTwitter } from 'react-icons/fa';
 import type { Metadata } from "next";
 import { ageInYears } from '@/lib/AgeInYears';
+import { useEffect, useState } from 'react';
+import { getFormattedTime } from '@/lib/Time';
 
 const socialLinks = [
   { href: 'https://github.com/pranshu05', icon: <FaGithub />, text: 'GitHub' },
@@ -12,30 +16,42 @@ const socialLinks = [
 export const metadata: Metadata = {
   title: 'Pranshu05',
   description: 'Portfolio website of Pranshu05',
-}
-
-const Home: React.FC = () => (
-  <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
-    <div className="pb-8">
-      <div className="flex items-baseline">
-        <h1 className="text-3xl font-medium">Pranshu Patel</h1>
-        <p className="text-sm px-1 text-zinc-400">(He/Him)</p>
-      </div>
-      <p className="text-zinc-400">{ageInYears}y/o Developer, India</p>
-    </div>
-    <p className="text-zinc-400">
-      Hey there! 👋🏻 I&apos;m Pranshu, a fullstack developer and college fresher based in India. Currently working on a few projects and pursuing B.Tech. in ICT from <a className="link" href="https://daiict.ac.in" target="_blank" rel="noopener noreferrer">DA-IICT</a>.
-    </p>
-    <div className="my-4 grid gap-2 md:gap-4 grid-cols-2 sm:grid-cols-4 mx-auto">
-      {socialLinks.map((item, index) => (
-        <div key={index} className="outline outline-1 outline-zinc-400 rounded-lg p-2">
-          <a href={item.href} target="_blank" rel="noopener noreferrer" className="link flex gap-2 items-center justify-center">
-            {item.icon} {item.text}
-          </a>
+};
+
+const Home: React.FC = () => {
+  const [currentTime, setCurrentTime] = useState<string>(getFormattedTime());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(getFormattedTime());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
+      <div className="pb-8">
+        <div className="flex items-baseline">
+          <h1 className="text-3xl font-medium">Pranshu Patel</h1>
+          <p className="text-sm px-1 text-zinc-400">(He/Him)</p>
         </div>
-      ))}
+        <p className="text-zinc-400">{ageInYears}y/o Developer, India • {currentTime}</p>
+      </div>
+      <p className="text-zinc-400">
+        Hey there! 👋🏻 I&apos;m Pranshu, a fullstack developer and college fresher based in India. Currently working on a few projects and pursuing B.Tech. in ICT from <a className="link" href="https://daiict.ac.in" target="_blank" rel="noopener noreferrer">DA-IICT</a>.
+      </p>
+      <div className="my-4 grid gap-2 md:gap-4 grid-cols-2 sm:grid-cols-4 mx-auto">
+        {socialLinks.map((item, index) => (
+          <div key={index} className="outline outline-1 outline-zinc-400 rounded-lg p-2">
+            <a href={item.href} target="_blank" rel="noopener noreferrer" className="link flex gap-2 items-center justify-center">
+              {item.icon} {item.text}
+            </a>
+          </div>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Home;