victorAnumudu
44 lines
1.4 KiB
React
Executable File
44 lines
1.4 KiB
React
Executable File
import React, { useState } from "react";
|
|
import dataImage1 from "../../assets/images/data-table-user-1.png";
|
|
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
|
import dataImage3 from "../../assets/images/data-table-user-3.png";
|
|
import dataImage4 from "../../assets/images/data-table-user-4.png";
|
|
import SelectBox from "../Helpers/SelectBox";
|
|
import Calendar from 'react-calendar';
|
|
import 'react-calendar/dist/Calendar.css';
|
|
|
|
export default function CalendarTable({ className }) {
|
|
const filterCategories = ["All Categories", "Explore", "Featured"];
|
|
const [selectedCategory, setCategory] = useState(filterCategories[0]);
|
|
const [value, onChange] = useState(new Date());
|
|
|
|
return (
|
|
<div
|
|
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[800px] ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
<div className="header w-full flex justify-between items-center mb-5">
|
|
<div className="flex space-x-2 items-center">
|
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
|
Calendar
|
|
</h1>
|
|
</div>
|
|
<SelectBox
|
|
action={setCategory}
|
|
datas={filterCategories}
|
|
className="Update-table-dropdown"
|
|
contentBodyClasses="w-auto min-w-max"
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<Calendar onChange={onChange} value={value} calendarType="US" />
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
);
|
|
} |