update trending profile ui

src/app/trending/components/profile.tsx

@@ -1,3 +1,4 @@
+import { FollowIcon, LoaderIcon, UnfollowIcon } from "@shared/icons";
 import { Image } from "@shared/image";
 import { DEFAULT_AVATAR } from "@stores/constants";
 import { useQuery } from "@tanstack/react-query";
@@ -23,12 +24,10 @@ export function Profile({ data }: { data: any }) {
 
 	const [followed, setFollowed] = useState(false);
 
-
 	const followUser = (pubkey: string) => {
 		try {
 			follow(pubkey);
-
-			// // update state
+			// update state
 			setFollowed(true);
 		} catch (error) {
 			console.log(error);
@@ -38,15 +37,13 @@ export function Profile({ data }: { data: any }) {
 	const unfollowUser = (pubkey: string) => {
 		try {
 			unfollow(pubkey);
-
-			// // update state
+			// update state
 			setFollowed(false);
 		} catch (error) {
 			console.log(error);
 		}
 	};
 
-
 	useEffect(() => {
 		if (status === "success" && userFollows) {
 			if (userFollows.includes(data.pubkey)) {
@@ -86,14 +83,26 @@ export function Profile({ data }: { data: any }) {
 					{socialStatus === "loading" ? (
 						<button
 							type="button"
-							className="inline-flex w-36 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
+							className="inline-flex w-8 h-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500"
 						>
-							Loading...
+							<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
 						</button>
 					) : followed ? (
-					<button type="button" onClick={() => unfollowUser(data.pubkey)}>Unfollow</button>
+						<button
+							type="button"
+							onClick={() => unfollowUser(data.pubkey)}
+							className="inline-flex w-8 h-8 items-center justify-center rounded-md text-zinc-400 bg-zinc-800 hover:bg-fuchsia-500 hover:text-white"
+						>
+							<UnfollowIcon className="w-4 h-4" />
+						</button>
 					) : (
-					<button type="button" onClick={() => followUser(data.pubkey)}>Follow</button>
+						<button
+							type="button"
+							onClick={() => followUser(data.pubkey)}
+							className="inline-flex w-8 h-8 items-center justify-center rounded-md text-zinc-400 bg-zinc-800 hover:bg-fuchsia-500 hover:text-white"
+						>
+							<FollowIcon className="w-4 h-4" />
+						</button>
 					)}
 				</div>
 			</div>

src/shared/icons/follow.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function FollowIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.5"
+				d="M11.85 13.251c-3.719.065-6.427 2.567-7.18 5.915-.13.575.338 1.084.927 1.084h6.901m-.647-6.999l.147-.001c.353 0 .696.022 1.03.064m-1.177-.063a7.889 7.889 0 00-1.852.249m3.028-.186c.334.042.658.104.972.186m-.972-.186a7.475 7.475 0 011.972.524m3.25 1.412v3m0 0v3m0-3h-3m3 0h3m-5.5-11.75a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+			/>
+		</svg>
+	);
+}

src/shared/icons/index.tsx

@@ -41,4 +41,6 @@ export * from "./signal";
 export * from "./unverified";
 export * from "./settings";
 export * from "./logout";
+export * from "./follow";
+export * from "./unfollow";
 // @endindex

src/shared/icons/unfollow.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function UnfollowIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.5"
+				d="M17.748 11.25h4.5m-7.5-4.75a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM3.67 19.166C4.432 15.773 7.203 13.25 11 13.25c3.795 0 6.566 2.524 7.328 5.916.13.575-.338 1.084-.927 1.084H4.597c-.59 0-1.056-.51-.927-1.084z"
+			/>
+		</svg>
+	);
+}

src/shared/user.tsx

@@ -66,7 +66,7 @@ export function User({
 			<div className="flex flex-wrap items-baseline gap-1">
 				<h5
 					className={`text-zinc-100 font-semibold leading-none truncate ${
-						size === "small" ? "max-w-[8rem]" : "max-w-[15rem]"
+						size === "small" ? "max-w-[8rem]" : "max-w-[12rem]"
 					}`}
 				>
 					{user?.nip05 || user?.name || user?.displayName || shortenKey(pubkey)}