Social Buttons

The following component is for showcasing icons which redirect to social platforms. It is a single component and can be easily customized in terms of icons and also style the list itself and set the orientation. You can define more platforms in component file under platformStyles, to use the button list you have to pass in an array with platform, icon and url. You can pass in any icon.

Dependencies

Install the following libraries. Assuming you have Tailwind CSS installed

npm install react-icons

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import SocialButtonList from './components/social-buttons';
import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from 'react-icons/fa';

const App = () => {
  const socialButtons = [
    {
      platform: 'facebook',
      icon: <FaFacebook />,
      url: 'https://www.facebook.com',
    },
    {
      platform: 'twitter',
      icon: <FaTwitter />,
      url: 'https://www.twitter.com',
    },
    {
      platform: 'instagram',
      icon: <FaInstagram />,
      url: 'https://www.instagram.com',
    },
    {
      platform: 'linkedin',
      icon: <FaLinkedin />,
      url: 'https://www.linkedin.com',
    },
  ];

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Follow Us</h1>
      <SocialButtonList
        buttons={socialButtons}
        itemClassName="text-xl" // Class for the icons
        className="my-4" // Additional class for the container
        orientation="horizontal" // Change to "vertical" for a vertical layout
      />
    </div>
  );
};

export default App;

Component

socialbuttons.jsx

// Social-Buttons.jsx
import React from 'react';

const SocialButton = ({ platform, icon, url, itemClassName, onClick }) => {
  const baseStyle = "flex items-center justify-center w-10 h-10 rounded-full text-white transition-all duration-300";

  const platformStyles = {
    facebook: "bg-blue-600 hover:bg-blue-700",
    twitter: "bg-blue-400 hover:bg-blue-500",
    instagram: "bg-pink-600 hover:bg-pink-700",
    linkedin: "bg-blue-700 hover:bg-blue-800",
    // Add more platforms as needed
  };

  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      onClick={onClick}
      className={`${baseStyle} ${platformStyles[platform] || 'bg-gray-600 hover:bg-gray-700'} ${itemClassName}`}
    >
      {icon}
    </a>
  );
};

const SocialButtonList = ({ buttons, itemClassName = '', className = '', orientation = 'horizontal' }) => {
  const flexDirection = orientation === 'vertical' ? 'flex-col' : 'flex-row';

  return (
    <div className={`flex ${flexDirection} space-x-4 ${className}`}>
      {buttons.map((button, index) => (
        <SocialButton
          key={index}
          platform={button.platform}
          icon={button.icon}
          url={button.url}
          itemClassName={itemClassName}
          onClick={button.onClick}
        />
      ))}
    </div>
  );
};

export default SocialButtonList;