bs-p2/app/components/ClassShedules.tsx

import React from "react";
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined } from '@ant-design/icons';
import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { Calendar, Col, Row, Typography } from 'antd';
import type { CalendarProps } from 'antd';
import type { Dayjs } from 'dayjs';
import dayLocaleData from 'dayjs/plugin/localeData';
import { Content } from "antd/es/layout/layout";
import '../../public/assets/left_side_nav.css';

dayjs.extend(dayLocaleData);

const schedule = [
    { time: '9 AM', title: 'Lorem Ipsum', details: '9 - 10 AM', borderColor: 'indigo-600', bgColor: 'bg-blue-200' },
    { time: '10 AM', title: 'Lorem Ipsum', details: '10 - 11 AM', borderColor: 'orange-600', bgColor: 'bg-blue-200' },
    { time: '11 AM', title: '', details: '', borderColor: '', bgColor: '' },
    { time: '12 PM', title: 'Lorem Ipsum dolor sit', details: '11:30 AM - 12:30 PM', borderColor: 'indigo-600', bgColor: '' },
    { time: '1 PM', title: 'Lorem Ipsum', details: '11:30 AM - 12:30 PM', borderColor: 'green-600', bgColor: '' },
    { time: '2 PM', title: 'Lorem Ipsum dolor sit', details: '11:30 AM - 12:30 PM', borderColor: 'red-700', bgColor: '' },
    { time: '3 PM', title: 'Lorem Ipsum dolor sit', details: '11 AM - 12:30 PM', borderColor: 'blue-700', bgColor: '' },
    { time: '4 PM', title: 'Lorem Ipsum', details: '11:30 AM - 12:30 PM', borderColor: 'sky-700', bgColor: 'bg-blue-200' },
    { time: '5 PM', title: '', details: '', borderColor: '', bgColor: '' }
  ];

const App: React.FC = () => {


    const { token } = theme.useToken();

    const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
        console.log(value.format('YYYY-MM-DD'), mode);
    };

    const wrapperStyle: React.CSSProperties = {
        width: 320,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
        padding: 16,
    };

    const headerStyle: React.CSSProperties = {
        display: 'flex',
        justifyContent: 'space-around',
        alignItems: 'center',
        // marginBottom: 16,
        backgroundColor: '#0752bc',
        height: 47,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,

    };


    const titleStyle: React.CSSProperties = {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
    };

    const navButtonStyle: React.CSSProperties = {
        cursor: 'pointer',
        fontSize: 16,
    };


    return (
        <>
        <div className="container mx-auto">
            <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-[350px_1fr]">
                <div className=" p-4">
                    <div className="grid grid-rows-2">
                        <div className="mb-4 bg-card bg-gray-200 rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">
                            <Calendar
                                fullscreen={false}
                                headerRender={({ value, onChange }) => {
                                    const monthFormat = 'MMMM';
                                    const year = value.year();
                                    const month = value.format(monthFormat);

                                    const prevMonth = () => {
                                        const newValue = value.clone().subtract(1, 'month');
                                        onChange(newValue);
                                    };

                                    const nextMonth = () => {
                                        const newValue = value.clone().add(1, 'month');
                                        onChange(newValue);
                                    };

                                    return (
                                        <div style={headerStyle}>
                                            <div className="">
                                                <div style={titleStyle}>{`${month} ${year}`}</div>
                                            </div>
                                            <div className="flex gap-8">
                                                <div style={navButtonStyle} onClick={prevMonth}>{'<'}</div>
                                                <div style={navButtonStyle} onClick={nextMonth}>{'>'}</div>
                                            </div>
                                        </div>
                                    );

                                }}

                                onPanelChange={onPanelChange}
                            />
                        </div>
                        <div className="">
                            <div className="bg-card h-80 bg-gray-200 rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">
                                <div className="flex justify-around items-center h-12 border-b-2 border-zinc-300 bg-[#0752bc] rounded-t-lg">
                                    {/* <h2 className="text-lg items-center font-semibold text-foreground dark:text-card-foreground">Upcoming Classes</h2> */}
                                    <h2 style={titleStyle}>Upcoming Classes <span>&gt;</span></h2>
                                </div>
                                <div className=" ">
                                    <div className="border-b-2 border-zinc-300 pb-12"></div>
                                    <div className="border-b-2 border-zinc-300 pb-12"></div>
                                    <div className="border-b-2 border-zinc-300 pb-12"></div>
                                    <div className="border-b-2 border-zinc-300 pb-12"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="p-4 border-l-[1px] py-2 border-[#CFCFCF]">
                    <div className="xl:col-span-4">
                    <div className="p-4 bg-background">
                        <h2 className="text-lg font-semibold mb-4 border-b-[1px] py-2 border-[#CFCFCF]">Today's Schedule</h2>
                        <div className="space-y-2">
                        {schedule.map((item, index) => (
                            <div className="flex" key={index}>
                            <span className="w-16 text-zinc-700">{item.time}</span>
                            {item.title ? (
                                <div className={`flex-1 ${item.bgColor} p-2 border-l-4 border-${item.borderColor} rounded-r-lg`}>
                                <span>{item.title}</span><br />
                                <span className="text-sm text-zinc-500">{item.details}</span>
                                </div>
                            ) : (
                                <div className="flex-1"></div>
                            )}
                            </div>
                        ))}
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        </>


    )
}
export default App;