feat: add JSON validation utility with detailed error messages

src/pages/tools/json/validateJson/index.tsx

@@ -0,0 +1,98 @@
+import { Box } from '@mui/material';
+import React, { useRef, useState, useEffect } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import ToolInfo from '@components/ToolInfo';
+import Separator from '@components/Separator';
+import ToolExamples, {
+  CardExampleType
+} from '@components/examples/ToolExamples';
+import { FormikProps } from 'formik';
+import { validateJson } from './servcie';
+import { ToolComponentProps } from '@tools/defineTool';
+
+const exampleCards: CardExampleType<{}>[] = [
+  {
+    title: 'Valid JSON Object',
+    description: 'This example shows a correctly formatted JSON object.',
+    sampleText: `{
+  "name": "John",
+  "age": 30,
+  "city": "New York"
+}`,
+    sampleResult: '✅ Valid JSON',
+    sampleOptions: {}
+  },
+  {
+    title: 'Invalid JSON Missing Quotes',
+    description:
+      'This example shows an invalid JSON structure where property names are missing quotes.',
+    sampleText: `{
+  name: "John",
+  age: 30,
+  city: "New York"
+}`,
+    sampleResult: "❌ Error: Expected property name or '}' in JSON ",
+    sampleOptions: {}
+  },
+  {
+    title: 'Invalid JSON with Trailing Comma',
+    description:
+      'This example shows an invalid JSON with a trailing comma at the end of the object.',
+    sampleText: `{
+  "name": "John",
+  "age": 30,
+  "city": "New York",
+}`,
+    sampleResult: '❌ Error: Expected double-quoted property name',
+    sampleOptions: {}
+  }
+];
+
+export default function ValidateJson({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+  const formRef = useRef<FormikProps<{}>>(null);
+
+  useEffect(() => {
+    if (input) {
+      compute(input);
+    }
+  }, [input]);
+
+  const compute = (input: string) => {
+    const { valid, error } = validateJson(input);
+    if (valid) {
+      setResult('✅ Valid JSON');
+    } else {
+      setResult(`❌ ${error}`);
+    }
+  };
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+        }
+        result={<ToolTextResult title="Validation Result" value={result} />}
+      />
+
+      <ToolInfo
+        title="What is JSON Validation?"
+        description="JSON validation checks the syntax and structure of a JSON file to ensure it follows proper JSON format."
+      />
+
+      <Separator backgroundColor="#5581b5" margin="50px" />
+
+      <ToolExamples
+        title={title}
+        exampleCards={exampleCards}
+        getGroups={() => []}
+        formRef={formRef}
+        setInput={setInput}
+      />
+    </Box>
+  );
+}