added: nav menu & github activity page

package.json

@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@sendgrid/mail": "^8.1.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.378.0",
     "next": "14.2.3",

src/app/blogs/page.tsx

@@ -8,9 +8,11 @@ const BlogsPage = () => {
       </header>
       <ul className="space-y-3">
         <Link href="https://blogs.krishnaaa.com/javascript-basics-for-reactjs-a-beginners-guide">
-          <li className="flex justify-between underline">
+          <li className="flex justify-between hover:underline">
             <span>JavaScript Basics for React.js: A Beginner&apos;s Guide</span>
-            <span>Nov 3, 2023</span>
+            <span className="text-sm text-zinc-600 dark:text-zinc-400">
+              Nov 3, 2023
+            </span>
           </li>
         </Link>
       </ul>

src/app/github-activity/page.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { getRecentContributions } from "../actions";
+import { format, parseISO } from "date-fns";
+
+const GithubActivityPage = async () => {
+  const contributions = await getRecentContributions(100);
+  return (
+    <main className="space-y-8">
+      <header className="font-bold">
+        <span>github activity</span>
+      </header>
+      <ul className="space-y-8">
+        {contributions.map((contribution) => (
+          <li key={contribution.abbreviatedOid} className="">
+            <Link
+              href={contribution.repoUrl}
+              className="text-sm text-zinc-600 dark:text-zinc-400 hover:underline"
+            >
+              {contribution.repo}
+            </Link>
+            <Link
+              href={contribution.commitUrl}
+              className="flex justify-between items-center hover:underline"
+            >
+              <p className="w-4/6">{contribution.message}</p>
+              <p className="text-sm text-zinc-600 dark:text-zinc-400">
+                {format(parseISO(contribution.committedDate), "MMM do, yy")}
+              </p>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+};
+
+export default GithubActivityPage;

src/app/page.tsx

@@ -40,7 +40,7 @@ export default async function Home() {
         >
           {NAME}
         </span>
-        <span className="max-w-80 text-center font-thin">
+        <span className="max-w-[21rem] text-center font-thin">
           Code <Emoji symbol="💻" label="laptop" /> , Caffeinated{" "}
           <Emoji symbol="☕️" label="coffee" /> by Nitro{" "}
           <Emoji symbol="🚀" label="rocket" /> , and Architecting{" "}
@@ -94,11 +94,13 @@ export default async function Home() {
         </header>
         <ul className="space-y-3">
           <Link href="https://blogs.krishnaaa.com/javascript-basics-for-reactjs-a-beginners-guide">
-            <li className="flex justify-between underline">
+            <li className="flex justify-between hover:underline">
               <span>
                 JavaScript Basics for React.js: A Beginner&apos;s Guide
               </span>
-              <span>Nov 3, 2023</span>
+              <span className="text-sm text-zinc-600 dark:text-zinc-400">
+                Nov 3, 2023
+              </span>
             </li>
           </Link>
         </ul>
@@ -112,24 +114,22 @@ export default async function Home() {
         </header>
         <ul className="space-y-3">
           {contributions.map((contribution) => (
-            <li key={contribution.repo} className="">
+            <li key={contribution.abbreviatedOid} className="">
               <Link
                 href={contribution.repoUrl}
-                className="text-sm text-gray-500 hover:underline"
+                className="text-sm text-zinc-600 dark:text-zinc-400 hover:underline"
               >
                 {contribution.repo}
               </Link>
-              <div className="flex justify-between items-center">
-                <Link
-                  href={contribution.commitUrl}
-                  className="w-4/6 hover:underline"
-                >
-                  <p>{contribution.message}</p>
-                </Link>
-                <p className="text-sm text-gray-500">
+              <Link
+                href={contribution.commitUrl}
+                className="flex justify-between items-center hover:underline"
+              >
+                <p className="w-4/6">{contribution.message}</p>
+                <p className="text-sm text-zinc-600 dark:text-zinc-400">
                   {format(parseISO(contribution.committedDate), "MMM do, yy")}
                 </p>
-              </div>
+              </Link>
             </li>
           ))}
         </ul>

src/components/kbd.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+interface KbdProps {
+  letter: string;
+}
+
+const Kbd = ({ letter }: KbdProps) => {
+  return (
+    <kbd className="pointer-events-none inline-flex h-5 select-none items-center justify-center gap-1 font-mono font-medium text-zinc-700 dark:text-zinc-300">
+      <span className="text-base">⌘</span>
+      <span className="text-sm">{letter}</span>
+    </kbd>
+  );
+};
+
+export default Kbd;