(false);
+
+ const FILTER_ITEMS: MenuProps["items"] = [
+ {
+ key: "1",
+ label: todoStore.FilterTodo("all")}>all todo
,
+ style: DEFAULT_STYLE,
+ icon: ,
+ },
+ {
+ key: "2",
+ label: (
+ todoStore.FilterTodo("favorite")}>
+ favorite todo
+
+ ),
+ style: DEFAULT_STYLE,
+ icon: ,
+ },
+ {
+ key: "3",
+ label: (
+ todoStore.FilterTodo("completed")}>
+ Completed todolist
+
+ ),
+ style: DEFAULT_STYLE,
+ icon: ,
+ },
+ {
+ key: "4",
+ label: (
+ todoStore.FilterTodo("uncompleted")}>
+ Uncompleted todolist
+
+ ),
+ style: DEFAULT_STYLE,
+ icon: ,
+ },
+ ];
+
+ const handleSubmit = (form: TodoForm) => {
+ setOpenModal(false);
+ useAddTodo({
+ ...form,
+ favorite: false,
+ completed: false,
+ });
+
+ console.log({
+ ...form,
+ favorite: false,
+ completed: false,
+ });
+
+ todoStore.AddTodo({
+ ...form,
+ favorite: false,
+ completed: false,
+ });
+ };
+
+ return (
+
+
+ Welcome back
+ {name}
+
+
+ setOpenModal(true)}>
+
+ Add Todo
+
+
+
+
+ Filter
+
+
+
+ setOpenModal(false)}
+ />
+
+ );
+});
+
+export default Header;
+
+const Flex = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ @media only screen and (max-width: ${ScreenSize.TABLET}) {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+`;
+
+const WelcomeHeading = styled.h1`
+ font-size: 2rem;
+ font-weight: 400;
+
+ @media only screen and (max-width: ${ScreenSize.TABLET}) {
+ font-size: 1.5rem;
+ }
+
+ @media only screen and (max-width: ${ScreenSize.MOBILE}) {
+ font-size: 1rem;
+ }
+`;
+
+const SpanName = styled.span`
+ font-size: 1.5rem;
+ font-weight: 400;
+ padding-left: 1rem;
+ color: rgba(0, 0, 0, 0.7);
+ text-decoration: underline;
+
+ @media only screen and (max-width: ${ScreenSize.TABLET}) {
+ font-size: 1rem;
+ }
+
+ @media only screen and (max-width: ${ScreenSize.MOBILE}) {
+ font-size: 0.5rem;
+ }
+`;
+
+const BtnCustom = styled(Button)`
+ border-color: black;
+ margin: 0 1rem;
+ > * {
+ display: flex;
+ }
+`;
diff --git a/client/src/components/user/ModalForm.tsx b/client/src/components/user/ModalForm.tsx
new file mode 100644
index 0000000..30d7777
--- /dev/null
+++ b/client/src/components/user/ModalForm.tsx
@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import dayjs from "dayjs";
+import { Modal, Input, DatePicker, Select, DatePickerProps } from "antd";
+import type { TodoForm } from "@interfaces/TodoForm";
+import { TAG_COLOR } from "src/mocks/tag_color";
+
+const { TextArea } = Input;
+
+interface ModalFormProps {
+ open: boolean;
+ onOk: (form: TodoForm) => void;
+ onCancel?: () => void;
+ title?: string;
+ description?: string;
+ date?: string;
+ tag_name?: string;
+ tag_color?: string;
+}
+
+const ModalForm: React.FC = (props) => {
+ const {
+ open,
+ onOk,
+ onCancel,
+ title,
+ description,
+ date,
+ tag_name,
+ tag_color,
+ } = props;
+ const [todoForm, setTodoForm] = useState({
+ title: title || "",
+ description: description || "",
+ date: date || dayjs().format("YYYY/MM/DD"),
+ tag_name: tag_name || "work",
+ tag_color: tag_color || "cyan",
+ });
+
+ const [titleError, setTitleError] = useState(false);
+
+ const handleOk = () => {
+ if (!todoForm.title) {
+ return setTitleError(true);
+ }
+
+ onOk({ ...todoForm, favorite: false, completed: false });
+ setTodoForm({
+ title: title || "",
+ description: description || "",
+ date: date || dayjs().format("YYYY/MM/DD"),
+ tag_name: tag_name || "work",
+ tag_color: tag_color || "cyan",
+ });
+ };
+
+ const handleChangeDate: DatePickerProps["onChange"] = (date, dateString) => {
+ setTodoForm({ ...todoForm, date: dateString });
+ };
+
+ return (
+ <>
+
+ setTodoForm({ ...todoForm, title: e.target.value })}
+ value={todoForm.title}
+ />
+