Working on the Master Module

src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx

@@ -1,12 +1,86 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import WorkAddModel from "./WorkAddModel";
+import EditWorkModel from "./EditWorkModel";
 
 
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditWorkModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
 const WorkspaceMode = () => {
-    return (
-      
-      <MainFrame >
-         WorkspaceMode
-      </MainFrame>
-    )
-  }
-  export default WorkspaceMode
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Workspace Mode
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <WorkAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default WorkspaceMode