useBestFriends();

components/util/LazyLoadedImage.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { useThumbnailURL } from "@/hooks/use-lazy-load";
+import { Skeleton } from "../ui/skeleton";
+import Image from "next/image";
+
+interface LazyLoadedImageProps {
+	imgId: string;
+	alt: string;
+	[prop: string]: string;
+}
+
+const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({
+	imgId,
+	alt,
+	...props
+}) => {
+	const imgUrl = useThumbnailURL(imgId);
+
+	return (
+		<div>
+			{imgUrl ? (
+				<Image
+					src={imgUrl as any}
+					width={1024}
+					height={1024}
+					alt={alt}
+					{...props}
+				/>
+			) : (
+				<Skeleton {...props} />
+			)}
+		</div>
+	);
+};
+
+export default LazyLoadedImage;

components/util/MiscStuff.tsx

@@ -0,0 +1,16 @@
+import { TooltipProps } from "@radix-ui/react-tooltip";
+import { VerifiedIcon } from "../roblox/RobloxIcons";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+export function StupidHoverThing({ children, text, ...props }: React.PropsWithChildren & TooltipProps & { text: string | React.ReactNode }) {
+	return (
+		<Tooltip {...props}>
+			<TooltipTrigger asChild>
+				{children}
+			</TooltipTrigger>
+			<TooltipContent className="bg-surface0 text-text m-2">
+				<span className="text-sm flex items-center">{text}</span>
+			</TooltipContent>
+		</Tooltip>
+	)
+}