FeedsWidget1.tsx

import { FC, useEffect } from "react"
import Quill from "quill";
import { KTIcon } from "../../../helpers";
import { Dropdown1 } from "../../content/dropdown/Dropdown1";

import "quill/dist/quill.snow.css";


const FeedsWidget1: FC = () => {
    useEffect(()=>{
        const editorId = "kt_forms_widget_1_editor";

      // init editor
      const options = {
        modules: {
          toolbar: {
            container: "#kt_forms_widget_1_editor_toolbar",
          },
        },
        theme: "snow",
      };

      // Init editor
      new Quill("#" + editorId, options);
    }, []);

    return <div className="card">
      
      <div className="card-body pb-0">
        
        <div className="d-flex align-items-center">
          
          <div className="d-flex align-items-center flex-grow-1">
            
            <div className="symbol symbol-45px me-5">
              <img src="/media/avatars/300-6.jpg" alt="" />
            </div>
            
  
            
            <div className="d-flex flex-column">
              <a href="#" className="text-gray-800 text-hover-primary fs-6 fw-bold"
                >Grace Green</a
              >
  
              <span className="text-gray-400 fw-semobold"
                >PHP, SQLite, Artisan CLI</span
              >
            </div>
            
          </div>
          
  
          
          <div className="my-0">
            <button
              type="button"
              className="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
              data-kt-menu-trigger="click"
              data-kt-menu-placement="bottom-end"
              data-kt-menu-flip="top-end"
            >
              <KTIcon iconName="category" className="fs-2" />
            </button>
            <Dropdown1></Dropdown1>
          </div>
          
        </div>
        
  
        
        <form id="kt_forms_widget_1_form" className="ql-quil ql-quil-plain pb-3">
          
          <div id="kt_forms_widget_1_editor" className="py-6"></div>
          
  
          <div className="separator"></div>
  
          
          <div
            id="kt_forms_widget_1_editor_toolbar"
            className="ql-toolbar d-flex flex-stack py-2"
          >
            <div className="me-2">
              <span className="ql-formats ql-size ms-0">
                <select className="ql-size w-75px"></select>
              </span>
  
              <span className="ql-formats">
                <button className="ql-bold"></button>
                <button className="ql-italic"></button>
                <button className="ql-underline"></button>
                <button className="ql-strike"></button>
                <button className="ql-image"></button>
                <button className="ql-link"></button>
                <button className="ql-clean"></button>
              </span>
            </div>
  
            <div className="me-n3">
              <span className="btn btn-icon btn-sm btn-active-color-primary">
                <i className="flaticon2-clip-symbol icon-ms"></i>
              </span>
  
              <span className="btn btn-icon btn-sm btn-active-color-primary">
                <i className="flaticon2-pin icon-ms"></i>
              </span>
            </div>
          </div>
          
        </form>
        
      </div>
      
    </div>
    ;
}

export { FeedsWidget1 }