mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-05-19 07:58:46 -05:00
gorkem-bwl
7874439e4c
- Use AlertCircle for error and AlertTriangle for warning icons - Use Icon color prop instead of CSS fill for Lucide stroke-based icons - Replace wildcard import with explicit named imports for tree-shaking - Replace sx prop with style prop on Icon components - Add Trash2 to Icon component imports
74 lines
2.0 KiB
React
74 lines
2.0 KiB
React
import "./check.css";
|
|
import PropTypes from "prop-types";
|
|
import Icon from "../Icon";
|
|
import { Box, Stack, Typography } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
/**
|
|
* `Check` is a functional React component that displays a check icon and a label.
|
|
*
|
|
* @component
|
|
* @param {Object} props - The properties that define the `Check` component.
|
|
* @param {string} props.text - The text to be displayed as the label next to the check icon.
|
|
* @param {'info' | 'error' | 'success'} [props.variant='info'] - The variant of the check component, affecting its styling.
|
|
* @param {boolean} [props.outlined] - Whether the check icon should be outlined or not.
|
|
*
|
|
* @example
|
|
* // To use this component, import it and use it in your JSX like this:
|
|
* <Check text="Your Text Here" />
|
|
*
|
|
* @returns {React.Element} The `Check` component with a check icon and a label, defined by the `text` prop.
|
|
*/
|
|
const Check = ({ text, noHighlightText, variant = "info", outlined = false }) => {
|
|
const theme = useTheme();
|
|
const colors = {
|
|
success: theme.palette.success.main,
|
|
error: theme.palette.error.main,
|
|
info: theme.palette.info.border,
|
|
};
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
className="check"
|
|
gap={outlined ? theme.spacing(6) : theme.spacing(4)}
|
|
alignItems="center"
|
|
>
|
|
{outlined ? (
|
|
<Icon
|
|
name="CheckCircle"
|
|
size={20}
|
|
/>
|
|
) : (
|
|
<Icon
|
|
name="Check"
|
|
size={16}
|
|
color={colors[variant]}
|
|
/>
|
|
)}
|
|
<Typography
|
|
component="span"
|
|
sx={{
|
|
color:
|
|
variant === "info"
|
|
? theme.palette.primary.contrastTextSecondary
|
|
: colors[variant],
|
|
opacity: 0.9,
|
|
fontWeight: 450,
|
|
}}
|
|
>
|
|
{noHighlightText && <Typography component="span">{noHighlightText}</Typography>}{" "}
|
|
{text}
|
|
</Typography>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
Check.propTypes = {
|
|
text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
noHighlightText: PropTypes.string,
|
|
variant: PropTypes.oneOf(["info", "error", "success"]),
|
|
outlined: PropTypes.bool,
|
|
};
|
|
|
|
export default Check;
|