[feat]: add emoji picker

SiddharthaMishra-dev · Mar 8, 2024 · 432db4e · 432db4e
1 parent 5236457
commit 432db4e
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 10 deletions.
diff --git a/components/CommentButton.tsx b/components/CommentButton.tsx
@@ -17,7 +17,7 @@ const CommentButton = ({ blog, handleComment }: CommentButtonProps) => {
 
   return (
     <>
-      <div className="flex items-center justify-center hover:text-blue-500 transition cursor-pointer">
+      <div className="flex items-center justify-center hover:text-blue-500 transition cursor-pointer text-gray-400">
         <FaRegComment onClick={onOpen} />
         <span className="ml-2">{blogsLength.length > 0 ? blogsLength.length : ""}</span>
       </div>

diff --git a/components/LikeButton.tsx b/components/LikeButton.tsx
@@ -21,6 +21,7 @@ const LikeButton = ({ blog, handleLike }: LikeButtonProps) => {
     if (!isLiked) {
       setIsLiked(true);
       setOptimisticLike(1);
+
       handleLike(blog);
     }
   };
@@ -38,13 +39,16 @@ const LikeButton = ({ blog, handleLike }: LikeButtonProps) => {
   const Icon = isLiked ? AiFillHeart : AiOutlineHeart;
 
   return (
-    <div className="group flex items-center hover:text-red-600 transition cursor-pointer">
+    <div className="group flex items-center hover:text-red-500 transition cursor-pointer text-gray-400">
       <Icon
         onClick={likeFn}
         size={20}
-        color={isLiked ? "red" : "white"}
+        // color={isLiked ? "red" : "white"}
+        className={`hover:text-red-500 ${isLiked ? "text-red-500" : ""}`}
       />
-      <span className="ml-2">{blog?.likes.length + optimisticLike}</span>
+      <span className="ml-2 text-sm">
+        {blog?.likes.length + optimisticLike !== 0 ? blog?.likes.length + optimisticLike : null}
+      </span>
     </div>
   );
 };

diff --git a/components/PostModal.tsx b/components/PostModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useRef } from "react";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
 import {
@@ -16,6 +16,8 @@ import {
 import { CircularProgress } from "@nextui-org/progress";
 import toast from "react-hot-toast";
 import { PostBlog } from "@/actions/actions";
+import { Smile } from "lucide-react";
+import EmojiPicker from "emoji-picker-react";
 
 const InitialState = {
   title: "",
@@ -32,9 +34,13 @@ interface PostModalProps {
 }
 
 export default function PostModal({ isOpen, onOpenChange, setfunction }: PostModalProps) {
+  const [isEmojiOpen, setIsEmojiOpen] = useState(false);
   const [formData, setFormData] = useState(InitialState);
   const [posting, setPosting] = useState(false);
   const { data: session } = useSession();
+
+  const contentRef = useRef<HTMLTextAreaElement>(null);
+
   const handleChange = (e: any) => {
     const { name, value } = e.target;
     setFormData((prevValue) => ({ ...prevValue, [name]: value }));
@@ -55,6 +61,13 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
     }
   };
 
+  const handleEmojiClick = (emoji: string) => {
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      content: prevFormData.content + emoji,
+    }));
+  };
+
   const resetForm = () => {
     setFormData(InitialState);
   };
@@ -75,7 +88,7 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
                   Jot down your thought
                 </h2>
               </ModalHeader>
-              <ModalBody>
+              <ModalBody className="relative">
                 <div className="w-full flex flex-col justify-center items-center gap-y-4">
                   <div className="p-1 flex flex-col w-full gap-y-2 ">
                     <Input
@@ -99,6 +112,7 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
                   </div>
                   <div className="p-1 flex flex-col w-full gap-y-2">
                     <Textarea
+                      ref={contentRef}
                       size="lg"
                       minRows={10}
                       name="content"
@@ -110,7 +124,23 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
                   </div>
                 </div>
               </ModalBody>
-              <ModalFooter>
+              <div className={`${isEmojiOpen ? "block" : "hidden"} absolute bottom-20 left-10`}>
+                <EmojiPicker
+                  open={true}
+                  onEmojiClick={({ emoji }) => handleEmojiClick(emoji)}
+                />
+              </div>
+              <ModalFooter className="items-center">
+                <div className="me-auto w-full box-border ">
+                  <Smile
+                    className="h-15 w-15 "
+                    onClick={() => {
+                      setIsEmojiOpen((prev) => {
+                        return !prev;
+                      });
+                    }}
+                  />
+                </div>
                 <Button
                   color="danger"
                   variant="light"

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "autoprefixer": "10.4.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "emoji-picker-react": "^4.8.0",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.13",
     "framer-motion": "^10.15.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml