Add TopTrack component to profile

apps/web/src/pages/profile/Profile.tsx

···
 import Followers from "./followers";
 import { activeTabAtom } from "../../atoms/tab";
 import Circles from "./circles";
+import TopTrack from "./toptrack";
 
 const Group = styled.div`
   display: flex;
···
   justify-content: space-between;
   align-items: flex-start;
   margin-top: 20px;
-  margin-bottom: 50px;
 `;
 
 const ProfileInfo = styled.div`
···
   return (
     <Main>
       <div className="pb-[100px] pt-[75px]">
-        <Group>
-          <ProfileInfo>
-            <div className="mr-[20px]">
-              <Avatar
-                name={profiles[did]?.displayName}
-                src={profiles[did]?.avatar}
-                size="150px"
-              />
-            </div>
-            <div style={{ marginTop: profiles[did]?.displayName ? 10 : 30 }}>
-              <HeadingMedium
-                marginTop="0px"
-                marginBottom={0}
-                className="!text-[var(--color-text)]"
-              >
-                {profiles[did]?.displayName}
-              </HeadingMedium>
-              <LabelLarge>
-                <a
-                  href={`https://bsky.app/profile/${profiles[did]?.handle}`}
-                  className="no-underline text-[var(--color-primary)]"
-                  target="_blank"
+        <div className="mb-[50px]">
+          <Group>
+            <ProfileInfo>
+              <div className="mr-[20px]">
+                <Avatar
+                  name={profiles[did]?.displayName}
+                  src={profiles[did]?.avatar}
+                  size="150px"
+                />
+              </div>
+              <div style={{ marginTop: profiles[did]?.displayName ? 10 : 30 }}>
+                <HeadingMedium
+                  marginTop="0px"
+                  marginBottom={0}
+                  className="!text-[var(--color-text)]"
                 >
-                  @{profiles[did]?.handle}
-                </a>
-                <span className="text-[var(--color-text-muted)] text-[15px]">
-                  {" "}
-                  • scrobbling since{" "}
-                  {dayjs(profiles[did]?.createdAt).format("DD MMM YYYY")}
-                </span>
-              </LabelLarge>
-              <div className="flex-1 mt-[30px] mr-[10px]">
-                <a
-                  href={`https://pdsls.dev/at/${profiles[did]?.did}`}
-                  target="_blank"
-                  className="no-underline text-[var(--color-text)] bg-[var(--color-default-button)] p-[16px] rounded-[10px] pl-[25px] pr-[25px]"
-                >
-                  <ExternalLink size={24} style={{ marginRight: 10 }} />
-                  View on PDSls
-                </a>
+                  {profiles[did]?.displayName}
+                </HeadingMedium>
+                <LabelLarge>
+                  <a
+                    href={`https://bsky.app/profile/${profiles[did]?.handle}`}
+                    className="no-underline text-[var(--color-primary)]"
+                    target="_blank"
+                  >
+                    @{profiles[did]?.handle}
+                  </a>
+                  <span className="text-[var(--color-text-muted)] text-[15px]">
+                    {" "}
+                    • scrobbling since{" "}
+                    {dayjs(profiles[did]?.createdAt).format("DD MMM YYYY")}
+                  </span>
+                </LabelLarge>
+                <div className="flex-1 mt-[30px] mr-[10px]">
+                  <a
+                    href={`https://pdsls.dev/at/${profiles[did]?.did}`}
+                    target="_blank"
+                    className="no-underline text-[var(--color-text)] bg-[var(--color-default-button)] p-[16px] rounded-[10px] pl-[25px] pr-[25px]"
+                  >
+                    <ExternalLink size={24} style={{ marginRight: 10 }} />
+                    View on PDSls
+                  </a>
+                </div>
               </div>
