import React from "react";
import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd';

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

            <div className='grid grid-cols-2 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
            <div className='xl:col-span-4'>

                <div className="p-4 bg-background">
                    <h2 className="text-lg font-semibold mb-4">Today's Schedule</h2>
                    <div className="space-y-2">

                        <div className="flex items-center">

                            <span className="w-16 text-zinc-700">9 AM</span>
                            <div className="flex-1 bg-blue-200 p-2 border-l-4 border-indigo-600 rounded-r-lg ">
                                <span>Lorem Ipsum</span><br />
                                <span className="text-sm text-zinc-500">9 - 10 AM</span>
                            </div>
                        </div>
                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">10 AM</span>
                            <div className="flex-1 bg-blue-200 p-2 border-l-4 border-orange-600 rounded-r-lg">
                                <span>Lorem Ipsum</span><br />
                                <span className="text-sm text-zinc-500">10 - 11 AM</span>
                            </div>
                        </div>
                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">11 AM</span>
                            <div className="flex-1"></div>
                        </div>
                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">12 PM</span>
                            <div className="flex-1  p-2 border-l-4 border-indigo-600 rounded-r-lg">
                                <span>Lorem Ipsum dolor sit</span><br />
                                <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                            </div>
                        </div>
                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">1 PM</span>
                            <div className="flex-1  p-2 border-l-4 border-green-600 rounded-r-lg">
                                <span>Lorem Ipsum</span><br />
                                <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                            </div>
                        </div>

                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">2 PM</span>
                            <div className="flex-1  p-2 border-l-4 border-red-700 rounded-r-lg">
                                <span>Lorem Ipsum dolor sit</span><br />
                                <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                            </div>
                        </div>
                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">3 PM</span>
                            <div className="flex-1  p-2 border-l-4 border-blue-700 rounded-r-lg">
                                <span>Lorem Ipsum dolor sit</span><br />
                                <span className="text-sm text-zinc-500">11 AM - 12:30 PM</span>
                            </div>
                        </div>
                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">4 PM</span>
                            <div className="flex-1 bg-blue-200 p-2 border-l-4 border-sky-700 rounded-r-lg">
                                <span>Lorem Ipsum</span><br />
                                <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                            </div>
                        </div>
                        <div className="flex items-center">
                            <span className="w-16 text-zinc-700">5 PM</span>
                            <div className="flex-1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
                
                </>          
    )
}
export default App;