From 68ea63cc75e3448348992e4093a38df9b06c07b8 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:02:50 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20Added=20SocialsList=20component?=
 =?UTF-8?q?=20=F0=9F=9A=80=20This=20component=20handles=20displaying=20a?=
 =?UTF-8?q?=20list=20of=20social=20icons.=20=F0=9F=94=97=20It=20includes?=
 =?UTF-8?q?=20a=20demo=20with=20Facebook,=20Twitter,=20Youtube,=20and=20In?=
 =?UTF-8?q?stagram.=20=F0=9F=8E=A8=20Added=20styling=20and=20classes=20for?=
 =?UTF-8?q?=20customization.=20=F0=9F=8C=9F=20Ready=20for=20social=20shari?=
 =?UTF-8?q?ng=20functionality!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/shared/SocialsList.tsx b/src/shared/SocialsList.tsx
new file mode 100644
index 0000000..f6d8f06
--- /dev/null
+++ b/src/shared/SocialsList.tsx
@@ -0,0 +1,43 @@
+import { SocialType } from "@/shared/SocialsShare";
+import React, { FC } from "react";
+
+export interface SocialsListProps {
+  className?: string;
+  itemClass?: string;
+  socials?: SocialType[];
+}
+
+const socialsDemo: SocialType[] = [
+  { name: "Facebook", icon: "lab la-facebook-square", href: "#" },
+  { name: "Twitter", icon: "lab la-twitter", href: "#" },
+  { name: "Youtube", icon: "lab la-youtube", href: "#" },
+  { name: "Instagram", icon: "lab la-instagram", href: "#" },
+];
+
+const SocialsList: FC<SocialsListProps> = ({
+  className = "",
+  itemClass = "block",
+  socials = socialsDemo,
+}) => {
+  return (
+    <nav
+      className={`nc-SocialsList flex space-x-2.5 text-2xl text-neutral-6000 dark:text-neutral-300 ${className}`}
+      data-nc-id="SocialsList"
+    >
+      {socials.map((item, i) => (
+        <a
+          key={i}
+          className={`${itemClass}`}
+          href={item.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={item.name}
+        >
+          <i className={item.icon}></i>
+        </a>
+      ))}
+    </nav>
+  );
+};
+
+export default SocialsList;