Initial commit

src/components/Tables/InvoicesRow.js

@@ -0,0 +1,61 @@
+/*!
+
+=========================================================
+* 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 {
+  Box,
+  Button,
+  Flex,
+  Icon,
+  Spacer,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import React from "react";
+
+function InvoicesRow(props) {
+  const textColor = useColorModeValue("gray.700", "white");
+  const { date, code, price, format, logo } = props;
+
+  return (
+    <Flex my={{ sm: "1rem", xl: "10px" }} alignItems="center">
+      <Flex direction="column">
+        <Text fontSize="md" color={textColor} fontWeight="bold">
+          {date}
+        </Text>
+        <Text fontSize="sm" color="gray.400" fontWeight="semibold" me="16px">
+          {code}
+        </Text>
+      </Flex>
+      <Spacer />
+      <Box me="12px">
+        <Text fontSize="md" color="gray.400" fontWeight="semibold">
+          {price}
+        </Text>
+      </Box>
+      <Button p="0px" bg="transparent" variant="no-effects">
+        <Flex alignItems="center" p="12px">
+          <Icon as={logo} w="20px" h="auto" me="5px" />
+          <Text fontSize="md" color={textColor} fontWeight="bold">
+            {format}
+          </Text>
+        </Flex>
+      </Button>
+    </Flex>
+  );
+}
+
+export default InvoicesRow;