172 lines
4.2 KiB
JavaScript
172 lines
4.2 KiB
JavaScript
/*!
|
|
|
|
=========================================================
|
|
* 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;
|