Initial commit

src/components/Tables/BillingRow.js

@@ -0,0 +1,93 @@
+/*!
+
+=========================================================
+* 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,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import React from "react";
+import { FaPencilAlt, FaTrashAlt } from "react-icons/fa";
+
+function BillingRow(props) {
+  const textColor = useColorModeValue("gray.700", "white");
+  const bgColor = useColorModeValue("#F8F9FA", "navy.900");
+  const nameColor = useColorModeValue("gray.500", "white");
+  const { name, company, email, number } = props;
+
+  return (
+    <Box p="24px" bg={bgColor} mb="22px" borderRadius="12px">
+      <Flex justify="space-between" w="100%">
+        <Flex direction="column" maxWidth="70%">
+          <Text color={nameColor} fontSize="md" fontWeight="bold" mb="10px">
+            {name}
+          </Text>
+          <Text color="gray.400" fontSize="sm">
+            Company Name:{" "}
+            <Text as="span" color={nameColor} fontWeight="bold">
+              {company}
+            </Text>
+          </Text>
+          <Text color="gray.400" fontSize="sm">
+            Email Address:{" "}
+            <Text as="span" color={nameColor} fontWeight="bold">
+              {email}
+            </Text>
+          </Text>
+          <Text color="gray.400" fontSize="sm">
+            VAT Number:{" "}
+            <Text as="span" color={nameColor} fontWeight="bold">
+              {number}
+            </Text>
+          </Text>
+        </Flex>
+        <Flex
+          direction={{ sm: "column", md: "row" }}
+          align="flex-start"
+          p={{ md: "24px" }}
+        >
+          <Button
+            p="0px"
+            variant="no-effects"
+            mb={{ sm: "10px", md: "0px" }}
+            me={{ md: "12px" }}
+          >
+            <Flex color="red.500" cursor="pointer" align="center" p="12px">
+              <Icon as={FaTrashAlt} me="4px" />
+              <Text fontSize="sm" fontWeight="semibold">
+                DELETE
+              </Text>
+            </Flex>
+          </Button>
+          <Button p="0px" variant="no-effects">
+            <Flex color={textColor} cursor="pointer" align="center" p="12px">
+              <Icon as={FaPencilAlt} me="4px" />
+              <Text fontSize="sm" fontWeight="semibold">
+                EDIT
+              </Text>
+            </Flex>
+          </Button>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}
+
+export default BillingRow;