Add bottom tabs

packages/profile/src/components/achievements/index.tsx

@@ -1,4 +1,5 @@
 import {
+  LayoutBottomTabs,
   LayoutContainer,
   LayoutContent,
   LayoutHeader,
@@ -8,7 +9,6 @@ import { ScrollArea, Button, ArrowIcon, Spinner } from "@cartridge/ui-next";
 import { TrophiesTab, LeaderboardTab, Scoreboard } from "./tab";
 import { useAccount, useUsername } from "@/hooks/account";
 import { CopyAddress } from "@cartridge/ui-next";
-import { Navigation } from "../navigation";
 import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Trophies } from "./trophies";
@@ -92,11 +92,7 @@ export function Achievements() {
         }
         description={<CopyAddress address={address || self} size="sm" />}
         right={
-          isSelf ? (
-            <Navigation />
-          ) : (
-            <Scoreboard rank={rank} earnings={earnings} />
-          )
+          !isSelf ? <Scoreboard rank={rank} earnings={earnings} /> : undefined
         }
       />
 
@@ -154,6 +150,8 @@ export function Achievements() {
           </div>
         </LayoutContent>
       )}
+
+      {isSelf && <LayoutBottomTabs />}
     </LayoutContainer>
   );
 }

packages/profile/src/components/activity.tsx

@@ -10,13 +10,13 @@ import {
 } from "@cartridge/ui-next";
 import { useInfiniteTokenTransfersQuery } from "@cartridge/utils/api/indexer";
 import {
+  LayoutBottomTabs,
   LayoutContainer,
   LayoutContent,
   LayoutContentError,
   LayoutContentLoader,
   LayoutHeader,
 } from "@/components/layout";
-import { Navigation } from "@/components/navigation";
 import { useAccount } from "@/hooks/account";
 import { Link } from "react-router-dom";
 import { StarkscanUrl, useIndexerAPI } from "@cartridge/utils";
@@ -45,7 +45,6 @@ export function Activity() {
       <LayoutHeader
         title={username}
         description={<CopyAddress address={address} size="sm" />}
-        right={<Navigation />}
       />
 
       {(() => {
@@ -124,6 +123,8 @@ export function Activity() {
           }
         }
       })()}
+
+      <LayoutBottomTabs />
     </LayoutContainer>
   );
 }

packages/profile/src/components/inventory/index.tsx

@@ -4,11 +4,11 @@ export { SendToken } from "./token/send/index";
 
 import { CopyAddress, ScrollArea } from "@cartridge/ui-next";
 import {
+  LayoutBottomTabs,
   LayoutContainer,
   LayoutContent,
   LayoutHeader,
 } from "@/components/layout";
-import { Navigation } from "../navigation";
 import { Tokens } from "./token";
 import { useAccount } from "@/hooks/account";
 import { Outlet, useParams } from "react-router-dom";
@@ -30,7 +30,6 @@ export function Inventory() {
       <LayoutHeader
         title={username}
         description={<CopyAddress address={address} size="sm" />}
-        right={project ? <Navigation /> : undefined}
       />
 
       <LayoutContent className="pb-4">
@@ -41,6 +40,8 @@ export function Inventory() {
           </div>
         </ScrollArea>
       </LayoutContent>
+
+      {project && <LayoutBottomTabs />}
     </LayoutContainer>
   );
 }

packages/profile/src/components/layout/index.tsx

@@ -1,3 +1,4 @@
+import { ProfileContextTypeVariant } from "@cartridge/controller";
 import {
   Button,
   cn,
@@ -6,9 +7,13 @@ import {
   DotsIcon,
   Spinner,
   ErrorImage,
+  ChestIcon,
+  TrophyIcon,
+  ClockIcon,
 } from "@cartridge/ui-next";
-import { PropsWithChildren, useCallback } from "react";
+import { PropsWithChildren, useCallback, useMemo } from "react";
 import { useConnection } from "@/hooks/context";
+import { Link, useLocation } from "react-router-dom";
 import { isIframe } from "@cartridge/utils";
 
 export function LayoutContainer({
@@ -134,6 +139,7 @@ export function LayoutContent({
     <div
       className={cn(
         "flex flex-col h-full flex-1 overflow-y-auto px-4 gap-y-4",
+        isIframe() && "max-h-[380px]",
         className,
       )}
     >
@@ -176,3 +182,57 @@ export function LayoutFooter({
     </div>
   );
 }
+
+export function LayoutBottomTabs() {
+  const { pathname } = useLocation();
+  const active = useMemo<ProfileContextTypeVariant>(() => {
+    if (pathname.includes("inventory")) return "inventory";
+    if (pathname.includes("achievements")) return "achievements";
+    if (pathname.includes("activity")) return "activity";
+
+    return "inventory";
+  }, [pathname]);
+
+  return (
+    <div className="h-16 bg-background flex items-stretch absolute left-0 bottom-0 right-0 px-4 pb-2">
+      <Link
+        to="../inventory"
+        className={cn(
+          "flex-1 flex items-center justify-center text-muted-foreground",
+          active === "inventory" && "border-t border-primary",
+        )}
+      >
+        <ChestIcon
+          size="lg"
+          className={active === "inventory" ? "text-primary" : undefined}
+        />
+      </Link>
+      <Link
+        to="../achievements"
+        className={cn(
+          "flex-1 flex items-center justify-center text-muted-foreground",
+          active === "achievements" && "border-t border-primary",
+        )}
+      >
+        <TrophyIcon
+          size="lg"
+          variant={active === "achievements" ? "solid" : "line"}
+          className={active === "achievements" ? "text-primary" : undefined}
+        />
+      </Link>
+      <Link
+        to="../activity"
+        className={cn(
+          "flex-1 flex items-center justify-center text-muted-foreground",
+          active === "activity" && "border-t border-primary",
+        )}
+      >
+        <ClockIcon
+          size="lg"
+          variant={active === "activity" ? "solid" : "line"}
+          className={active === "activity" ? "text-primary" : undefined}
+        />
+      </Link>
+    </div>
+  );
+}

packages/ui-next/src/components/icons/state/clock.tsx

@@ -6,7 +6,7 @@ export const ClockIcon = memo(
   forwardRef<SVGSVGElement, StateIconProps>(
     ({ className, size, variant, ...props }, forwardedRef) => (
       <svg
-        viewBox="0 0 20 20"
+        viewBox="0 0 24 24"
         className={iconVariants({ size, className })}
         ref={forwardedRef}
         {...props}