glide-design-system/src/lib/components/scheduler/EventDescrption.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState, useContext } from "react";
import { Modal } from "../modal/Modal";
import { EventDetails } from "./Scheduler";

function EventDescrption({
  datas,
  closeDescrption,
  position,
  descriptionStyle,
  setUpdateData,
}) {
  const eventDetails = useContext(EventDetails);
  const [open, setOpen] = useState(true);

  const startDateString = datas.startDate;
  const endDateString = datas.endDate;
  const startDate = new Date(startDateString);
  const endDate = new Date(endDateString);
  const startHours = startDate.getHours();
  const startMinutes = startDate.getMinutes();
  const formattedStartTime = `${startHours
    .toString()
    .padStart(2, "0")}:${startMinutes.toString().padStart(2, "0")}`;
  const endHours = endDate.getHours();
  const endMinutes = endDate.getMinutes();
  const formattedEndTime = `${endHours.toString().padStart(2, "0")}:${endMinutes
    .toString()
    .padStart(2, "0")}`;

  return (
    <Modal
      style={{
        height: "auto",
        position: "absolute",
        width: "350px",
        ...descriptionStyle,
      }}
      open={open}
      onClose={closeDescrption}
    >
      <div style={{ marginBottom: "8px" }}>
        {eventDetails?.eventDescription ? eventDetails?.eventDescription : ""}
      </div>
    </Modal>
  );
}

export default EventDescrption;