Initial commit

src/components/Tables/TablesReportsRow.js

@@ -0,0 +1,171 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+import {
+  Avatar,
+  Flex,
+  Icon,
+  Td,
+  Text,
+  Tr,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import React from "react";
+import { BsCircleFill } from "react-icons/bs";
+
+function TablesReportsRow(props) {
+  const {
+    image,
+    name,
+    email,
+    domain,
+    review,
+    employed,
+    id,
+    isLast,
+    paddingY,
+  } = props;
+  const borderColor = useColorModeValue("gray.200", "gray.600");
+  const textColor = useColorModeValue("gray.700", "white");
+  const secondaryColor = useColorModeValue("gray.400", "white");
+  const mainColor = useColorModeValue("gray.500", "white");
+
+  return (
+    <Tr border="none">
+      <Td
+        borderColor={borderColor}
+        minW={{ sm: "220px", xl: "180px", "2xl": "220px" }}
+        ps="0px"
+        border={isLast ? "none" : null}
+        px={{ xl: "2px", "2xl": "20px" }}
+      >
+        <Flex
+          align="center"
+          py={paddingY ? paddingY : ".8rem"}
+          minWidth="100%"
+          flexWrap="nowrap"
+        >
+          <Avatar
+            src={image}
+            borderRadius="12px"
+            me={{ sm: "18px", xl: "6px", "2xl": "18px" }}
+          />
+          <Text
+            fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
+            color={textColor}
+            fontWeight="bold"
+            minWidth="100%"
+          >
+            {name}
+          </Text>
+        </Flex>
+      </Td>
+
+      <Td
+        borderColor={borderColor}
+        minW={{ sm: "150px", lg: "150px" }}
+        border={isLast ? "none" : null}
+        px={{ xl: "2px", "2xl": "20px" }}
+      >
+        <Flex direction="column">
+          <Text
+            fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
+            color={mainColor}
+            fontWeight="bold"
+          >
+            {domain}
+          </Text>
+        </Flex>
+      </Td>
+      <Td
+        borderColor={borderColor}
+        minW={{ sm: "150px", lg: "120px" }}
+        border={isLast ? "none" : null}
+        px={{ xl: "2px", "2xl": "20px" }}
+      >
+        <Flex align="center">
+          <Icon
+            as={BsCircleFill}
+            w="8px"
+            h="8px"
+            color={
+              review === "Positive"
+                ? "teal.300"
+                : review === "Negative"
+                ? "red.500"
+                : "gray.700"
+            }
+            me="6px"
+          />
+          <Text
+            color={secondaryColor}
+            fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
+          >
+            {review}
+          </Text>
+        </Flex>
+      </Td>
+      <Td
+        borderColor={borderColor}
+        minW={{ sm: "200px", lg: "170px" }}
+        border={isLast ? "none" : null}
+        px={{ xl: "2px", "2xl": "20px" }}
+      >
+        <Text
+          fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
+          color={secondaryColor}
+          fontWeight="normal"
+          pb=".5rem"
+        >
+          {email}
+        </Text>
+      </Td>
+      <Td
+        borderColor={borderColor}
+        minW={{ sm: "150px", lg: "170px" }}
+        border={isLast ? "none" : null}
+        px={{ xl: "2px", "2xl": "20px" }}
+      >
+        <Text
+          fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
+          color={secondaryColor}
+          fontWeight="normal"
+          pb=".5rem"
+        >
+          {employed}
+        </Text>
+      </Td>
+      <Td
+        borderColor={borderColor}
+        minW={{ sm: "150px", lg: "170px" }}
+        border={isLast ? "none" : null}
+        px={{ xl: "2px", "2xl": "20px" }}
+      >
+        <Text
+          fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
+          color={secondaryColor}
+          fontWeight="normal"
+          pb=".5rem"
+        >
+          {id}
+        </Text>
+      </Td>
+    </Tr>
+  );
+}
+
+export default TablesReportsRow;