custom preview initial commit

components/ModalContent/EditLinkModal.tsx

@@ -3,7 +3,10 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
 import Link from "next/link";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
@@ -11,6 +14,8 @@ import { useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
 import IconPicker from "../IconPicker";
 import { IconWeight } from "@phosphor-icons/react";
+import Image from "next/image";
+import { previewAvailable } from "@/lib/shared/getArchiveValidity";
 
 type Props = {
   onClose: Function;
@@ -137,31 +142,56 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                 setLink({ ...link, description: e.target.value })
               }
               placeholder={t("link_description_placeholder")}
-              className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+              className="resize-none w-full rounded-md p-2 h-32 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
             />
           </div>
 
           <div>
-            <IconPicker
-              hideDefaultIcon
-              color={link.color || "#0ea5e9"}
-              setColor={(color: string) => setLink({ ...link, color })}
-              weight={(link.iconWeight || "regular") as IconWeight}
-              setWeight={(iconWeight: string) =>
-                setLink({ ...link, iconWeight })
-              }
-              iconName={link.icon as string}
-              setIconName={(icon: string) => setLink({ ...link, icon })}
-              reset={() =>
-                setLink({
-                  ...link,
-                  color: "",
-                  icon: "",
-                  iconWeight: "",
-                })
-              }
-              alignment="-top-10 translate-x-20"
-            />
+            <p className="mb-2">{t("icon_and_preview")}</p>
+            <div className="flex gap-3">
+              <IconPicker
+                hideDefaultIcon
+                color={link.color || "#0ea5e9"}
+                setColor={(color: string) => setLink({ ...link, color })}
+                weight={(link.iconWeight || "regular") as IconWeight}
+                setWeight={(iconWeight: string) =>
+                  setLink({ ...link, iconWeight })
+                }
+                iconName={link.icon as string}
+                setIconName={(icon: string) => setLink({ ...link, icon })}
+                reset={() =>
+                  setLink({
+                    ...link,
+                    color: "",
+                    icon: "",
+                    iconWeight: "",
+                  })
+                }
+                alignment="-top-10 translate-x-20"
+              />
+
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="object-cover h-20 w-32 rounded-lg opacity-80"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-20 w-32 bg-opacity-80 rounded-lg flex flex-col justify-center">
+                  <p className="text-black text-sm text-center">
+                    {t("preview_unavailable")}
+                  </p>
+                </div>
+              ) : (
+                <div className="duration-100 h-20 w-32 bg-opacity-80 skeleton rounded-lg"></div>
+              )}
+            </div>
           </div>
         </div>
       </div>