feat: polish

packages/ark/src/components/note/primitives/repost.tsx

@@ -99,7 +99,7 @@ export function RepostNote({
 					<Note.Content />
 					<div className="flex items-center justify-between h-14">
 						<Note.Pin />
-						<div className="inline-flex items-center gap-10">
+						<div className="inline-flex items-center gap-4">
 							<Note.Reply />
 							<Note.Repost />
 							<Note.Zap />

packages/ark/src/components/note/primitives/text.tsx

@@ -22,7 +22,7 @@ export function TextNote({
 				<Note.Content className="min-w-0 px-3" />
 				<div className="flex items-center justify-between px-3 h-14">
 					<Note.Pin />
-					<div className="inline-flex items-center gap-10">
+					<div className="inline-flex items-center gap-4">
 						<Note.Reply />
 						<Note.Repost />
 						<Note.Zap />

packages/ark/src/components/user/cover.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@lume/utils";
+import { useUserContext } from "./provider";
+
+export function UserCover({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	if (!user) {
+		return (
+			<div
+				className={cn(
+					"animate-pulse bg-neutral-300 dark:bg-neutral-700",
+					className,
+				)}
+			/>
+		);
+	}
+
+	return (
+		<img
+			src={user.banner || user.cover}
+			alt="banner"
+			loading="lazy"
+			decoding="async"
+			style={{ contentVisibility: "auto" }}
+			className={cn("object-cover", className)}
+		/>
+	);
+}

packages/ark/src/components/user/index.ts

@@ -1,5 +1,6 @@
 import { UserAbout } from "./about";
 import { UserAvatar } from "./avatar";
+import { UserCover } from "./cover";
 import { UserFollowButton } from "./followButton";
 import { UserName } from "./name";
 import { UserNip05 } from "./nip05";
@@ -11,6 +12,7 @@ export const User = {
 	Provider: UserProvider,
 	Root: UserRoot,
 	Avatar: UserAvatar,
+	Cover: UserCover,
 	Name: UserName,
 	NIP05: UserNip05,
 	Time: UserTime,