DropdownComponent

// DropdownComponent.js
import React from 'react';

function DropdownComponent({ items, label }) {
  return (
    <div className="dropdown">
      <button className="btn btn-primary dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true">
        {label}
      </button>
      <div className="dropdown-menu show" style={{ position: 'absolute', inset: 'auto auto 0px 0px', margin: '0px', transform: 'translate(0px, -38px)' }}>
        {items.map((item, index) => (
          <a key={index} className="dropdown-item" href="#">
            {item.icon && <ion-icon name={item.icon} role="img" className="md hydrated" aria-label={item.icon}></ion-icon>}
            {item.label}
          </a>
        ))}
      </div>
    </div>
  );
}

export default DropdownComponent;

// YourMainComponent.js
import React from 'react';
import DropdownComponent from './DropdownComponent'; // Assuming this is the path to your DropdownComponent

function YourMainComponent() {
  // Sample dropdown items for demonstration
  const dropdownItems = [
    { label: 'Send', icon: 'arrow-redo-outline' },
    { label: 'Deposit', icon: 'card-outline' },
    { label: 'Cancel', icon: 'close-outline' },
  ];

  return (
    <div>
      <DropdownComponent items={dropdownItems} label="Dropdown Iconed" />
    </div>
  );
}

export default YourMainComponent;