Socail Share

import React, { useState } from "react";
import { Facebook, Link, Linkedin, Share, Twitter, X } from "lucide-react";

const SocialShare = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className="fixed bottom-4 right-4 z-50">
      <button
        className="rounded-full p-4 bg-white/90 shadow-lg hover:bg-white/95 transform transition-all duration-300 ease-in-out hover:scale-105 dark:bg-gray-800/90 dark:hover:bg-gray-800/95"
        onClick={() => setIsOpen(!isOpen)}
        aria-label={isOpen ? "Close share menu" : "Open share menu"}
      >
        {isOpen ? (
          <X className="h-6 w-6 text-gray-700 dark:text-gray-200" />
        ) : (
          <Share className="h-6 w-6 text-gray-700 dark:text-gray-200" />
        )}
      </button>
      <div
        className={`absolute bottom-16 right-0 transform transition-all duration-300 ease-in-out ${
          isOpen
            ? "opacity-100 translate-y-0"
            : "opacity-0 translate-y-4 pointer-events-none"
        }`}
      >
        <div className="bg-white/90 shadow-xl rounded-2xl p-3 space-y-2 dark:bg-gray-800/90 min-w-[200px]">
          {[
            { icon: Facebook, label: "Facebook", color: "text-blue-600" },
            { icon: Twitter, label: "Twitter", color: "text-blue-400" },
            { icon: Linkedin, label: "LinkedIn", color: "text-blue-700" },
            { icon: Link, label: "Copy Link", color: "text-gray-600" },
          ].map(({ icon: Icon, label, color }) => (
            <button
              key={label}
              className="flex items-center w-full px-4 py-3 text-sm text-gray-700 hover:bg-gray-50/90 rounded-xl transition-colors duration-200 dark:text-gray-200 dark:hover:bg-gray-700/50"
              aria-label={`Share on ${label}`}
            >
              <Icon className={`mr-3 h-5 w-5 ${color}`} />
              <span className="font-medium">{label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default SocialShare;

import React, { useEffect, useRef, useState } from "react";
import { Facebook, Link, Linkedin, Share, Twitter, X } from "lucide-react";

const SocialShare = () => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);
  return (
    <div className="flex justify-center items-center h-screen">
      <div className="relative inline-block text-left" ref={dropdownRef}>
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="inline-flex items-center px-6 py-3 rounded-full bg-white/90 shadow-md hover:bg-white/95 transform transition-all duration-300 ease-in-out hover:scale-105 dark:bg-gray-800/90 dark:hover:bg-gray-800/95"
          aria-haspopup="true"
          aria-expanded={isOpen}
        >
          <Share className="mr-2 h-5 w-5 text-gray-700 dark:text-gray-200" />
          <span className="text-gray-700 font-medium dark:text-gray-200">
            Share
          </span>
        </button>

        <div
          className={`transform transition-all duration-300 ease-in-out absolute right-0 mt-2 w-56 ${
            isOpen
              ? "opacity-100 translate-y-0"
              : "opacity-0 translate-y-4 pointer-events-none"
          }`}
        >
          <div className="rounded-2xl shadow-xl bg-white/90 ring-1 ring-black/5 dark:bg-gray-800/90">
            <div className="py-2" role="menu" aria-orientation="vertical">
              {[
                { icon: Facebook, label: "Facebook", color: "text-blue-600" },
                { icon: Twitter, label: "Twitter", color: "text-blue-400" },
                { icon: Linkedin, label: "LinkedIn", color: "text-blue-700" },
                { icon: Link, label: "Copy Link", color: "text-gray-600" },
              ].map(({ icon: Icon, label, color }) => (
                <button
                  key={label}
                  className="flex items-center w-full px-4 py-3 text-sm text-gray-700 hover:bg-gray-50/90 transition-colors duration-200 dark:text-gray-200 dark:hover:bg-gray-700/50"
                  role="menuitem"
                >
                  <Icon className={`mr-3 h-5 w-5 ${color}`} />
                  <span className="font-medium">{label}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SocialShare;

import React, { useEffect, useRef, useState } from "react";
import { Copy, Facebook, Linkedin, Share, Twitter, X } from "lucide-react";

const SocialShare = () => {
  const [isOpen, setIsOpen] = useState(false);
  const modalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        modalRef.current &&
        !modalRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [isOpen]);

  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <button
          onClick={() => setIsOpen(true)}
          className="inline-flex items-center px-6 py-3 rounded-full bg-white/90 shadow-md hover:bg-white/95 transform transition-all duration-300 ease-in-out hover:scale-105 dark:bg-gray-800/90 dark:hover:bg-gray-800/95"
        >
          <Share className="mr-2 h-5 w-5 text-gray-700 dark:text-gray-200" />
          <span className="text-gray-700 font-medium dark:text-gray-200">
            Share
          </span>
        </button>
      </div>

      <div
        className={`fixed inset-0 bg-black/40 flex items-center justify-center p-4 transition-opacity duration-300 ${
          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
      >
        <div
          ref={modalRef}
          className={`bg-white/90 rounded-3xl shadow-2xl max-w-md w-full transform transition-all duration-300 dark:bg-gray-800/90 ${
            isOpen ? "scale-100" : "scale-95"
          }`}
        >
          <div className="flex justify-between items-center p-6">
            <h3 className="text-xl font-semibold text-gray-700 dark:text-gray-200">
              Share this content
            </h3>
            <button
              onClick={() => setIsOpen(false)}
              className="text-gray-400 hover:text-gray-500 transition-colors duration-200"
            >
              <X className="h-6 w-6" />
            </button>
          </div>
          <div className="px-6 pb-6">
            <div className="flex items-center space-x-2 mb-6">
              <input
                type="text"
                value="https://business-wish.vercel.app/"
                readOnly
                className="flex-grow px-4 py-3 rounded-xl border border-gray-200 bg-gray-50/50 text-gray-700 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-300"
              />
              <button className="p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors duration-200 dark:bg-gray-900 dark:hover:bg-gray-800">
                <Copy className="h-5 w-5 text-gray-700 dark:text-gray-300" />
              </button>
            </div>
            <div className="flex justify-center space-x-6">
              {[
                { icon: Facebook, color: "bg-blue-600" },
                { icon: Twitter, color: "bg-blue-400" },
                { icon: Linkedin, color: "bg-blue-700" },
              ].map(({ icon: Icon, color }, index) => (
                <button
                  key={index}
                  className={`p-4 ${color} text-white rounded-2xl transform transition-all duration-300 ease-in-out hover:scale-110 hover:shadow-lg`}
                >
                  <Icon className="h-6 w-6" />
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SocialShare;