...

1 files changed, 62 insertions, 0 deletions

diff --git a/FrontEnd/src/components/menu/Menu.tsx b/FrontEnd/src/components/menu/Menu.tsx
new file mode 100644
index 00000000..e8099c76
--- /dev/null
+++ b/FrontEnd/src/components/menu/Menu.tsx
@@ -0,0 +1,62 @@
+import { CSSProperties } from "react";
+import classNames from "classnames";
+
+import { useC, Text, ThemeColor } from "../common";
+
+import "./Menu.css";
+import Icon from "../Icon";
+
+export type MenuItem =
+  | {
+      type: "divider";
+    }
+  | {
+      type: "button";
+      text: Text;
+      icon?: string;
+      color?: ThemeColor;
+      onClick: () => void;
+    };
+
+export type MenuItems = MenuItem[];
+
+export type MenuProps = {
+  items: MenuItems;
+  onItemClicked?: () => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export default function Menu({
+  items,
+  onItemClicked,
+  className,
+  style,
+}: MenuProps) {
+  const c = useC();
+
+  return (
+    <div className={classNames("cru-menu", className)} style={style}>
+      {items.map((item, index) => {
+        if (item.type === "divider") {
+          return <hr key={index} className="cru-menu-divider" />;
+        } else {
+          const { text, color, icon, onClick } = item;
+          return (
+            <button
+              key={index}
+              className={`cru-menu-item cru-clickable-${color ?? "primary"}`}
+              onClick={() => {
+                onClick();
+                onItemClicked?.();
+              }}
+            >
+              {icon != null && <Icon color={color} icon={icon} />}
+              {c(text)}
+            </button>
+          );
+        }
+      })}
+    </div>
+  );
+}