refactor all widgets

src/shared/notes/preview/link.tsx

@@ -2,6 +2,10 @@ import { Link } from 'react-router-dom';
 
 import { useOpenGraph } from '@utils/hooks/useOpenGraph';
 
+function isImage(url: string) {
+  return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif)$/.test(url);
+}
+
 export function LinkPreview({ urls }: { urls: string[] }) {
   const { status, data, error } = useOpenGraph(urls[0]);
   const domain = new URL(urls[0]);
@@ -37,25 +41,25 @@ export function LinkPreview({ urls }: { urls: string[] }) {
             </div>
           ) : (
             <>
-              {data.image && (
+              {isImage(data.image) ? (
                 <img
                   src={data.image}
                   alt={urls[0]}
                   className="h-44 w-full rounded-t-lg bg-white object-cover"
                 />
-              )}
-              <div className="flex flex-col px-3 py-3">
-                <div className="flex flex-col gap-1">
+              ) : null}
+              <div className="flex flex-col items-start px-3 py-3">
+                <div className="flex flex-col items-start gap-1 text-left">
                   {data.title && (
                     <h5 className="line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
                       {data.title}
                     </h5>
                   )}
-                  {data.description && (
+                  {data.description ? (
                     <p className="mb-2.5 line-clamp-3 break-all text-sm text-neutral-700 dark:text-neutral-400">
                       {data.description}
                     </p>
-                  )}
+                  ) : null}
                 </div>
                 <span className="break-all text-sm text-neutral-600 dark:text-neutral-400">
                   {domain.hostname}