glide-design-system/src/App.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 { useState, useEffect } from "react";
import { Route, Routes } from "react-router-dom";
import { Snackbar } from "./lib/components/snackbar/Snackbar";
import { NavbarLayout } from "./lib/components/Navbar/NavbarLayout";
import { Text } from "./lib/components/text/Text";
import { Breadcrumbs } from "./lib/components/breadcrumbs/Breadcrumbs";
import { Tab } from "./lib/components/tabs/Tab";
import { Menu } from "./lib/components/menu/Menu";
import { Button } from "./lib/components/button/Button";
import { Pagination } from "./lib/components/pagination/Pagination";
import { Card } from "./lib/components/card/Card";
import { MenuItem } from "./lib/components/menuItem/MenuItem";
import { TextField } from "./lib/components/textField/TextField";
import { ProgressCircle } from "./lib/components/loader/ProgressCircle";
import { Avatar } from "./lib/components/avatar/Avatar";
import { Select } from "./lib/components/select/Select";
import { Modal } from "./lib/components/modal/Modal";
import { Table } from "./lib/components/table/Table";
import Drawer from "./lib/components/drawer/Drawer";
import { Chip } from "./lib/components/chip/Chip";
import { ModalTitle } from "./lib/components/modal/ModalTitle";
import { ModalContent } from "./lib/components/modal/ModalContent";
import { ModalActions } from "./lib/components/modal/ModalActions";
import RadioButton from "./lib/components/radioButton/RadioButton";
import { Checkbox } from "./lib/components/checkbox/Checkbox";
import Divider from "./lib/components/Divider/Divider";
import Badge from "./lib/components/badge/Badge";
import Accordion from "./lib/components/accordion/Accrodian";
import IconButton from "./lib/components/iconButton/IconButton";
import homeIcon from "./lib/assests/homeIcon.png";
import Tooltip from "./lib/components/tooltip/Tooltip";
import Stepper from "./lib/components/stepper/Stepper";
import Step from "./lib/components/stepper/Step";
import Skeleton from "./lib/components/skeleton/Skeleton";
import PhoneNumberInput from "./lib/components/phoneNumber/PhoneNumberInput";
import Scheduler from "./lib/components/scheduler/Scheduler";
import CheckboxGroup from "./lib/components/checkbox-group/CheckboxGroup";
import MultivalueInput from "./lib/components/multivalue-input/MultivalueInput";
import MultiSelect from "./lib/components/multi-select/MultiSelect";
import Address from "./lib/components/address/Address";
import Email from "./lib/components/email/Email";
import Number from "./lib/components/number/Number";
import FullName from "./lib/components/full-name/FullName";
import DatePicker from "./lib/components/date-picker/DatePicker";
import TimePicker from "./lib/components/time-picker/TimePicker";
import Backdrop from "./lib/components/backdrop/Backdrop";
import SpeedDialButton from "./lib/components/speedDialButton/SpeedDialButton";
import Slider from "./lib/components/slider/Slider";
import WeekviewScheduler from "./lib/components/weekScheduler/WeekviewScheduler";
import WeekCalender from "./lib/components/weekCalender/WeekCalender";

