Browse Source

📦 Added SocialsList component

🚀 This component handles displaying a list of social icons.
🔗 It includes a demo with Facebook, Twitter, Youtube, and Instagram.
🎨 Added styling and classes for customization.
🌟 Ready for social sharing functionality!
main
John Doe 1 year ago
parent
commit
68ea63cc75
  1. 43
      src/shared/SocialsList.tsx

43
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;
Loading…
Cancel
Save