WIP

src/shared/notes/preview/image.tsx

@@ -10,7 +10,7 @@ export function ImagePreview({ urls }: { urls: string[] }) {
 							src={url}
 							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 							alt="image"
-							className="h-auto w-full rounded-lg object-cover"
+							className="h-auto w-full border border-zinc-800/50 rounded-lg object-cover"
 						/>
 					</div>
 				))}

src/shared/notes/preview/link.tsx

@@ -20,7 +20,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 				</div>
 			) : (
 				<a
-					className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
+					className="flex flex-col rounded-lg border border-zinc-800/50 hover:border-fuchsia-900"
 					href={urls[0]}
 					target="_blank"
 					rel="noreferrer"

src/shared/notes/preview/video.tsx

@@ -4,9 +4,14 @@ export function VideoPreview({ urls }: { urls: string[] }) {
 	return (
 		<div className="relative mt-3 max-w-[420px] flex w-full flex-col gap-2">
 			{urls.map((url) => (
-				<div key={url} className="aspect-video">
-					<ReactPlayer url={url} width="100%" height="100%" />
-				</div>
+				<ReactPlayer
+					key={url}
+					url={url}
+					width="100%"
+					className="w-full h-auto border border-zinc-800/50 rounded-lg"
+					controls={true}
+					pip={true}
+				/>
 			))}
 		</div>
 	);