94 lines
2.8 KiB
JavaScript
Executable File
94 lines
2.8 KiB
JavaScript
Executable File
/*!
|
|
|
|
=========================================================
|
|
* 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;
|