@adeelasif/awesome-editor/src/components/Editor/Actions/Banner.jsx

A full fledge web based photo editor

import React from "react";
import "semantic-ui-css/semantic.min.css";
import { Menu } from "semantic-ui-react";

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
// Modal.setAppElement('#yourAppElement')

const Presets = [
  { name: "None", action: "none" },
  { name: "Pill", action: "pill" },
  { name: "Circle", action: "Circle" },
  { name: "Rectangle", action: "rectangle" },
  { name: "Ribbon", action: "ribbon" },
  { name: "Bookmark", action: "bookmark" },
  { name: "Header", action: "header" },
];

export const Banner = (props) => {
  const [activeItem, setActiveItem] = React.useState(null);

  const handleItemClick = (e, { name }) => {
    setActiveItem(name);
  };

  const applyFilter = (filter) => {
    // filter !== "original" &&
    //   global.Caman(`#${props.imageId}`, function () {
    //     this[filter]();
    //     this.render(function () {
    //       // alert("Done!");
    //     });
    //   });
  };

  // console.log("Editor -> activeItem", activeItem);

  React.useEffect(() => {
    // console.log("Filters -> global.caman", global.Caman);
  });

  return (
    <Menu vertical className="filter-menu">
      {Presets.map((filter, index) => (
        <Menu.Item
          key={index}
          name={filter.name}
          active={activeItem === filter.name}
          onClick={(e, { name }) => {
            setActiveItem(name);

            applyFilter(filter.action);
          }}
        >
          <p>{filter.name}</p>
        </Menu.Item>
      ))}
    </Menu>
  );
};

export default Banner;