diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx index b43754fa9..1b246566f 100644 --- a/Client/src/Components/Check/Check.jsx +++ b/Client/src/Components/Check/Check.jsx @@ -12,6 +12,7 @@ import { useTheme } from "@emotion/react"; * @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: @@ -47,6 +48,7 @@ const Check = ({ text, variant = "info", outlined = false }) => { Check.propTypes = { text: PropTypes.string.isRequired, variant: PropTypes.oneOf(["info", "error", "success"]), + outlined: PropTypes.bool, }; export default Check; diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx index 8df84feba..e975c445a 100644 --- a/Client/src/Components/Fallback/index.jsx +++ b/Client/src/Components/Fallback/index.jsx @@ -1,3 +1,4 @@ +import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { Stack, Typography } from "@mui/material"; import Skeleton from "../../assets/Images/create-placeholder.svg?react"; @@ -6,6 +7,17 @@ import Check from "../Check/Check"; import { useNavigate } from "react-router-dom"; import "./index.css"; +/** + * Fallback component to display a fallback UI with a title, a list of checks, and a navigation button. + * + * @param {Object} props - The component props. + * @param {string} props.title - The title to be displayed in the fallback UI. + * @param {Array} props.checks - An array of strings representing the checks to display. + * @param {string} [props.link="/"] - The link to navigate to. + * + * @returns {JSX.Element} The rendered fallback UI. + */ + const Fallback = ({ title, checks, link = "/" }) => { const theme = useTheme(); const navigate = useNavigate(); @@ -17,10 +29,7 @@ const Fallback = ({ title, checks, link = "/" }) => { > - + A {title} is used to: {checks.map((check, index) => ( @@ -41,4 +50,10 @@ const Fallback = ({ title, checks, link = "/" }) => { ); }; +Fallback.propTypes = { + title: PropTypes.string.isRequired, + checks: PropTypes.arrayOf(PropTypes.string).isRequired, + link: PropTypes.string, +}; + export default Fallback;