feat: polish

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,