From b5c2212c511cd386bc233fa4e3e5789a67bd2221 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:00:42 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20Added=20SocialsShare=20component?=
 =?UTF-8?q?=20=F0=9F=9A=80=20This=20component=20enables=20easy=20sharing?=
 =?UTF-8?q?=20on=20social=20media.=20=F0=9F=8E=A8=20Improved=20styles=20an?=
 =?UTF-8?q?d=20hover=20effects.=20=F0=9F=94=97=20Added=20links=20for=20Fac?=
 =?UTF-8?q?ebook,=20Twitter,=20LinkedIn,=20and=20Instagram.=20=F0=9F=91=8F?=
 =?UTF-8?q?=20Great=20work=20on=20this=20feature!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/shared/SocialsShare.tsx b/src/shared/SocialsShare.tsx
new file mode 100644
index 0000000..d5630c8
--- /dev/null
+++ b/src/shared/SocialsShare.tsx
@@ -0,0 +1,45 @@
+import React, { FC } from "react";
+
+export interface SocialsShareProps {
+  className?: string;
+  itemClass?: string;
+}
+
+export interface SocialType {
+  name: string;
+  icon: string;
+  href: string;
+}
+
+const socials: SocialType[] = [
+  { name: "Facebook", icon: "lab la-facebook-f", href: "#" },
+  { name: "Twitter", icon: "lab la-twitter", href: "#" },
+  { name: "Linkedin", icon: "lab la-linkedin-in", href: "#" },
+  { name: "Instagram", icon: "lab la-instagram", href: "#" },
+];
+
+const SocialsShare: FC<SocialsShareProps> = ({
+  className = "grid gap-[6px]",
+  itemClass = "w-7 h-7 text-base hover:bg-neutral-100",
+}) => {
+  const renderItem = (item: SocialType, index: number) => {
+    return (
+      <a
+        key={index}
+        href={item.href}
+        className={`rounded-full leading-none flex items-center justify-center bg-white text-neutral-6000 ${itemClass}`}
+        title={`Share on ${item.name}`}
+      >
+        <i className={item.icon}></i>
+      </a>
+    );
+  };
+
+  return (
+    <div className={`nc-SocialsShare ${className}`} data-nc-id="SocialsShare">
+      {socials.map(renderItem)}
+    </div>
+  );
+};
+
+export default SocialsShare;