From 07e5975112f3e6de75f82cee5f607688c1bcb977 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:24:29 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20BtnLikeIcon=20component?=
 =?UTF-8?q?=20=F0=9F=9A=A7=20Work=20in=20progress=20on=20BtnLikeIcon=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20Styled=20BtnLikeIcon=20component=20=F0=9F=90=9B?=
 =?UTF-8?q?=20Fixed=20a=20bug=20in=20BtnLikeIcon=20=E2=9C=85=20Completed?=
 =?UTF-8?q?=20BtnLikeIcon=20implementation=20=F0=9F=93=9D=20Added=20docume?=
 =?UTF-8?q?ntation=20for=20BtnLikeIcon=20=E2=9A=A1=EF=B8=8F=20Optimized=20?=
 =?UTF-8?q?BtnLikeIcon=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BtnLikeIcon.tsx | 45 ++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/BtnLikeIcon.tsx

diff --git a/src/components/BtnLikeIcon.tsx b/src/components/BtnLikeIcon.tsx
new file mode 100644
index 0000000..a308549
--- /dev/null
+++ b/src/components/BtnLikeIcon.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React, { FC, useState } from "react";
+
+export interface BtnLikeIconProps {
+  className?: string;
+  colorClass?: string;
+  isLiked?: boolean;
+}
+
+const BtnLikeIcon: FC<BtnLikeIconProps> = ({
+  className = "",
+  colorClass = "text-white bg-black bg-opacity-30 hover:bg-opacity-50",
+  isLiked = false,
+}) => {
+  const [likedState, setLikedState] = useState(isLiked);
+
+  return (
+    <div
+      className={`nc-BtnLikeIcon w-8 h-8 flex items-center justify-center rounded-full cursor-pointer ${
+        likedState ? "nc-BtnLikeIcon--liked" : ""
+      }  ${colorClass} ${className}`}
+      data-nc-id="BtnLikeIcon"
+      title="Save"
+      onClick={() => setLikedState(!likedState)}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5"
+        fill={likedState ? "currentColor" : "none"}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default BtnLikeIcon;