function App() {
  const valuesq = ["checkbox2", "checkbox4", "checkbox7"];
  const [index, setIndex] = useState(1);
  const [openDrawer, setOpenDrawer] = useState(false);
  const [openModal, setOpenModal] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const [value, setValue] = useState(null);
  const [position, setPosition] = useState(null);
  const [page, setPage] = useState(0);
  const open = Boolean(anchorEl);
  const [vActiveIndex, setVActiveIndex] = useState(0);
  const [hActiveIndex, setHActiveIndex] = useState(1);
  const [stepOne, setStepOne] = useState(false);
  const [stepTwo, setStepTwo] = useState(false);
  const [stepThree, setStepThree] = useState(false);
  const [phonNumber, setPhoneNumber] = useState("");
  const [updateData, setUpdateData] = useState();
  const [startTime, setStartTime] = useState();
  const [endTime, setEndTime] = useState();
  const [formOpen, setFormOpen] = useState(false);
  const [currentDate, setCurrentDate] = useState(new Date());
  const [formattedDate, setFormattedDate] = useState("");
  const [eventDescription, setEventDescrption] = useState(false);
  const [countryCode, setCountryCode] = useState();
  const [checkBoxValue, setCheckboxValue] = useState(valuesq);
  const [add, setAdd] = useState();
  const [openBackdrop, setOpenBackdrop] = useState(false);
  const [sliderValue, setSliderValue] = useState(0);
  const [weekDays, setWeekDays] = useState();
  const [days, setDay] = useState();

  const onTabChange = (idx) => {
    setIndex(idx);
  };
  const [showSnackbar, setShowSnackbar] = useState(false);

  const handleShowSnackbar = () => {
    setShowSnackbar(true);
  };

  const handleCloseSnackbar = () => {
    setShowSnackbar(false);
  };

  const [sortItem, setSortItem] = useState(null);

  const [sortOrder, setSortOrder] = useState("asc");

  const tableData = [
    {
      id: "550e8400-e29b-41d4",
      name: "John Doe",

      description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris`,
      status: "active",
      onsetDate: "2023-07-21T09:39:29.049446Z",
    },
    {
      id: "680e8400-e29b-41d4",
      name: "Jane Smith",
      description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris`,
      status: "inactive",
      onsetDate: "2023-07-21T09:39:29.049446Z",
    },
    {
      id: "580e8400-e29b-41d4",
      name: "Michael Johnson",
      description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris`,
      status: "active",
      onsetDate: "2023-07-21T09:39:29.049446Z",
    },
    {
      id: "390e8400-e29b-41d4",
      name: "Emily Brown",
      description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris`,
      status: "active",
      onsetDate: "2023-07-21T09:39:29.049446Z",
    },
    {
      id: "750e8400-e29b-41d4",
      name: "William Wilson",
      description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris`,
      status: "inactive",
      onsetDate: "2023-07-21T09:39:29.049446Z",
    },
  ];
  const options = [
    { value: "checkBox1", label: "checkBox1" },
    { value: "checkBox2", label: "CheckBox2" },
    { value: "checkBox3", label: "CheckBox3" },
    { value: "checkBox4", label: "CheckBox4" },
    { value: "checkBox5", label: "CheckBox5" },
    { value: "checkBox6", label: "CheckBox6" },
    { value: "checkBox7", label: "CheckBox7" },
    { value: "java", label: "Java" },
  ];

  const tablecolumns = [
    {
      label: "id",
      fieldName: "id",
      sort: true,
      style: {
        textAlign: "left",
      },
      type: "link",
    },
    {
      label: "name",
      fieldName: "name",
      sort: true,
      style: {
        textAlign: "left",
      },
      customBodyRenderer: (rowItem, index) => {
        return (
          <Text
            style={{
              display: "flex",
              justifyContent: "left",
              alignItems: "center",
            }}
          >
            <Avatar label={rowItem?.name?.charAt(0)} />
            {rowItem?.name}
          </Text>
        );
      },
    },
    {
      label: "description",
      fieldName: "description",
      sort: true,
      style: {
        textAlign: "left",
      },
      customBodyRenderer: (rowItem) => {
        return (
          <div>
            <Tooltip
              title={
                <div
                  style={{
                    maxWidth: "220px",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {rowItem.description}
                </div>
              }
            >
              <p style={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>
                {rowItem.description}
              </p>
            </Tooltip>
          </div>
        );
      },
    },
    {
      label: "status",
      sort: true,
      style: {
        textAlign: "left",
      },
      type: "chip",
      chipOptions: [
        {
          value: "active",
          backgroundColor: "#9dcb9f",
        },
        { value: "inactive", backgroundColor: "#ff4e4e" },
      ],
    },
    {
      label: "onsetDate",
      fieldName: "onsetDate",
      sort: true,
      style: {
        width: "20%",
        textAlign: "left",
      },
    },

    {
      label: "Actions",
      style: {
        // width: '50%',
        textAlign: "left",
      },
      element: <span className="material-symbols-outlined">more_vert</span>,
    },
  ];

  const tablecolumns2 = [
    {
      label: "id",
      fieldName: "id",
      sort: true,
      style: {
        textAlign: "left",
      },
      type: "link",
    },
    {
      label: "name",
      fieldName: "name",
      sort: true,
      style: {
        textAlign: "left",
      },
      customBodyRenderer: (rowItem) => {
        return (
          <Text
            style={{
              display: "flex",
              justifyContent: "left",
              alignItems: "center",
            }}
          >
            <Avatar label={rowItem?.name?.charAt(0)} />
            {rowItem?.name}
          </Text>
        );
      },
    },
    {
      label: "description",
      fieldName: "description",
      sort: true,
      style: {
        textAlign: "left",
      },
      customBodyRenderer: (rowItem) => {
        return (
          <div>
            <Tooltip
              title={
                <div
                  style={{
                    maxWidth: "220px",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {rowItem.description}
                </div>
              }
            >
              <p style={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>
                {rowItem.description}
              </p>
            </Tooltip>
          </div>
        );
      },
    },
  ];

  const eventSubmit = () => {
    setFormOpen(false);
  };

  const localEvents = [
    {
      eventName: "Meeting with employes",
      meetingType: "Internal",
      startDate: new Date("June 12, 2024 11:13"),
      endDate: new Date("June 12, 2024 11:45"),
      descrption: "Meeting with employees",
      leave: "Sick Leave",
      backgroundColor: "#0a5b99",
      color: "white",
    },
    {
      eventName: "Meeting with employes",
      meetingType: "Internal",
      startDate: new Date("January 31, 2024 12:13"),
      endDate: new Date("January 31, 2024 13:45"),
      descrption: "Meeting with employees",
      leave: "Sick Leave",
      backgroundColor: "#0a5b99",
      color: "white",
    },
    {
      eventName: "Meeting with employes",
      meetingType: "Internal",
      startDate: new Date("Febraury 16, 2024 12:13"),
      endDate: new Date("Febraury 16, 2024 13:45"),
      descrption: "Meeting with employees",
      leave: "Sick Leave",
      backgroundColor: "#0a5b99",
      color: "white",
    },
  ];

  const onEventDelete = () => {};

  const customEvnetForm = (
    <div>
      <h4 style={{ marginBottom: "10px" }}>Create Events</h4>
      <div>Event Name </div>
      <ModalContent>
        <TextField value={updateData?.eventName ? updateData?.eventName : ""} />
        <div>Leave Type </div>
        <Select>
          <MenuItem value="Sick leave">Sick leave</MenuItem>
          <MenuItem value="Vactaion">Vactaion</MenuItem>
          <MenuItem value="Other">Other</MenuItem>
        </Select>
        <div style={{ marginTop: "10px" }}>
          <div>Meeting</div>
          <RadioButton
            name="meeting"
            value={updateData?.meetingType ? updateData?.meetingType : ""}
            onChange={(e) => {}}
          >
            <label value="Internal" id="meeting">
              Internal
            </label>
            <label value="External" id="external">
              External
            </label>
            <label value="other" id="other">
              Other
            </label>
          </RadioButton>
          <Button
            sx={{
              color: "#5A5A5A",
              width: "120px",
              height: "38px",
              marginRight: "15px",
              backgroundColor: "#ededed",
              ":hover": {
                backgroundColor: "#d3d3d3 !important",
              },
            }}
            id="submitBtn"
          >
            Cancel
          </Button>
          <Button
            id="cancelBtn"
            sx={{
              color: "white",
              backgroundColor: "#0a5b99",
              ":hover": {
                backgroundColor: "#1b80c9 !important",
              },
              width: "120px",
              height: "38px",
            }}
            onClick={eventSubmit}
          >
            Submit
          </Button>
        </div>
      </ModalContent>
    </div>
  );

  const customEventDescription = (
    <div>
      <div
        style={{
          backgroundColor: "#DDD",
          color: "#555555",
          display: "flex",
        }}
      >
        <h5 style={{ color: "white" }}>{updateData?.eventName}</h5>
        <div style={{ color: "#55555" }}>
          <div
            style={{ marginRight: "5px" }}
            onClick={() => {
              setFormOpen(true);
            }}
          >
            <span className="material-symbols-outlined">edit</span>
          </div>
          <div style={{ cursor: "pointer" }} onClick={onEventDelete}>
            <span className="material-symbols-outlined">delete</span>
          </div>
        </div>
      </div>

      <div>Event Name:{updateData?.eventName}</div>
      <div>Meeting Type:{updateData?.meetingType}</div>
      <div>Event Description:{updateData?.descrption}</div>
    </div>
  );

  const customDatePicker = (
    <div style={{ display: "flex" }}>
      <span
        className={"material-symbols-outlined"}
        onClick={() => handleDateChange("prev")}
      >
        chevron_left
      </span>
      <div>{formattedDate}</div>
      <span
        className={"material-symbols-outlined"}
        onClick={() => handleDateChange("next")}
      >
        chevron_right
      </span>
    </div>
  );

  const sortHandler = (sortOrder, sortItem) => {
    setSortItem(sortItem);
    setSortOrder(sortOrder);
  };

  const linkHandler = (e, rowItem) => {
    //sort Handler function
  };

  const actionHandler = (e, value) => {
    //sort Handler function
    // setDemo(true)

    setAnchorEl(e);
  };

  const tableRowStyles = {};

  const tableHeaderStyle = {};

  // these are the making for cutom date pickings elements
  const getWeekNumber = (date) => {
    const target = new Date(date.valueOf());
    const dayNr = (date.getDay() + 6) % 7;
    target.setDate(target.getDate() - dayNr + 3);
    const firstThursday = target.valueOf();
    target.setMonth(0, 1);
    if (target.getDay() !== 4) {
      target.setMonth(0, 1 + ((4 - target.getDay() + 7) % 7));
    }
    return 1 + Math.ceil((firstThursday - target) / 604800000);
  };

  // Helper function to get the month name
  const getMonthName = (month) => {
    const months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    return months[month];
  };
  const updateFormattedDate = () => {
    const weekNumber = getWeekNumber(currentDate);
    const monthName = getMonthName(currentDate.getMonth());
    const day = currentDate.getDate();
    const year = currentDate.getFullYear();

    const formattedDateStr = `Week ${weekNumber} - ${monthName} ${day} ${year}`;
    setFormattedDate(formattedDateStr);
  };

  const handleDateChange = (direction) => {
    const newDate = new Date(currentDate);
    direction === "prev"
      ? newDate.setDate(currentDate.getDate() - 1)
      : newDate.setDate(currentDate.getDate() + 1);
    setCurrentDate(newDate);
  };
  const option = [
    {
      label: "checkbox1",
      value: "checkbox1",
    },
    {
      label: "Checkbox2",
      value: "checkbox2",
    },
    {
      label: "Checkbox3",
      value: "checkbox3",
    },
    {
      label: "Checkbox4",
      value: "checkbox4",
    },
    {
      label: "Checkbox5",
      value: "checkbox5",
    },
    {
      label: "Checkbox6",
      value: "checkbox6",
    },
    {
      label: "Checkbox7",
      value: "checkbox7",
    },
  ];

  const multiSelectValues = ["checkBox1", "checkBox2", "checkBox3"];

  useEffect(() => {
    updateFormattedDate();
  }, [currentDate]);

  const ButtonIcon = (
    <span className="material-symbols-outlined">arrow_forward</span>
  );

  const groupCheckBoxHandler = (value) => {
    setCheckboxValue(value);
  };
  const multiSelectHandler = (value) => {
    // console.log(value, "valuess");
  };

  const emailHandler = (value) => {
    // console.log(value, "mail");
  };

  const numberHandler = (value) => {
    if (value !== 0) {
      // console.log(value,"number")
    }
  };

  const fullNameHandler = (value) => {
    // console.log(value, "names");
  };

  const addressHandler = (value) => {
    setAdd(value);
  };
  const [fullAdresses, setFullAddress] = useState(null);

  const fullAdress = {
    addressLine1: "Line11",
    addressLine2: "Line82",
    city: "city77",
    postalCode: "641032",
    state: "tamilnadu",
  };
  const labels = {
    addressLine1: "Line1",
    addressLine2: "Line2",
    city: "City",
    postalCode: "Postal Code",
    state: "State",
  };
  const placeHolders = {
    addressLine1Placeholder: "Line 1",
    addressLine2Placeholder: "Line 2",
    cityPlaceholder: "City",
    statePlaceholder: "State",
    postalCodePlaceholder: "Postal code",
  };

  const dateChangeHander = (value) => {
    // console.log(value);
  };

  const timeChangeHandler = (value) => {
    // console.log(value,"valuess");
  };

  return (
    <div>
      <Drawer
        onClose={() => setOpenDrawer(false)}
        open={openDrawer}
        position={position}
      ></Drawer>
      <NavbarLayout></NavbarLayout>
      <div style={{ padding: "10px" }}>
        <Text type="h2">Breadcrumbs</Text>

        <div style={{ margin: 20 }}>
          <Routes>
            <Route
              path="/"
              element={
                <Breadcrumbs
                  separator=">>"
                  style={
                    {
                      /* your styles here */
                    }
                  }
                >
                  <a href="/">Home</a>
                  <a href="/profile">Profile</a>
                </Breadcrumbs>
              }
            />
          </Routes>
        </div>
        <div style={{ margin: 20 }}>
          <Breadcrumbs separator=">>">
            <a href="/">Home</a>
            <a href="/ds">Profile</a>
          </Breadcrumbs>
        </div>

        <Text type="h2">Default Tab</Text>

        <div style={{ margin: 20 }}>
          <Tab
            onTabChange={onTabChange}
            activeIndex={index}
            // indicatorStyle="bottomLine"
            // disabled
          >
            <div
              label={"All (200)"}
              //icon={<span class="material-symbols-outlined"> home</span>}
            ></div>
            <div label={"Active (155)"}></div>
            <div label={"Inactive (45)"}></div>
          </Tab>
        </div>
        <Text id="h2" type="h2">
          Bottom Line Tab
        </Text>

        <div style={{ margin: 20 }}>
          <Tab
            onTabChange={onTabChange}
            activeIndex={index}
            indicatorStyle="bottomLine"
            showIndicator
            // disabled
          >
            <div
              label={"All (200)"}
              //icon={<span class="material-symbols-outlined"> home</span>}
            ></div>
            <div label={"Active (155)"}></div>
            <div label={"Inactive (45)"}></div>
          </Tab>
        </div>
        <Text type="h2">Disabled Tab</Text>
        <div style={{ margin: 20 }}>
          <Tab onTabChange={onTabChange} activeIndex={index} disabled>
            <div label={"All (200)"}></div>
            <div label={"Active (155)"}></div>
            <div label={"Inactive (45)"}></div>
          </Tab>
        </div>

        <Text type="h2">Drawer</Text>

        <div
          style={{
            margin: 20,
            flexDirection: "row",
            justifyContent: "space-between",
            flexWrap: "wrap",
            display: "flex",
          }}
        >
          <Button
            color="primary"
            variant="contained"
            icon={ButtonIcon}
            style={{}}
            iconPosition={"start"}
            onClick={() => {
              setOpenDrawer(!openDrawer);
              setPosition("top");
            }}
          >
            Top Drawer
          </Button>
          <Button
            color="primary"
            variant="contained"
            // loading
            // disabled
            style={{}}
            iconPosition={"start"}
            onClick={() => {
              setOpenDrawer(!openDrawer);
              setPosition("right");
            }}
          >
            Right Drawer
          </Button>
          <Button
            color="primary"
            variant="contained"
            // loading
            // disabled
            style={{}}
            iconPosition={"start"}
            onClick={() => {
              setOpenDrawer(!openDrawer);
              setPosition("bottom");
            }}
          >
            Bottom Drawer
          </Button>
        </div>
        <Text type="h2">Menu</Text>
        <div style={{ margin: 20 }}>
          <Button
            color="primary"
            variant="contained"
            // loading
            // disabled
            style={{}}
            iconPosition={"start"}
            onClick={(e) => setAnchorEl(e.currentTarget)}
          >
            Open Menu
          </Button>
        </div>

        <Menu
          onClose={() => setAnchorEl(null)}
          open={open}
          anchorEl={anchorEl}
          position={"top"}
        >
          <MenuItem
            icon={
              <span
                style={{ marginLeft: "10px" }}
                className="material-symbols-outlined"
              >
                home
              </span>
            }
            iconPosition="end"
          >
            1st
          </MenuItem>
          <MenuItem>2nd</MenuItem>
        </Menu>

        <Text type="h2">Buttons</Text>
        <div
          style={{
            margin: 20,
            flexDirection: "row",
            justifyContent: "space-between",
            flexWrap: "wrap",
            display: "flex",
          }}
        >
          <Button
            id="primary-btn"
            color="primary"
            variant="contained"
            style={{}}
            onClick={(e) => setValue("")}
            iconPosition={"start"}
          >
            contained
          </Button>
          <Button
            type="submit"
            color="secondary"
            variant="contained"
            style={{}}
            onClick={(e) => alert("clicked")}
            iconPosition={"start"}
          >
            contained S
          </Button>
          <Button
            type="submit"
            color="secondary"
            variant="outlined"
            style={{}}
            onClick={(e) => alert("clicked")}
            iconPosition={"start"}
          >
            Outlined
          </Button>
          <Button
            type="submit"
            color="primary"
            // variant="text"
            style={{}}
            onClick={(e) => alert("clicked")}
            iconPosition={"start"}
          >
            add button
          </Button>
          <Button
            type="submit"
            color="primary"
            variant="contained"
            loading
            style={{}}
            onClick={(e) => alert("clicked")}
            iconPosition={"start"}
          >
            Button
          </Button>

          <Button
            color="primary"
            variant="contained"
            disabled
            style={{}}
            onClick={(e) => alert("clicked")}
            iconPosition={"start"}
          >
            Disabled
          </Button>
        </div>
        <Text type="h2">Modal</Text>
        <div style={{ margin: 20 }}>
          <Button
            color="primary"
            // variant="contanied"
            // loading
            // disabled
            onClick={() => setOpenModal(true)}
            iconPosition={"start"}
          >
            open Modals
          </Button>
        </div>
        <Text type="h2">Snackbar</Text>
        <div style={{ margin: 20 }}>
          <Button
            color="primary"
            variant="contained"
            //loading
            // disabled
            style={{}}
            iconPosition={"start"}
            onClick={handleShowSnackbar}
          >
            Snackbars
          </Button>

          <Snackbar
            open={showSnackbar}
            message="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud "
            type="success"
            // autoHideDuration={5000}
            onClose={handleCloseSnackbar}
          />
        </div>
        <Text type="h2">ProgressCircle</Text>
        <div style={{ margin: 35, display: "flex" }}>
          <ProgressCircle
            style={{ marginRight: 10 }}
            size="small"
            color="#DD6636"
          />
          <ProgressCircle
            style={{ marginRight: 10 }}
            color="rgb(2, 167, 240)"
          />
          <ProgressCircle size="medium" color="rgba(76, 175, 80, 0.99)" />
        </div>
        <Text type="h2">Textfield</Text>
        <div style={{ margin: 20 }}>
          <TextField
            id="textfield"
            textFieldStyle={{ color: "red" }}
            style={{ marginTop: "30px" }}
            iconPosition="end"
            icon={
              <span
                style={{ marginLeft: "10px" }}
                className="material-symbols-outlined"
              >
                home
              </span>
            }
            // disabled
            // size="small"
            placeholder="search by names"
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
        </div>

        <Modal open={openModal} onClose={() => setOpenModal(false)}>
          <ModalTitle>
            <Text type="h2">Modal</Text>
          </ModalTitle>
          <ModalContent>content</ModalContent>
          <ModalActions>
            <Button
              color="secondary"
              // variant="contanied"
              // loading
              // disabled
              // onClick={() => setOpenModal(true)}
              iconPosition={"start"}
              style={{ marginRight: "20px" }}
            >
              cancel
            </Button>
            <Button
              color="primary"
              // variant="contanied"
              // loading
              // disabled
              // onClick={() => setOpenModal(true)}
              iconPosition={"start"}
            >
              confirm
            </Button>
          </ModalActions>
        </Modal>

        <Text type="h2">Select</Text>
        <div style={{ margin: 20 }}>
          <Select
            style={{}}
            onChange={(e) => console.log(e)}
            value="select2"
            disabled
          >
            <MenuItem value="select">label</MenuItem>
            <MenuItem value="select2">select</MenuItem>
          </Select>
        </div>
        <Text type="h2">Avatar</Text>
        <div style={{ margin: 20 }}>
          <Avatar
            style={{
              backgroundColor: "red",
            }}
            onClick={(e) => setAnchorEl(e.currentTarget)}
            label="b"
            id="breezeware"
            name="breezeware"
          />
        </div>
        <Text type="h2">Text</Text>
        <div style={{ margin: 20 }}>
          <Text style={{ marginBottom: 10 }} type="h1">
            Header
          </Text>
          <Text style={{ marginBottom: 10 }} type="h2">
            Subtitle
          </Text>
          <Text>Normal text</Text>
        </div>

        <Text type="h2">Chip</Text>
        <div style={{ margin: 20 }}>
          <Chip style={{ margin: 5 }} type="success">
            Success
          </Chip>
          <Chip style={{ margin: 5 }} type="warning">
            Warning
          </Chip>
          <Chip style={{ margin: 5 }} type="info">
            Info
          </Chip>
          <Chip style={{ margin: 5 }} type="error">
            Error
          </Chip>
          <Chip style={{ margin: 5 }} type="disable">
            Disable
          </Chip>
        </div>
        <Text type="h2">Card</Text>
        <div style={{ margin: 10 }}>
          <Card>
            <Text style={{ marginBottom: 10 }} type="h1">
              Card Title
            </Text>
            <Text>This is the content of the card.</Text>
          </Card>
        </div>
        <Text type="h2">Table</Text>
        <div style={{ margin: 20 }}>
          <Table
            columns={tablecolumns}
            data={tableData}
            sortHandler={sortHandler}
            sortItem={sortItem}
            sortOrder={sortOrder}
            tableRowStyles={tableRowStyles}
            tableHeaderStyle={tableHeaderStyle}
            linkHandler={linkHandler}
            actionHandler={actionHandler}
            setAnchorEl={setAnchorEl}
            loading
            progressCircleStyle={{ color: "#0a5b99" }}
          />
        </div>
        <div style={{ margin: 20 }}>
          <Table
            columns={tablecolumns}
            data={tableData}
            sortHandler={sortHandler}
            sortItem={sortItem}
            sortOrder={sortOrder}
            tableRowStyles={tableRowStyles}
            tableHeaderStyle={tableHeaderStyle}
            linkHandler={linkHandler}
            actionHandler={actionHandler}
            setAnchorEl={setAnchorEl}
            message="No data found"
          />
        </div>
        <div style={{ margin: 20 }}>
          <Table
            // rowKey={'lattitude'}
            columns={tablecolumns}
            data={tableData}
            sortHandler={sortHandler}
            sortItem={sortItem}
            sortOrder={sortOrder}
            tableRowStyles={tableRowStyles}
            tableHeaderStyle={tableHeaderStyle}
            linkHandler={linkHandler}
            actionHandler={actionHandler}
            setAnchorEl={setAnchorEl}
          />
        </div>
        <Text type="h2">Pagination</Text>
        <div style={{ margin: 20, display: "flex", alignSelf: "end" }}>
          <Pagination
            count={10000}
            page={page}
            onChange={(value) => {
              console.log("value: " + value);
              setPage(value);
            }}
          />
        </div>
        <Text type="h2">Checkbox</Text>
        <div
          style={{
            margin: 20,
            display: "flex",
            alignSelf: "end",
            justifyContent: "space-between",
            flexWrap: "wrap",
          }}
        >
          <Checkbox label="checked+disabled" checked disabled />
          <Checkbox label="checked" checked />
          <Checkbox required label="none" />
          <Checkbox label="none" />
          <Checkbox label="disabled" disabled />
        </div>
        <Text type="h2">Divider</Text>
        <div
          style={{
            margin: 20,
            display: "flex",
            alignSelf: "end",
            justifyContent: "space-between",
          }}
        >
          <Divider
            style={
              {
                /* styles to be here */
              }
            }
          />
        </div>
        <Text type="h2">Badge</Text>
        <div
          style={{
            margin: 20,
            display: "flex",
            alignSelf: "end",
            justifyContent: "space-between",
          }}
        >
          <Badge
            label="44"
            badgeStyle={
              {
                /* your styles here */
              }
            }
            style={
              {
                /* your styles here */
              }
            }
          >
            <span className="material-symbols-outlined">home</span>
          </Badge>
          <Badge>
            <span className="material-symbols-outlined">mail</span>
          </Badge>
        </div>
      </div>

      <div style={{ marginLeft: "20px" }}>
        <Text style={{ marginBottom: "10px" }} type="h2">
          Accordion
        </Text>
        <Accordion
          title="Section1"
          style={{ width: "50%" }}
          titleStyle={{ fontSize: "14px" }}
        >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris
          </p>
        </Accordion>
      </div>
      <div style={{ marginLeft: "20px" }}>
        <Text
          style={{
            marginLeft: "10px",
            marginTop: "30px",
            marginBottom: "10px",
          }}
          type="h2"
        >
          Phone number
        </Text>
        <PhoneNumberInput
          required
          onChange={(e) => {
            setPhoneNumber(e.target.value);
          }}
          value={phonNumber}
          setCountryCode={setCountryCode}
        />
      </div>
      <div style={{ marginLeft: "20px" }}>
        <Text
          style={{
            marginLeft: "10px",
            marginTop: "30px",
            marginBottom: "10px",
          }}
          type="h2"
        >
          Phone number
        </Text>
        <PhoneNumberInput
          required
          onChange={(e) => {
            setPhoneNumber(e.target.value);
          }}
          value={""}
          setCountryCode={setCountryCode}
        />
      </div>
      <div
        style={{ marginLeft: "20px", marginTop: "30px", marginBottom: "30px" }}
      >
        <Text type="h2" style={{ marginBottom: "10px" }}>
          Icon Button
        </Text>
        <div style={{ display: "flex", flexDirection: "row" }}>
          <div style={{ marginRight: "60px" }}>
            <Text type="h3">Large</Text>
            <IconButton src={homeIcon} variant="large" />
          </div>
          <div style={{ marginRight: "60px" }}>
            <Text type="h3">Medium</Text>
            <IconButton src={homeIcon} variant="medium" />
          </div>
          <div style={{ marginRight: "60px" }}>
            <Text type="h3">Small</Text>
            <IconButton src={homeIcon} variant="small" />
          </div>
          <div style={{ marginRight: "60px" }}>
            <Text type="h3">Customise</Text>
            <IconButton
              src={homeIcon}
              style={{
                width: "43px",
                height: "43px",
                backgroundColor: "white",
                border: "1px solid #eee",
                borderRadius: "10px",
              }}
              width="25px"
              height="25px"
            />
          </div>
        </div>
      </div>
      <div style={{ margin: "20px" }}>
        <Text style={{ marginBottom: "10px" }} type="h2">
          Tooltip Standard
        </Text>
        <div>
          <Tooltip
            title={
              <div
                style={{
                  maxWidth: "320px",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {
                  "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris"
                }
              </div>
            }
          >
            <p clasName={"llala"}>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
              doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enimad minim veniam, quis nostrud exercitation ullamco laboris
            </p>
          </Tooltip>
        </div>
      </div>

      <div>
        <Text
          style={{
            marginLeft: "20px",
            marginTop: "10px",
            marginBottom: "10px",
          }}
          type="h2"
        >
          Radio Button
        </Text>

        <RadioButton name="language" onChange={(e) => {}} disabled>
          <label value="standard" id="html">
            Standard
          </label>
          <label value="css" id="css">
            CSS
          </label>
          <label value="javascript" id="javascript">
            JS
          </label>
        </RadioButton>
        <RadioButton name="language1">
          <label value="html" id="html" disabled>
            disabled
          </label>
          <label value="css" id="css">
            CSS
          </label>
          <label value="javascript" id="javascript">
            JS
          </label>
        </RadioButton>
        <div>
          <RadioButton name="language2">
            <label value="checked" id="checked">
              Checked
            </label>
            <label value="css" id="css">
              CSS
            </label>
            <label value="javascript" id="jss">
              JS
            </label>
          </RadioButton>

          <RadioButton name="language3" value={"Checked+disabled"} disabled>
            <label value="Checked+disabled" id="disabled">
              Checked+disabled
            </label>
            <label value="css" id="css">
              CSS
            </label>
            <label value="javascript" id="js">
              JS
            </label>
          </RadioButton>
        </div>
      </div>
      <div
        style={{
          margin: 20,
        }}
      >
        <Text type="h2">Stepper</Text>
        <Stepper activeIndex={vActiveIndex} style={{ marginTop: "10px" }}>
          <Step
            stepIconLabel="1"
            label="stepper 1"
            onClick={() => setVActiveIndex(0)}
            completed={stepOne}
          />
          <Step
            stepIconLabel="2"
            label="stepper 2"
            onClick={() => setVActiveIndex(1)}
            completed={stepTwo}
          />
          <Step
            stepIconLabel="3"
            label="stepper 3"
            onClick={() => setVActiveIndex(2)}
            completed={stepThree}
          />
        </Stepper>
        <Button
          color="primary"
          // variant="text"
          style={{}}
          onClick={(e) => {
            setVActiveIndex(vActiveIndex + 1);
            if (vActiveIndex === 0) setStepOne(true);
            if (vActiveIndex === 1) setStepTwo(true);
            if (vActiveIndex === 2) setStepThree(true);
          }}
          iconPosition={"start"}
        >
          next
        </Button>
        <Button
          color="primary"
          variant="text"
          onClick={(e) => setVActiveIndex(vActiveIndex - 1)}
          iconPosition={"start"}
        >
          back
        </Button>
        <Stepper
          activeIndex={hActiveIndex}
          flexDirection="row"
          style={{ marginTop: "10px" }}
        >
          <Step
            stepIconLabel="1"
            label="row 1"
            onClick={() => setHActiveIndex(0)}
          />
          <Step
            stepIconLabel="2"
            label="row 2"
            onClick={() => setHActiveIndex(1)}
          />
          <Step
            stepIconLabel="3"
            label="row 3"
            onClick={() => setHActiveIndex(2)}
          />
        </Stepper>
      </div>
      <div
        style={{
          margin: 20,
        }}
      >
        <Text type="h2">Skeleton</Text>
        <div style={{ display: "flex", marginTop: "10px" }}>
          <Skeleton
            variant="circle"
            width={40}
            height={40}
            style={{ marginBottom: "4px" }}
          />
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-around",
              marginLeft: "10px",
            }}
          >
            <Skeleton height={10} />
            <Skeleton height={10} width={100} />
          </div>
        </div>
        <Skeleton width={261} style={{ borderRadius: "5px" }} />
        <TextField label={"Name"} required />
      </div>
      <div style={{ margin: "0px" }}>
        <Scheduler
          events={localEvents}
          customEventForm={customEvnetForm}
          setStartTime={setStartTime}
          setEndTime={setEndTime}
          customEventDescription={customEventDescription}
          style
          showWeek={false}
          formOpen={formOpen}
          setFormOpen={setFormOpen}
          customDatePicker={customDatePicker}
          setUpdateData={setUpdateData}
          choosenDate={currentDate}
          setEventDescrption={setEventDescrption}
          eventDescription={eventDescription}
        />
      </div>
      <div style={{ margin: "20px" }}>
        <CheckboxGroup
          options={option}
          label="Group checkbox"
          required
          value={checkBoxValue}
          name="Group"
        />
      </div>
      <div style={{ margin: "20px", paddingBottom: "20px" }}>
        <MultiSelect
          placeholder={"placeholder"}
          options={options}
          value={multiSelectValues}
          onChange={multiSelectHandler}
          // onChange={(e)=>console.log(e,)}
        />
      </div>
      <div style={{ margin: "20px" }}>
        <Checkbox label="checked" checked />
      </div>
      <div style={{ margin: "20px" }}>
        {/* <CheckboxGroup
          options={option}
          label="Group checkbox"
          onChange={groupCheckBoxHandler}
          required
          value={['checkbox6']}
          name="Group"
        /> */}
      </div>
      <div style={{ margin: "16px" }}>
        <Address
          required
          labels={labels}
          placeHolders={placeHolders}
          address={fullAdresses}
          onChange={addressHandler}
          name="address"
          width="100px"
        />
      </div>
      <div style={{ margin: "16px" }}>
        <Email
          disabled
          required
          onChange={emailHandler}
          value={"bharat@bx.net"}
        />
      </div>
      <div style={{ margin: "16px" }}>
        <Number disabled required value={16} onChange={numberHandler} />
      </div>
      <div style={{ margin: "16px" }}>
        <FullName
          width={"250px"}
          required
          firstNameLabel={"First Name"}
          lastNameLabel={"Last Name"}
          value={null}
          onChange={fullNameHandler}
        />
      </div>
      <div style={{ margin: "16px" }}>
        <DatePicker
          width={240}
          value={"2024-10-22"}
          onChange={dateChangeHander}
        />
      </div>
      <div style={{ margin: "16px" }}>
        <TimePicker
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
          id="endTime"
        />
      </div>
      <div style={{ margin: "16px", maxHeight:'300px',overflowY:'auto' }}>
        <TimePicker
          id="startTime"
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
        />
         <TimePicker
        id='startTime1'
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
        />
         <TimePicker
        id='startTime2'
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
        />
         <TimePicker
        id='startTime3'
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
        />
         <TimePicker
        id='startTime4'
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
        />
         <TimePicker
        id='startTime5'
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
        />
         <TimePicker
        id='startTime6'
          width={240}
          style={{ color: "black" }}
          label={"Time Field"}
          required
          value={"2022-04-17T05:30"}
          onChange={timeChangeHandler}
        />
      </div>
      <div style={{ margin: "16px" }}>
        <FullName
          width={"250px"}
          required
          firstNameLabel={"First Name"}
          lastNameLabel={"Last Name"}
          value={null}
          onChange={fullNameHandler}
          // label={"Full name"}
        />
      </div>
      <div style={{ marginTop: 20 }}>
        <Text type="h2">Backdrop</Text>
        <div style={{ margin: 20 }}>
          <Button
            color="primary"
            variant="contained"
            style={{}}
            iconPosition={"start"}
            onClick={() => setOpenBackdrop(!openBackdrop)}
          >
            Open Backdrop
          </Button>
        </div>
        <Backdrop open={openBackdrop} />
      </div>
      <div style={{ marginTop: 20 }}>
        <Text type="h2">Speed dial</Text>
        <div style={{ margin: 20, position: "relative", height: "100px" }}>
          <SpeedDialButton flexDirection="row">
            <span className="material-symbols-outlined">add</span>
            <span className="material-symbols-outlined">add</span>
            <span className="material-symbols-outlined">add</span>
            <span className="material-symbols-outlined">add</span>
            <span className="material-symbols-outlined">add</span>
            <span className="material-symbols-outlined">add</span>
          </SpeedDialButton>
        </div>
      </div>
      <div style={{ marginTop: 20 }}>
        <Text type="h2">Slider</Text>
        <div style={{ margin: 20, position: "relative", height: "100px" }}>
          <Slider
            min={0}
            max={100}
            value={sliderValue}
            onChange={setSliderValue}
          />
        </div>
      </div>
      <div style={{ marginTop: 20 }}>
        <Text type="h2">Week View Scheduler</Text>
        <div style={{ margin: 20 }}>
          <WeekviewScheduler />
        </div>
      </div>
      <div style={{ marginTop: 20 }}>
        <Text type="h2">Week Calender</Text>
        <div style={{ margin: "20px" }}>
          <WeekCalender setDate={setDay} setWeekDays={setWeekDays} />
        </div>
      </div>
    </div>
  );
}

export default App;