add trending notes

src/shared/notes/preview/image.tsx

@@ -0,0 +1,19 @@
+import { Image } from "@shared/image";
+
+export function ImagePreview({ urls }: { urls: string[] }) {
+	return (
+		<div className="mt-3 overflow-hidden">
+			<div className="flex flex-col gap-2">
+				{urls.map((url) => (
+					<div key={url} className="min-w-0 grow-0 shrink-0 basis-full">
+						<Image
+							src={url}
+							alt="image"
+							className="h-auto w-full rounded-lg object-cover"
+						/>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

src/shared/notes/preview/link.tsx

@@ -0,0 +1,53 @@
+import { Image } from "@shared/image";
+import { useOpenGraph } from "@utils/hooks/useOpenGraph";
+
+export function LinkPreview({ urls }: { urls: string[] }) {
+	const domain = new URL(urls[0]);
+	const { data, error, isLoading } = useOpenGraph(urls[0]);
+
+	return (
+		<div className="mt-3 overflow-hidden rounded-lg bg-zinc-800">
+			{error && <p>failed to load</p>}
+			{isLoading || !data ? (
+				<div className="flex flex-col">
+					<div className="w-full h-16 bg-zinc-700 animate-pulse" />
+					<div className="flex flex-col gap-2 px-3 py-3">
+						<div className="w-2/3 h-3 rounded bg-zinc-700 animate-pulse" />
+						<div className="w-3/4 h-3 rounded bg-zinc-700 animate-pulse" />
+						<div className="mt-2.5 w-1/3 h-2 rounded bg-zinc-700 animate-pulse" />
+					</div>
+				</div>
+			) : (
+				<a
+					className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
+					href={urls[0]}
+					target="_blank"
+					rel="noreferrer"
+				>
+					{data["og:image"] && (
+						<Image
+							src={data["og:image"]}
+							alt={urls[0]}
+							className="w-full h-auto object-cover rounded-t-lg"
+						/>
+					)}
+					<div className="flex flex-col gap-2 px-3 py-3">
+						<h5 className="leading-none font-medium text-zinc-200">
+							{data["og:title"]}
+						</h5>
+						{data["og:description"] ? (
+							<p className="leading-none text-sm text-zinc-400 line-clamp-3">
+								{data["og:description"]}
+							</p>
+						) : (
+							<></>
+						)}
+						<span className="mt-2.5 leading-none text-sm text-zinc-500">
+							{domain.hostname}
+						</span>
+					</div>
+				</a>
+			)}
+		</div>
+	);
+}

src/shared/notes/preview/video.tsx

@@ -0,0 +1,15 @@
+import { MediaOutlet, MediaPlayer } from "@vidstack/react";
+
+export function VideoPreview({ urls }: { urls: string[] }) {
+	return (
+		<div
+			onClick={(e) => e.stopPropagation()}
+			onKeyDown={(e) => e.stopPropagation()}
+			className="relative mt-2 flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
+		>
+			<MediaPlayer src={urls[0]} poster="" controls>
+				<MediaOutlet />
+			</MediaPlayer>
+		</div>
+	);
+}