feat(client): add duplicate check reminder and improve form UX

Author: BassemHalim

client/localization/ar.json

@@ -23,10 +23,11 @@
         "title": "ارفع ميم",
         "description": "ارفع الميم المفضل عندك",
         "note": "رجاء بلاش ميمز مسيئة او تحتوي علي شتايم!",
+        "duplicate-check": "رجاء ابحث الأول عشان تتأكد إن الميم ده مش موجود",
         "name": "اسم",
         "name-placeholder": "أدخل اسم بيوصف الميم",
         "tags": "Tags",
-        "tags-placeholder": "أضف tags...",
+        "tags-placeholder": "ابدأ الكتابة لإنشاء أو إضافة tags...",
         "tags-note": "زود(ي) tags/كلمات (زي اسم الفيلم أو المسرحية، الممثل أو الممثلة، نوع المصدر الخ) عشان تسهل البحث عن الميم ده",
         "image-url": "رابط الصورة",
         "image-url-placeholder": "رابط الصورة من وسائل التواصل الاجتماعي زي X، fb، الخ",

client/localization/en.json

@@ -18,10 +18,11 @@
         "title": "Upload a Meme",
         "description": "Upload your favorite memes",
         "note": "No offensive content please!",
+        "duplicate-check": "Please search first to make sure this meme doesn't already exist",
         "name": "Name",
         "name-placeholder": "Enter a descriptive name for your meme",
         "tags": "Tags",
-        "tags-placeholder": "Add tags...",
+        "tags-placeholder": "Start typing to create or add tags...",
         "tags-note": "Include as many tags as you can (such as movie/show name, actor/actress relevant text etc.) to simplify searching for that meme",
         "image-url": "Image Url",
         "image-url-placeholder": "Image Link from social media like X, fb, etc",

client/src/components/CreateMemeForm.tsx

@@ -56,13 +56,13 @@ const formSchema = z
             typeof window === "undefined"
                 ? z.any()
                 : z
-                      .instanceof(File)
-                      .refine((file) => file.size < MAX_FILE_SIZE, {
-                          message: `Image too big, Your image must be less than ${Math.floor(
-                              MAX_FILE_SIZE / 1000000,
-                          )} MB`,
-                      })
-                      .optional(),
+                    .instanceof(File)
+                    .refine((file) => file.size < MAX_FILE_SIZE, {
+                        message: `Image too big, Your image must be less than ${Math.floor(
+                            MAX_FILE_SIZE / 1000000,
+                        )} MB`,
+                    })
+                    .optional(),
     })
     .refine(
         (data) => {
@@ -249,6 +249,9 @@ export default function CreateMeme({
                             <DialogDescription>
                                 {t("description")}
                             </DialogDescription>
+                            <DialogDescription className="font-medium text-blue-600">
+                                {t("duplicate-check")}
+                            </DialogDescription>
                             <DialogDescription className="font-medium text-red-500">
                                 {t("note")}
                             </DialogDescription>
@@ -425,9 +428,8 @@ export default function CreateMeme({
                             "id" in state.data && (
                                 <Button asChild onClick={handleCancel}>
                                     <Link
-                                        href={`/meme/${
-                                            (state.data as unknown as Meme).id
-                                        }`}
+                                        href={`/meme/${(state.data as unknown as Meme).id
+                                            }`}
                                     >
                                         Meme Page
                                     </Link>