AmirReza Jamali
238 lines
15 KiB
TypeScript
238 lines
15 KiB
TypeScript
const CalendarBox = () => {
|
|
return (
|
|
<>
|
|
<div className="w-full max-w-full rounded-[10px] bg-white shadow-1 dark:bg-gray-dark dark:shadow-card">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="grid grid-cols-7 rounded-t-[10px] bg-primary text-white">
|
|
<th className="flex h-15 items-center justify-center rounded-tl-[10px] p-1 text-body-xs font-medium sm:text-base xl:p-5">
|
|
<span className="hidden lg:block"> Sunday </span>
|
|
<span className="block lg:hidden"> Sun </span>
|
|
</th>
|
|
<th className="flex h-15 items-center justify-center p-1 text-body-xs font-medium sm:text-base xl:p-5">
|
|
<span className="hidden lg:block"> Monday </span>
|
|
<span className="block lg:hidden"> Mon </span>
|
|
</th>
|
|
<th className="flex h-15 items-center justify-center p-1 text-body-xs font-medium sm:text-base xl:p-5">
|
|
<span className="hidden lg:block"> Tuesday </span>
|
|
<span className="block lg:hidden"> Tue </span>
|
|
</th>
|
|
<th className="flex h-15 items-center justify-center p-1 text-body-xs font-medium sm:text-base xl:p-5">
|
|
<span className="hidden lg:block"> Wednesday </span>
|
|
<span className="block lg:hidden"> Wed </span>
|
|
</th>
|
|
<th className="flex h-15 items-center justify-center p-1 text-body-xs font-medium sm:text-base xl:p-5">
|
|
<span className="hidden lg:block"> Thursday </span>
|
|
<span className="block lg:hidden"> Thur </span>
|
|
</th>
|
|
<th className="flex h-15 items-center justify-center p-1 text-body-xs font-medium sm:text-base xl:p-5">
|
|
<span className="hidden lg:block"> Friday </span>
|
|
<span className="block lg:hidden"> Fri </span>
|
|
</th>
|
|
<th className="flex h-15 items-center justify-center rounded-tr-[10px] p-1 text-body-xs font-medium sm:text-base xl:p-5">
|
|
<span className="hidden lg:block"> Saturday </span>
|
|
<span className="block lg:hidden"> Sat </span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{/* <!-- Line 1 --> */}
|
|
<tr className="grid grid-cols-7">
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">1</span>
|
|
<div className="group h-16 w-full flex-grow cursor-pointer py-1 md:h-30">
|
|
<span className="group-hover:text-primary md:hidden">
|
|
More
|
|
</span>
|
|
<div className="event invisible absolute left-2 z-99 mb-1 flex w-[200%] flex-col rounded-r-[5px] border-l-[3px] border-primary bg-gray-2 px-3 py-1 text-left opacity-0 group-hover:visible group-hover:opacity-100 dark:bg-dark-2 md:visible md:w-[190%] md:opacity-100">
|
|
<span className="event-name font-medium text-dark dark:text-white">
|
|
Redesign Website
|
|
</span>
|
|
<span className="time text-sm">1 Dec - 2 Dec</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">2</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">3</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">4</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">5</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">6</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">7</span>
|
|
</td>
|
|
</tr>
|
|
{/* <!-- Line 1 --> */}
|
|
{/* <!-- Line 2 --> */}
|
|
<tr className="grid grid-cols-7">
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">8</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">9</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
10
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
11
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
12
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
13
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
14
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{/* <!-- Line 2 --> */}
|
|
{/* <!-- Line 3 --> */}
|
|
<tr className="grid grid-cols-7">
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
15
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
16
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
17
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
18
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
19
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
20
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
21
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{/* <!-- Line 3 --> */}
|
|
{/* <!-- Line 4 --> */}
|
|
<tr className="grid grid-cols-7">
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
22
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
23
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
24
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
25
|
|
</span>
|
|
<div className="group h-16 w-full flex-grow cursor-pointer py-1 md:h-30">
|
|
<span className="group-hover:text-primary md:hidden">
|
|
More
|
|
</span>
|
|
<div className="event invisible absolute left-2 z-99 mb-1 flex w-[300%] flex-col rounded-r-[5px] border-l-[3px] border-primary bg-gray-2 px-3 py-1 text-left opacity-0 group-hover:visible group-hover:opacity-100 dark:bg-dark-2 md:visible md:w-[290%] md:opacity-100">
|
|
<span className="event-name font-medium text-dark dark:text-white">
|
|
App Design
|
|
</span>
|
|
<span className="time text-sm">25 Dec - 27 Dec</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
26
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
27
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
28
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{/* <!-- Line 4 --> */}
|
|
{/* <!-- Line 5 --> */}
|
|
<tr className="grid grid-cols-7">
|
|
<td className="ease relative h-20 cursor-pointer rounded-bl-[10px] border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
29
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
30
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">
|
|
31
|
|
</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">1</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">2</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">3</span>
|
|
</td>
|
|
<td className="ease relative h-20 cursor-pointer rounded-br-[10px] border border-stroke p-2 transition duration-500 hover:bg-gray-2 dark:border-dark-3 dark:hover:bg-dark-2 md:h-25 md:p-6 xl:h-31">
|
|
<span className="font-medium text-dark dark:text-white">4</span>
|
|
</td>
|
|
</tr>
|
|
{/* <!-- Line 5 --> */}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CalendarBox;
|