// 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;
JavaScript
How To Use
// 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;
JavaScript