generated from dwd/boilarplate-remix-tailwind-antd
196 lines
9.5 KiB
TypeScript
196 lines
9.5 KiB
TypeScript
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 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="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>></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">
|
|
|
|
<div className="flex ">
|
|
<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 ">
|
|
<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 ">
|
|
<span className="w-16 text-zinc-700">11 AM</span>
|
|
<div className="flex-1"></div>
|
|
</div>
|
|
<div className="flex ">
|
|
<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 mb-8">
|
|
<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 ">
|
|
<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 ">
|
|
<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">
|
|
<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 ">
|
|
<span className="w-16 text-zinc-700">5 PM</span>
|
|
<div className="flex-1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
|
|
)
|
|
}
|
|
export default App;
|