Merge branch 'deploy' into feature/#6

package.json

@@ -53,7 +53,6 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.27",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",

src/components/Employee/CardAddMember.tsx

@@ -0,0 +1,28 @@
+import { PlusOutlined } from "@ant-design/icons";
+import React from "react";
+import { Button, Dropdown } from "antd";
+import type { MenuProps } from "antd";
+
+const items: MenuProps["items"] = [
+  {
+    label: "Add Member",
+    key: "addMember",
+  },
+  {
+    label: "Add Team",
+    key: "addTeam",
+  },
+];
+
+export default function TableAddMember() {
+  return (
+    <Dropdown
+      menu={{ items }}
+      autoAdjustOverflow={true}
+      placement="bottomRight"
+      trigger={["click"]}
+    >
+      <Button type="primary" icon={<PlusOutlined />} size="large" />
+    </Dropdown>
+  );
+}

src/components/Employee/CardExportBtn.tsx

@@ -0,0 +1,12 @@
+import { CloudDownloadOutlined } from "@ant-design/icons";
+import React from "react";
+import { Button } from "antd";
+
+export default function TableExportBtn() {
+  return (
+    <Button size="large">
+      <CloudDownloadOutlined />
+      <span>Export</span>
+    </Button>
+  );
+}

src/components/Employee/CardFilter.tsx

@@ -0,0 +1,59 @@
+import { FilterFilled } from "@ant-design/icons";
+import React from "react";
+import { Button, Dropdown } from "antd";
+import type { MenuProps } from "antd";
+
+const items: MenuProps["items"] = [
+  {
+    type: "group",
+    label: "SORT BY:",
+    children: [
+      {
+        label: "default",
+        key: "sortDefault",
+      },
+      {
+        label: "Name",
+        key: "sortName",
+      },
+      {
+        label: "Team",
+        key: "sortTeam",
+      },
+    ],
+  },
+  {
+    type: "group",
+    label: "MEMBERS:",
+    children: [
+      {
+        label: "All",
+        key: "membersAll",
+      },
+      {
+        label: "Manager",
+        key: "membersManager",
+      },
+      {
+        label: "Member",
+        key: "membersMember",
+      },
+    ],
+  },
+];
+
+export default function TableFilter() {
+  return (
+    <Dropdown
+      menu={{ items }}
+      placement="bottomLeft"
+      className="filter-btn"
+      trigger={["click"]}
+    >
+      <Button size="large">
+        <FilterFilled />
+        <span>Filter</span>
+      </Button>
+    </Dropdown>
+  );
+}

src/components/Employee/CardHeading.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Button, Space } from "antd";
+import styled from "styled-components";
+import TableFilter from "./CardFilter";
+import TableSearch from "./CardSearch";
+import TableAddMember from "./CardAddMember";
+import TableExportBtn from "./CardExportBtn";
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 1.5rem;
+`;
+
+const ToggleWrap = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+`;
+
+export default function CardHeading() {
+  return (
+    <CardHeader className="card-header">
+      <ToggleWrap>
+        <Space direction="vertical">
+          <TableFilter />
+        </Space>
+        <Space direction="vertical">
+          <TableSearch />
+        </Space>
+      </ToggleWrap>
+      <ToggleWrap>
+        <TableExportBtn />
+        <Space direction="vertical">
+          <Space wrap>
+            <TableAddMember />
+          </Space>
+        </Space>
+      </ToggleWrap>
+    </CardHeader>
+  );
+}

src/components/Employee/CardSearch.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { Input } from "antd";
+
+const { Search } = Input;
+
+export default function TableSearch() {
+  return (
+    <Search
+      placeholder="input search text"
+      allowClear
+      size="large"
+      style={{ width: 300 }}
+    />
+  );
+}