feat: implement ValidatedToolResult component for improved validation feedback in Epoch Converter tool

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<ValidatedToolResultProps> = ({
+  isValid,
+  hasInteracted,
+  errorMessage = 'Invalid input.',
+  children
+}) => (
+  <div style={{ position: 'relative', minHeight: 80 }}>
+    {hasInteracted && isValid === false && (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          zIndex: 2,
+          pointerEvents: 'auto',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'transparent'
+        }}
+      >
+        <Alert
+          severity="error"
+          style={{
+            width: '80%',
+            opacity: 0.85,
+            textAlign: 'center',
+            pointerEvents: 'none'
+          }}
+        >
+          {errorMessage}
+        </Alert>
+      </div>
+    )}
+    <div
+      style={{
+        filter: hasInteracted && isValid === false ? 'blur(1px)' : 'none',
+        transition: 'filter 0.2s'
+      }}
+    >
+      {hasInteracted && isValid === false
+        ? React.cloneElement(children as React.ReactElement, { value: '' })
+        : children}
+    </div>
+  </div>
+);
+
+export default ValidatedToolResult;

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={
-        <div style={{ position: 'relative', minHeight: 80 }}>
-          {hasInteracted && isValid === false && (
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                zIndex: 2,
-                pointerEvents: 'auto',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: 'transparent'
-              }}
-            >
-              <Alert
-                severity="error"
-                style={{
-                  width: '80%',
-                  opacity: 0.85,
-                  textAlign: 'center',
-                  pointerEvents: 'none'
-                }}
-              >
-                Invalid input. Please enter a valid epoch timestamp or date
-                string.
-              </Alert>
-            </div>
-          )}
-          <div
-            style={{
-              filter: hasInteracted && isValid === false ? 'blur(1px)' : 'none',
-              transition: 'filter 0.2s'
-            }}
-          >
-            <ToolTextResult
-              value={hasInteracted && isValid === false ? '' : result}
-            />
-          </div>
-        </div>
+        <ValidatedToolResult
+          isValid={isValid}
+          hasInteracted={hasInteracted}
+          errorMessage="Invalid input. Please enter a valid epoch timestamp or date string."
+        >
+          <ToolTextResult value={result} />
+        </ValidatedToolResult>
       }
       initialValues={initialValues}
       exampleCards={exampleCards}