tabler/shared/ui/DropdownMenu.astro

---
import Icon from './Icon.astro';
import Avatar from './Avatar.astro';
import Flag from './Flag.astro';
import people from '@data/people.json';
import countries from '@data/countries.json';

interface Props {
	right?: boolean;
	show?: boolean;
	arrow?: boolean;
	dark?: boolean;
	class?: string;
	menu?: string[];
	check?: boolean;
	radio?: boolean;
	people?: boolean;
	flag?: boolean;
	type?: string;
	header?: boolean;
	icons?: boolean;
	badge?: boolean;
	active?: boolean;
	disabled?: boolean;
	separated?: boolean;
}

const {
	right,
	show,
	arrow,
	dark,
	class: className,
	menu,
	check,
	radio,
	people: showPeople,
	flag: showFlags,
	type,
	header,
	icons,
	badge,
	active,
	disabled,
	separated,
} = Astro.props;

const classes = [
	'dropdown-menu',
	right && 'dropdown-menu-end',
	show && 'dropdown-menu-demo',
	arrow && 'dropdown-menu-arrow',
	className,
]

const menuItems = menu;
const peopleItems = (people as { id: string; full_name: string }[]).slice(0, 5);
const countryItems = (countries as { name: string; flag: string }[]).slice(0, 5);
---

<div class:list={classes} data-bs-theme={dark ? 'dark' : undefined}>
	{
		menuItems ? (
			menuItems.map((item) =>
				item === '|' ? (
					<div class="dropdown-divider" />
				) : item.includes('h:') ? (
					<h3 class="dropdown-header">{item.split('h:').join('')}</h3>
				) : item.includes('a:') ? (
					<a href="#" class="dropdown-item active">{item.split('a:').join('')}</a>
				) : item.includes('d:') ? (
					<a href="#" class="dropdown-item text-danger">{item.split('d:').join('')}</a>
				) : (
					<a href="#" class="dropdown-item">{item}</a>
				)
			)
		) : check || radio ? (
			[1, 2, 3].map((i) => (
				<label class="dropdown-item"><input class="form-check-input m-0 me-2" type={radio ? 'radio' : 'checkbox'} /> Option {i}</label>
			))
		) : showPeople ? (
			peopleItems.map((person) => (
				<a href="#" class="dropdown-item"><Avatar personId={Number(person.id)} size="xs" /> {person.full_name}</a>
			))
		) : showFlags ? (
			countryItems.map((country) => (
				<a href="#" class="dropdown-item"><Flag flag={country.flag} size="xs" /> {country.name}</a>
			))
		) : type === 'text' ? null : (
			<>
				{header && <span class="dropdown-header">Dropdown header</span>}
				<a class="dropdown-item" href="#">
					{icons && <><Icon name="settings" class="dropdown-item-icon" />{' '}</>}
					Action
					{badge && <span class="badge bg-primary text-primary-fg ms-auto">12</span>}
				</a>
				<a class="dropdown-item" href="#">
					{icons && <><Icon name="edit" class="dropdown-item-icon" />{' '}</>}Another action
					{badge && <span class="badge bg-green ms-auto" />}
				</a>
				{active && (
					<a class="dropdown-item active" href="#">{icons && <><Icon name="activity" class="dropdown-item-icon" />{' '}</>}Active action</a>
				)}
				{disabled && (
					<a class="dropdown-item disabled" href="#">{icons && <><Icon name="user-x" class="dropdown-item-icon" />{' '}</>}Disabled action</a>
				)}
				{separated && (
					<>
						<div class="dropdown-divider" />
						<a class="dropdown-item" href="#">{icons && <><Icon name="plus" class="dropdown-item-icon" />{' '}</>}Separated link</a>
					</>
				)}
			</>
		)
	}
</div>