121 lines
3.1 KiB
JavaScript
Executable File
121 lines
3.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 {
|
|
Avatar,
|
|
Badge,
|
|
Button,
|
|
Flex,
|
|
Td,
|
|
Text,
|
|
Tr,
|
|
useColorModeValue,
|
|
} from "@chakra-ui/react";
|
|
import React from "react";
|
|
|
|
function TablesTableRow(props) {
|
|
const {
|
|
logo,
|
|
name,
|
|
email,
|
|
subdomain,
|
|
domain,
|
|
status,
|
|
date,
|
|
paddingY,
|
|
isLast,
|
|
} = props;
|
|
const textColor = useColorModeValue("gray.500", "white");
|
|
const titleColor = useColorModeValue("gray.700", "white");
|
|
const bgStatus = useColorModeValue("gray.400", "navy.900");
|
|
const borderColor = useColorModeValue("gray.200", "gray.600");
|
|
|
|
return (
|
|
<Tr>
|
|
<Td
|
|
minWidth={{ sm: "250px" }}
|
|
pl="0px"
|
|
borderColor={borderColor}
|
|
borderBottom={isLast ? "none" : null}
|
|
>
|
|
<Flex
|
|
align="center"
|
|
py={paddingY ? paddingY : ".8rem"}
|
|
minWidth="100%"
|
|
flexWrap="nowrap"
|
|
>
|
|
<Avatar src={logo} w="50px" borderRadius="12px" me="18px" />
|
|
<Flex direction="column">
|
|
<Text
|
|
fontSize="md"
|
|
color={titleColor}
|
|
fontWeight="bold"
|
|
minWidth="100%"
|
|
>
|
|
{name}
|
|
</Text>
|
|
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
|
{email}
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
</Td>
|
|
|
|
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
|
<Flex direction="column">
|
|
<Text fontSize="md" color={textColor} fontWeight="bold">
|
|
{domain}
|
|
</Text>
|
|
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
|
{subdomain}
|
|
</Text>
|
|
</Flex>
|
|
</Td>
|
|
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
|
<Badge
|
|
bg={status === "Online" ? "green.400" : bgStatus}
|
|
color={status === "Online" ? "white" : "white"}
|
|
fontSize="16px"
|
|
p="3px 10px"
|
|
borderRadius="8px"
|
|
>
|
|
{status}
|
|
</Badge>
|
|
</Td>
|
|
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
|
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
|
{date}
|
|
</Text>
|
|
</Td>
|
|
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
|
<Button p="0px" bg="transparent" variant="no-effects">
|
|
<Text
|
|
fontSize="md"
|
|
color="gray.400"
|
|
fontWeight="bold"
|
|
cursor="pointer"
|
|
>
|
|
Edit
|
|
</Text>
|
|
</Button>
|
|
</Td>
|
|
</Tr>
|
|
);
|
|
}
|
|
|
|
export default TablesTableRow;
|