Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 51x 970x 199x 51x 970x 970x 970x | import { Box, Stack } from "@mui/material";
import { PencilSimpleIcon } from "@phosphor-icons/react";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
import { TaskCardProps } from "../types";
import React, { forwardRef } from "react";
const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
({ title, onEdit, children, actions, sx, containerSx }, ref) => {
return (
<Container ref={ref} sx={containerSx}>
<Header>
<GiveText variant="bodyS" lineHeight="20px" flex={1}>
{title}
</GiveText>
{!!onEdit && (
<GiveIconButton
variant="ghost"
size="small"
data-testid={title}
Icon={PencilSimpleIcon}
onClick={onEdit}
/>
)}
<Stack direction="row" gap="8px">
{actions?.map((actionItem, i) =>
actionItem.element ? (
<React.Fragment key={i}>{actionItem.element}</React.Fragment>
) : (
<GiveIconButton
key={i}
variant="ghost"
size="small"
Icon={actionItem.Icon}
onClick={actionItem.onClick}
/>
),
)}
</Stack>
</Header>
<Content sx={sx}>{children}</Content>
</Container>
);
},
);
TaskCard.displayName = "TaskCard";
export default TaskCard;
const Header = styled(Stack)(({ theme }) => ({
backgroundColor: theme.palette.surface?.secondary,
padding: "0 20px",
display: "flex",
flexDirection: "row",
alignItems: "center",
height: "54px",
borderTopLeftRadius: theme.customs?.radius.medium,
borderTopRightRadius: theme.customs?.radius.medium,
}));
const Container = styled(Box)(({ theme }) => ({
border: `1px solid ${theme.palette.border?.primary}`,
borderRadius: theme.customs?.radius.medium,
}));
const Content = styled(Stack)(({ theme }) => ({
backgroundColor: theme.palette.surface?.primary,
padding: "20px",
borderBottomLeftRadius: theme.customs?.radius.medium,
borderBottomRightRadius: theme.customs?.radius.medium,
}));
|