85 lines
2.1 KiB
JavaScript
Executable File
85 lines
2.1 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 {
|
|
Button,
|
|
Flex,
|
|
Icon,
|
|
Progress,
|
|
Td,
|
|
Text,
|
|
Tr,
|
|
useColorModeValue,
|
|
} from "@chakra-ui/react";
|
|
import React from "react";
|
|
import { FaEllipsisV } from "react-icons/fa";
|
|
|
|
function DashboardTableRow(props) {
|
|
const { logo, name, status, budget, progression } = props;
|
|
const textColor = useColorModeValue("gray.700", "white");
|
|
return (
|
|
<Tr>
|
|
<Td minWidth={{ sm: "250px" }} ps="0px">
|
|
<Flex alignItems="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
|
|
<Icon as={logo} h={"24px"} w={"24px"} me="18px" />
|
|
<Text
|
|
fontSize="md"
|
|
color={textColor}
|
|
fontWeight="bold"
|
|
minWidth="100%"
|
|
>
|
|
{name}
|
|
</Text>
|
|
</Flex>
|
|
</Td>
|
|
<Td>
|
|
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
|
{budget}
|
|
</Text>
|
|
</Td>
|
|
<Td>
|
|
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
|
{status}
|
|
</Text>
|
|
</Td>
|
|
<Td>
|
|
<Flex direction="column">
|
|
<Text
|
|
fontSize="md"
|
|
color="teal.300"
|
|
fontWeight="bold"
|
|
pb=".2rem"
|
|
>{`${progression}%`}</Text>
|
|
<Progress
|
|
colorScheme={progression === 100 ? "teal" : "cyan"}
|
|
size="xs"
|
|
value={progression}
|
|
borderRadius="15px"
|
|
/>
|
|
</Flex>
|
|
</Td>
|
|
<Td>
|
|
<Button p="0px" bg="transparent">
|
|
<Icon as={FaEllipsisV} color="gray.400" cursor="pointer" />
|
|
</Button>
|
|
</Td>
|
|
</Tr>
|
|
);
|
|
}
|
|
|
|
export default DashboardTableRow;
|