Added Logo

package.json

@@ -53,6 +53,7 @@
   },
   "scripts": {
     "dev": "webpack serve --open",
+    "build": "webpack --mode production",
     "build:lib": "node scripts/build.js",
     "clean": "npx rimraf dist",
     "lint": "eslint ./src",

src/examples/app.jsx

@@ -1,7 +1,84 @@
-import React from 'react';
+import { Result } from 'antd';
+import React, { lazy, Suspense } from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Fallback from './components/Fallback';
+import Landing from './components/Landing';
+import './css/style.css';
+
+const Home = lazy(() => import('./pages/Home'));
+const Basic = lazy(() => import('./pages/Basic'));
+const ReadOnly = lazy(() => import('./pages/Read-Only'));
+const AddMore = lazy(() => import('./pages/Add-More'));
+const DragAndDrop = lazy(() => import('./pages/Drag-And-Drop'));
+const CustomTime = lazy(() => import('./pages/Custom-Time'));
 
 function App() {
-  return <div>App</div>;
+  const router = createBrowserRouter([
+    {
+      path: '/',
+      element: <Landing />,
+      children: [
+        {
+          path: '/',
+          element: (
+            <Suspense fallback={<Fallback />}>
+              <Home />
+            </Suspense>
+          ),
+        },
+        {
+          path: '/basic',
+          element: (
+            <Suspense fallback={<Fallback />}>
+              <Basic />
+            </Suspense>
+          ),
+        },
+        {
+          path: '/read-only',
+          element: (
+            <Suspense fallback={<Fallback />}>
+              <ReadOnly />
+            </Suspense>
+          ),
+        },
+        {
+          path: '/add-more',
+          element: (
+            <Suspense fallback={<Fallback />}>
+              <AddMore />
+            </Suspense>
+          ),
+        },
+        {
+          path: '/drag-and-drop',
+          element: (
+            <Suspense fallback={<Fallback />}>
+              <DragAndDrop />
+            </Suspense>
+          ),
+        },
+        {
+          path: '/custom-time',
+          element: (
+            <Suspense fallback={<Fallback />}>
+              <CustomTime />
+            </Suspense>
+          ),
+        },
+        {
+          path: '*',
+          element: <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist or is under construction." />,
+        },
+      ],
+    },
+    {
+      path: '*',
+      element: <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist or is under construction." />,
+    },
+  ]);
+
+  return <RouterProvider router={router} />;
 }
 
 export default App;

src/examples/components/Fallback.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+
+function Fallback() {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <Spin indicator={antIcon} />
+      <p>Please wait while the component is being loaded.</p>
+    </div>
+  );
+}
+
+export default Fallback;

src/examples/components/Header.jsx

@@ -0,0 +1,29 @@
+import { GithubOutlined } from '@ant-design/icons';
+import { Col, Row } from 'antd';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import logo from '../assets/logo.png';
+import npm from '../assets/npm.svg';
+
+function Header() {
+  return (
+    <Row align="middle" justify="space-between" className="header-wrapper">
+      <Col span={2}>
+        <Link to="/">
+          <img src={logo} alt="Logo" className="logo_img" />
+        </Link>
+      </Col>
+      <Col>
+        <Link to="https://www.npmjs.com/package/react-big-schedule" target="_blank" className="npm-icon">
+          <img src={npm} alt="npm-logo" />
+        </Link>
+        <Link to="https://github.com/react-scheduler/react-big-schedule" target="_blank" className="github-icon">
+          <GithubOutlined />
+        </Link>
+      </Col>
+    </Row>
+  );
+}
+
+export default Header;

src/examples/components/Landing.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Layout } from 'antd';
+import { Outlet } from 'react-router-dom';
+import Header from './Header';
+import Slider from './Slider';
+
+function Landing() {
+  return (
+    <Layout className="main-layout">
+      <Layout.Header className="main-header">
+        <Header />
+      </Layout.Header>
+      <Layout hasSider>
+        <Layout.Sider breakpoint="md" theme="light">
+          <Slider />
+        </Layout.Sider>
+        <Layout.Content className="main-content">
+          <Outlet />
+        </Layout.Content>
+      </Layout>
+    </Layout>
+  );
+}
+
+export default Landing;

src/examples/components/ResourceItem.jsx

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import React from 'react';
+
+function ResourceItem({ resource, isDragging, connectDragSource, connectDragPreview }) {
+  const dragContent = <li style={{ color: 'red', fontWeight: 'bold', fontSize: '20px', listStyle: 'none' }}>{resource.name}</li>;
+
+  return isDragging ? null : <div>{connectDragPreview(connectDragSource(dragContent))}</div>;
+}
+
+export default ResourceItem;

src/examples/components/ResourceList.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable */
+import React from 'react';
+
+function ResourceList({ schedulerData, newEvent, resourceDndSource }) {
+  const DnDResourceItem = resourceDndSource.getDragSource();
+  const resources = schedulerData.resources;
+
+  return (
+    <ul>
+      {resources.map(resource => (
+        <DnDResourceItem key={resource.id} resource={resource} newEvent={newEvent} schedulerData={schedulerData} />
+      ))}
+    </ul>
+  );
+}
+
+export default ResourceList;

src/examples/components/Slider.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Menu } from 'antd';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const items = [
+  { label: 'Home', key: 'home', path: '/' },
+  { label: 'Basic', key: 'basic', path: '/basic' },
+  { label: 'Read Only', key: 'read-only', path: '/read-only' },
+  { label: 'Add More', key: 'add-more', path: '/add-more' },
+  { label: 'Drag and Drop', key: 'drag-and-drop', path: '/drag-and-drop' },
+  { label: 'Custom Time', key: 'custom-time', path: '/custom-time' },
+];
+
+function Slider() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const activePath = pathname?.split('/')[1] || 'home';
+  return <Menu selectedKeys={[activePath]} items={items.map(i => ({ ...i, onClick: () => navigate(i.path) }))} />;
+}
+
+export default Slider;

src/examples/components/SourceCode.jsx

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Row } from 'antd';
+
+function SourceCode({ value }) {
+  return (
+    <Row align="middle" justify="center">
+      <Link to={value} target="_blank">
+        &lt;/&gt; Source Code
+      </Link>
+    </Row>
+  );
+}
+
+export default SourceCode;

src/examples/components/TaskItem.jsx

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import React from 'react';
+
+function TaskItem({ task, isDragging, connectDragSource, connectDragPreview }) {
+  const dragContent = <li style={{ color: 'red', fontWeight: 'bold', fontSize: '20px', listStyle: 'none' }}>{task.name}</li>;
+
+  return isDragging ? null : <>{connectDragPreview(connectDragSource(dragContent))}</>;
+}
+
+export default TaskItem;

src/examples/components/TaskList.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable */
+import React from 'react';
+
+function TaskList({ schedulerData, newEvent, taskDndSource }) {
+  const DnDTaskItem = taskDndSource.getDragSource();
+  const tasks = schedulerData.eventGroups;
+
+  return (
+    <ul>
+      {tasks?.map(task => (
+        <DnDTaskItem key={task.id} task={task} newEvent={newEvent} schedulerData={schedulerData} />
+      ))}
+    </ul>
+  );
+}
+
+export default TaskList;