feat: draft calendar

Author: TangJetsada123

package-lock.json

@@ -13,9 +13,14 @@
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.39",
     "@types/react": "^18.0.12",
+    "@types/react-calendar": "^3.5.2",
     "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25",
+    "fullcalendar": "^5.11.3",
+    "js-year-calendar": "^2.0.0",
+    "rc-year-calendar": "^1.0.2",
     "react": "^18.1.0",
+    "react-calendar": "^3.8.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
@@ -46,5 +51,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.10",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8"
   }
 }

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -5,6 +5,7 @@ import ChooseCalendar from './Pages/ChooseCalendar/ChooseCalendar';
 import SettingCalendar from './Pages/SettingCalendar/SettingCalendar';
 import { createGlobalStyle } from 'styled-components';
 import DraftYear from './Pages/DraftYear/DraftYear';
+import 'react-calendar/dist/Calendar.css';
 
 const GobalStyle = createGlobalStyle`
   font-family: 'Roboto', sans-serif;

src/App.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const DraftContainer = styled.div`
+    
+    margin-top: 200px;
+    display: flex;
+    flex-wrap: wrap;
+`

src/Components/Draft.styled.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { Calendar } from "react-calendar";
+import { DraftContainer } from "./Draft.styled";
+
+export default function Draft() {
+  const [value, onChange] = useState(new Date());
+
+  return (
+    <div>
+      <div className='absolute bottom-0 left-0'>
+        <DraftContainer>
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+          <Calendar onChange={onChange} value={value} />
+        </DraftContainer>
+      </div>
+    </div>
+  );
+}

src/Components/Draft.tsx

@@ -17,20 +17,6 @@ const NewCalendar = styled.button`
 
 function ChooseCalendar(){
 
-    // const card_render:React.FC = () => {
-    //     return(
-    //         <>
-    //         {
-    //             cards_dummy.map((item :Data)=>(
-    //             <div>
-    //                 <CalendarCard name={item.name} year={item.year} create_date={item.create_date}  recently_edited={item.recently_edited}/>
-    //             </div>
-                               
-    //             ))
-    //         }
-    //         </>
-    //     )
-    // }
     return(
         <>
         <NavBar />

src/Pages/ChooseCalendar/ChooseCalendar.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const InsertFile = styled.div`
+  color: #f57f17;
+`;

src/Pages/DraftYear/DraftYear.styled.tsx

@@ -1,20 +1,30 @@
 import React from "react";
+import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
+import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
+
 import {
   NavButton,
   NavBarSt,
   ButtonSave,
   BackButton,
-}from '../SettingCalendar/SearchBar.styled'
+} from "../SettingCalendar/SearchBar.styled";
+import { InsertFile } from "./DraftYear.styled";
+import Draft from "../../Components/Draft";
 
 const DraftYear: React.FC = () => {
   return (
     <div>
       <NavBarSt>
+        <InsertFile>
+          <InsertDriveFileOutlinedIcon />
+        </InsertFile>
         <NavButton>
           <BackButton> Back</BackButton>
+          <CalendarTodayOutlinedIcon />
           <ButtonSave>Save Changes</ButtonSave>
         </NavButton>
       </NavBarSt>
+      {/* <Draft /> */}
     </div>
   );
 };

src/Pages/DraftYear/DraftYear.tsx

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,tsx,ts,tsx"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}