generated from dwd/boilarplate-remix-tailwind-antd
83 lines
4.3 KiB
TypeScript
83 lines
4.3 KiB
TypeScript
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;
|