Mantime.jsx

import { Group } from "@mantine/core";
import { Calendar } from "@mantine/dates";
import * as React from "react";


const App = () => {
  const currentDate = new Date();


  const handleDateChange = (date) => {
    console.log("Selected Date:", date);
  };


  const calendarStyle = {
    background: "whitesmoke",
    border: "1px solid gray",
    borderRadius: "4px",
    boxShadow: "0 0 4px 2px rgba(0, 0, 0, 0.1)",
    width: "100%",
    maxWidth: "500px",
    height: "500px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    fontSize: "1.2rem",
    fontWeight: "bold",
    color: "gray",
    cursor: "pointer",
    transition: "all 0.2s ease-in-out",
  };


  return (
    <Group position="center">
      <Calendar
        style={calendarStyle}
        defaultMonth={currentDate}
        onMonthChange={(date) => console.log("Month Changed:", date)}
        onDateSelected={handleDateChange}
      />
    </Group>
  );
};


export default App;