Nextjs Core Dropdowns

import React from 'react';

import CustomDropdown from 'components/CustomDropdown/CustomDropdown.js';
import Badge from 'components/Badge/Badge.js';

import usFlag from "assets/img/flags/US.png";
import deFlag from "assets/img/flags/DE.png";
import gbFlag from "assets/img/flags/GB.png";
import frFlag from "assets/img/flags/FR.png";
import roFlag from "assets/img/flags/RO.png";
import itFlag from "assets/img/flags/IT.png";
import esFlag from "assets/img/flags/ES.png";
import brFlag from "assets/img/flags/BR.png";
import jpFlag from "assets/img/flags/JP.png";

export default function Dropdown(){
  return (
    <div>
      <CustomDropdown
        buttonText="Regular"
        dropdownList={[
          "Action",
          "Another action",
          "Something else here",
          {divider: true},
          "Separated link",
          {divider: true},
          "One more separated link",
        ]}
      />
      <CustomDropdown
        buttonText={<span><img src={usFlag} alt="..."/>Flags</span>}
        dropdownList={[
          <span><img src={deFlag} alt="..."/> Deutsch</span>,
          <span><img src={gbFlag} alt="..."/> English(UK)</span>,
          <span><img src={frFlag} alt="..."/> Français</span>,
          <span><img src={roFlag} alt="..."/> Română</span>,
          <span><img src={itFlag} alt="..."/> Italiano</span>,
          {divider: true},
          <span><img src={esFlag} alt="..."/> Español <Badge color="gray">Soon</Badge></span>,
          <span><img src={brFlag} alt="..."/> Português <Badge color="gray">Soon</Badge></span>,
          <span><img src={jpFlag} alt="..."/> 日本語 <Badge color="gray">Soon</Badge></span>,
        ]}
      />
    </div>
  );
}

import React from 'react';

import CustomDropdown from 'components/CustomDropdown/CustomDropdown.js';

const buttonProps = { round: true, color: "info" };

export default function Dropdup(){
  return (
    <CustomDropdown
      dropup
      dropdownHeader="Dropdown header"
      buttonText="Dropup"
      buttonProps={buttonProps}
      dropdownList={[
        "Action",
        "Another action",
        "Something else here",
        {divider: true},
        "Separated link",
        {divider: true},
        "One more separated link",
      ]}
    />
  );
}

CustomDropdown.defaultProps = {
  caret: true,
  dropup: false,
  hoverColor: "primary",
};

CustomDropdown.propTypes = {
  hoverColor: PropTypes.oneOf([
    "dark",
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose",
  ]),
  buttonText: PropTypes.node,
  buttonIcon: PropTypes.object,
  dropdownList: PropTypes.array,
  buttonProps: PropTypes.object,
  dropup: PropTypes.bool,
  dropdownHeader: PropTypes.node,
  rtlActive: PropTypes.bool,
  caret: PropTypes.bool,
  dropPlacement: PropTypes.oneOf([
    "bottom",
    "top",
    "right",
    "left",
    "bottom-start",
    "bottom-end",
    "top-start",
    "top-end",
    "right-start",
    "right-end",
    "left-start",
    "left-end",
  ]),
  noLiPadding: PropTypes.bool,
  innerDropDown: PropTypes.bool,
  navDropdown: PropTypes.bool,
  // This is a function that returns the clicked menu item
  onClick: PropTypes.func,
};