generated from dwd/boilarplate-remix-tailwind-antd
s1
This commit is contained in:
Suvodip
155
app/components/ClassShedules.tsx
Normal file
155
app/components/ClassShedules.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
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>></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;
|
||||
Reference in New Issue
Block a user