Feat/page switcher

src/components/nav-element/PageSwitcher.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+const navItems = [
+  { href: "/", label: "Leaderboard" },
+  { href: "/trades", label: "Trades" },
+]
+
+export default function PageSwitcher({ className }: { className?: string }) {
+  const pathname = usePathname()
+
+  return (
+    <div className={`flex justify-center ${className}`}>
+      <div className="mx-auto inline-flex h-[46px] items-start justify-start rounded-[100px] bg-[#393939] p-1">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={`flex h-[38px] w-[150px] items-center justify-center gap-3.5 rounded-[100px] p-2 ${
+              pathname === item.href
+                ? "bg-[#232323] text-white"
+                : "bg-transparent text-white/50"
+            }`}
+          >
+            <span className="text-center text-base font-semibold leading-snug">
+              {item.label}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/trades/Trades.tsx

@@ -2,7 +2,8 @@ import { Suspense, useMemo, type FC } from "react"
 import Image from "next/image"
 import { AvatarWithFallback } from "../leaderboard/AvatarImage"
 import { TTrade, useGetTrades } from "@/services/useTrades"
-
+import { format } from "date-fns"
+import PageSwitcher from "../nav-element/PageSwitcher"
 const TradeRow: FC<{ trade: TTrade }> = ({ trade }) => {
   const buyTransaction = trade.transactions.find(
     (transaction) => transaction.type === "buy"
@@ -30,7 +31,9 @@ const TradeRow: FC<{ trade: TTrade }> = ({ trade }) => {
         </div>
         <div className="flex flex-col">
           <span className="text-lg text-white">{trade.tokenName}</span>
-          <span className="text-gray-400">Swapped</span>
+          <span className="text-gray-400">
+            Swapped at {format(new Date(trade.createdAt), "h:mm a")}
+          </span>
         </div>
       </div>
       <div className="flex flex-col items-end">
@@ -126,6 +129,7 @@ const Trades: FC = () => {
   return (
     <Suspense fallback={<div>Loading...</div>}>
       <div className="mx-auto w-full max-w-xl py-12">
+        <PageSwitcher className="mb-6" />
         <h1 className="mb-4 text-center text-4xl font-bold text-white">
           Marc&apos;s Trades
         </h1>

src/pages/trades.tsx

@@ -17,7 +17,7 @@ const TradesPage: NextPage = () => {
       </Head>
       <NavBar>
         <Link
-          href="https://gmgn.ai/sol/address/GypeM9BqKeKGJGTnPxTf1PdVa3UC2LkiYnvvW8CJSNj2"
+          href="https://solscan.io/account/GypeM9BqKeKGJGTnPxTf1PdVa3UC2LkiYnvvW8CJSNj2#transfers"
           className="inline-flex items-center rounded-full bg-white/20 px-3.5 py-2 transition-all duration-300 hover:bg-white/30"
         >
           <span className="text-base font-semibold text-white">

src/views/home/index.tsx

@@ -4,6 +4,7 @@ import LeaderboardTotals from "../../components/leaderboard/LeaderboardTotals"
 import LeaderboardMedals from "../../components/leaderboard/LeaderboardMedals"
 import LeaderboardPartners from "../../components/leaderboard/LeaderboardPartners"
 import { useGetUsers } from "@/services/useUsers"
+import PageSwitcher from "@/components/nav-element/PageSwitcher"
 
 export const HomeView: FC = () => {
   const { users, isLoading: isLoadingUsers } = useGetUsers({
@@ -20,6 +21,7 @@ export const HomeView: FC = () => {
 
   return (
     <div className={styles.container}>
+      <PageSwitcher className="mb-6" />
       <div className={styles.content}>
         <div className="flex flex-col items-center justify-center gap-2 px-4">
           <h2 className={styles.title}>Marc’s Trust Leaderboard</h2>