diff --git a/src/components/result/ValidatedToolResult.tsx b/src/components/result/ValidatedToolResult.tsx new file mode 100644 index 0000000..c1a0b86 --- /dev/null +++ b/src/components/result/ValidatedToolResult.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { Alert } from '@mui/material'; + +interface ValidatedToolResultProps { + isValid: boolean | null; + hasInteracted: boolean; + errorMessage?: string; + children: React.ReactNode; +} + +const ValidatedToolResult: React.FC = ({ + isValid, + hasInteracted, + errorMessage = 'Invalid input.', + children +}) => ( +
+ {hasInteracted && isValid === false && ( +
+ + {errorMessage} + +
+ )} +
+ {hasInteracted && isValid === false + ? React.cloneElement(children as React.ReactElement, { value: '' }) + : children} +
+
+); + +export default ValidatedToolResult; diff --git a/src/pages/tools/time/epoch-converter/index.tsx b/src/pages/tools/time/epoch-converter/index.tsx index ff151d8..210a087 100644 --- a/src/pages/tools/time/epoch-converter/index.tsx +++ b/src/pages/tools/time/epoch-converter/index.tsx @@ -8,6 +8,7 @@ import { GetGroupsType } from '@components/options/ToolOptions'; import { CardExampleType } from '@components/examples/ToolExamples'; import { main, epochToDate, dateToEpoch } from './service'; import { InitialValuesType } from './types'; +import ValidatedToolResult from '@components/result/ValidatedToolResult'; const initialValues: InitialValuesType = {}; @@ -89,48 +90,13 @@ export default function EpochConverter({ } resultComponent={ -
- {hasInteracted && isValid === false && ( -
- - Invalid input. Please enter a valid epoch timestamp or date - string. - -
- )} -
- -
-
+ + + } initialValues={initialValues} exampleCards={exampleCards}