merged messageImage preview to image preview

src/components/note/comment.tsx

@@ -1,4 +1,4 @@
-import NoteMetadata from '@components/note/metadata';
+import { NoteMetadata } from '@components/note/metadata';
 import { ImagePreview } from '@components/note/preview/image';
 import { VideoPreview } from '@components/note/preview/video';
 import { NoteQuote } from '@components/note/quote';
@@ -18,7 +18,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
       if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
-        return <ImagePreview key={match + i} url={match} />;
+        return <ImagePreview key={match + i} url={match} size="large" />;
       } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
         // youtube
         return <VideoPreview key={match + i} url={match} />;

src/components/note/extend.tsx

@@ -18,7 +18,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
       if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
-        return <ImagePreview key={match + i} url={match} />;
+        return <ImagePreview key={match + i} url={match} size="large" />;
       } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
         // youtube
         return <VideoPreview key={match + i} url={match} />;

src/components/note/preview/image.tsx

@@ -1,9 +1,11 @@
 import Image from 'next/image';
 import { memo } from 'react';
 
-export const ImagePreview = memo(function ImagePreview({ url }: { url: string }) {
+export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
   return (
-    <div className="relative mb-2 mt-3 h-full w-full rounded-lg border border-zinc-800 xl:w-2/3">
+    <div
+      className={`relative h-full ${size === 'large' ? 'w-full' : 'w-2/3'} rounded-lg border border-zinc-800 xl:w-2/3`}
+    >
       <Image
         src={url}
         alt={url}

src/components/note/preview/link.tsx

@@ -6,7 +6,7 @@ export default function LinkCard({ data }: { data: any }) {
     <Link
       href={data['url']}
       target={'_blank'}
-      className="relative mt-2 flex flex-col overflow-hidden rounded-lg border border-zinc-700"
+      className="relative flex flex-col overflow-hidden rounded-lg border border-zinc-700"
     >
       <div className="relative aspect-video h-auto w-full">
         <Image src={data['image']} alt="image preview" fill={true} className="object-cover" />

src/components/note/preview/messageImage.tsx

@@ -1,18 +0,0 @@
-import Image from 'next/image';
-import { memo } from 'react';
-
-export const MessageImagePreview = memo(function MesssageImagePreview({ url }: { url: string }) {
-  return (
-    <div className="relative mb-2 mt-3 h-full w-2/3 rounded-lg border border-zinc-800 xl:w-2/3">
-      <Image
-        src={url}
-        alt={url}
-        width="0"
-        height="0"
-        sizes="100vw"
-        className="h-auto w-full rounded-lg object-cover"
-        priority
-      />
-    </div>
-  );
-});

src/components/note/preview/video.tsx

@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';
 
 export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
   return (
-    <div onClick={(e) => e.stopPropagation()} className="relative mt-3 flex flex-col overflow-hidden rounded-lg">
+    <div onClick={(e) => e.stopPropagation()} className="relative flex flex-col overflow-hidden rounded-lg">
       <ReactPlayer
         url={url}
         controls={true}

src/utils/parser.tsx

@@ -1,5 +1,4 @@
 import { ImagePreview } from '@components/note/preview/image';
-import { MessageImagePreview } from '@components/note/preview/messageImage';
 import { VideoPreview } from '@components/note/preview/video';
 import { NoteQuote } from '@components/note/quote';
 import { UserMention } from '@components/user/mention';
@@ -16,7 +15,7 @@ export const contentParser = (noteContent, noteTags) => {
   parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
     if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
       // image url
-      return <ImagePreview key={match + i} url={match} />;
+      return <ImagePreview key={match + i} url={match} size="large" />;
     } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
       // youtube
       return <VideoPreview key={match + i} url={match} />;
@@ -62,7 +61,7 @@ export const messageParser = (noteContent) => {
   parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
     if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
       // image url
-      return <MessageImagePreview key={match + i} url={match} />;
+      return <ImagePreview key={match + i} url={match} size="small" />;
     } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
       // youtube
       return <VideoPreview key={match + i} url={match} />;