-            </div>
-          </ProfileInfo>
-          {(profile.data?.did !== localStorage.getItem("did") ||
-            !localStorage.getItem("did")) && (
-            <>
-              {!follows.has(profile.data?.did || "") && !isLoading && (
-                <Button
-                  shape="pill"
-                  size="compact"
-                  startEnhancer={<IconPlus size={18} />}
-                  onClick={onFollow}
-                  overrides={{
-                    BaseButton: {
-                      style: {
-                        marginTop: "12px",
-                        minWidth: "120px",
-                        backgroundColor: "#ff2876",
-                        ":hover": {
+            </ProfileInfo>
+            {(profile.data?.did !== localStorage.getItem("did") ||
+              !localStorage.getItem("did")) && (
+              <>
+                {!follows.has(profile.data?.did || "") && !isLoading && (
+                  <Button
+                    shape="pill"
+                    size="compact"
+                    startEnhancer={<IconPlus size={18} />}
+                    onClick={onFollow}
+                    overrides={{
+                      BaseButton: {
+                        style: {
+                          marginTop: "12px",
+                          minWidth: "120px",
                           backgroundColor: "#ff2876",
-                        },
-                        ":focus": {
-                          backgroundColor: "#ff2876",
+                          ":hover": {
+                            backgroundColor: "#ff2876",
+                          },
+                          ":focus": {
+                            backgroundColor: "#ff2876",
+                          },
                         },
                       },
-                    },
-                  }}
-                >
-                  Follow
-                </Button>
-              )}
-              {follows.has(profile.data?.did || "") && !isLoading && (
-                <Button
-                  shape="pill"
-                  size="compact"
-                  startEnhancer={<IconCheck size={18} />}
-                  onClick={onUnfollow}
-                  overrides={{
-                    BaseButton: {
-                      style: {
-                        marginTop: "12px",
-                        minWidth: "120px",
-                        backgroundColor: "var(--color-default-button)",
-                        color: "var(--color-text)",
-                        ":hover": {
+                    }}
+                  >
+                    Follow
+                  </Button>
+                )}
+                {follows.has(profile.data?.did || "") && !isLoading && (
+                  <Button
+                    shape="pill"
+                    size="compact"
+                    startEnhancer={<IconCheck size={18} />}
+                    onClick={onUnfollow}
+                    overrides={{
+                      BaseButton: {
+                        style: {
+                          marginTop: "12px",
+                          minWidth: "120px",
                           backgroundColor: "var(--color-default-button)",
-                        },
-                        ":focus": {
-                          backgroundColor: "var(--color-default-button)",
+                          color: "var(--color-text)",
+                          ":hover": {
+                            backgroundColor: "var(--color-default-button)",
+                          },
+                          ":focus": {
+                            backgroundColor: "var(--color-default-button)",
+                          },
                         },
                       },
-                    },
-                  }}
-                >
-                  Following
-                </Button>
-              )}
-            </>
-          )}
-        </Group>
+                    }}
+                  >
+                    Following
+                  </Button>
+                )}
+              </>
+            )}
+          </Group>
+          <div className="mt-[20px] flex justify-end">
+            <TopTrack />
+          </div>
+        </div>
 
         <Tabs
           activeKey={activeKey}

apps/web/src/pages/profile/toptrack/TopTrack.tsx

···
+import { Link, useParams } from "@tanstack/react-router";
+import { useTracksQuery } from "../../../hooks/useLibrary";
+import { getLastDays } from "../../../lib/date";
+
+function TopTrack() {
+  const { did } = useParams({ strict: false });
+  const { data, isLoading } = useTracksQuery(did!, 0, 1, ...getLastDays(7));
+  console.log(">> data", data);
+  return (
+    <>
+      {!isLoading && data.length > 0 && (
+        <div className="flex">
+          <div className="flex flex-col items-end pr-[15px]">
+            <h4
+              className="text-[12px] opacity-60 m-[0px]"
+              style={{ fontWeight: "bold" }}
+            >
+              TOP TRACK
+            </h4>
+            <Link
+              to={data[0].uri?.split("at:/")[1]?.replace("app.rocksky.", "")}
+              className="!text-[var(--color-text)] no-underline hover:underline"
+            >
+              <b className="text-[18px] truncate max-w-[500px]">
+                {data[0].title}
+              </b>
+            </Link>
+
+            <Link
+              to={data[0].artistUri
+                ?.split("at:/")[1]
+                ?.replace("app.rocksky.", "")}
+              className="text-[var(--color-text)] no-underline hover:underline"
+            >
+              <span className="opacity-90 text-[18px] truncate max-w-[500px]">
+                {data[0].artist}
+              </span>
+            </Link>
+          </div>
+          <Link
+            to={data[0].albumUri?.split("at:/")[1]?.replace("app.rocksky.", "")}
+          >
+            <img
+              src={data[0].albumArt}
+              alt={"Addicted"}
+              className="w-[70px] h-[70px]"
+            />
+          </Link>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default TopTrack;

apps/web/src/pages/profile/toptrack/index.tsx

···
+import TopTrack from "./TopTrack";
+
+export default TopTrack;