Dropdown

<!-- Standard Dropdown -->
<div class="lyd-dropdown">
    <button class="lyd-dropdown-trigger" onclick="LYDDropdown.toggle('myDropdown')">
        <span>Options</span>
        <svg class="lyd-dropdown-icon">...</svg>
    </button>
    <div class="lyd-dropdown-menu" id="myDropdown">
        <a href="#" class="lyd-dropdown-item">Option 1</a>
        <a href="#" class="lyd-dropdown-item">Option 2</a>
        <div class="lyd-dropdown-divider"></div>
        <a href="#" class="lyd-dropdown-item">Option 3</a>
    </div>
</div>

import { useState, useRef, useEffect } from 'react';

interface DropdownProps {
  trigger: React.ReactNode;
  children: React.ReactNode;
  align?: 'left' | 'right';
}

export const Dropdown = ({ trigger, children, align = 'left' }: DropdownProps) => {
  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="lyd-dropdown" ref={dropdownRef}>
      <button 
        className={`lyd-dropdown-trigger ${isOpen ? 'active' : ''}`}
        onClick={() => setIsOpen(!isOpen)}
      >
        {trigger}
      </button>
      <div className={`lyd-dropdown-menu ${align} ${isOpen ? 'active' : ''}`}>
        {children}
      </div>
    </div>
  );
};