Merge branch 'main' of github.com:devvsakib/DevToolsArena into onLive

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run dev
+
+

src/components/DevAreaTools/JSONFormatter.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Input, Button, Alert } from 'antd';
-import JSONPretty from 'react-json-pretty'; // You might need to install this library for pretty JSON output
-import 'react-json-pretty/themes/monikai.css'; // Optional: import a theme for JSONPretty
+import JSONPretty from 'react-json-pretty'; 
+import 'react-json-pretty/themes/monikai.css'; 
 import { toast } from 'sonner';
 
 const JSONFormatter = () => {
@@ -39,29 +39,29 @@ const JSONFormatter = () => {
     };
 
     return (
-        <div className='p-5'>
-            <h2 className='text-xl font-bold mb-4'>JSON Formatter</h2>
+        <div className="p-5">
+            <h2 className="text-xl font-bold mb-4">JSON Formatter</h2>
             <Input.TextArea
                 value={jsonInput}
                 onChange={(e) => setJsonInput(e.target.value)}
                 placeholder="Paste your JSON here"
                 autoSize={{ minRows: 10 }}
-                className='mb-4 dark:bg-dark dark:text-white'
+                className="mb-4 dark:bg-dark dark:text-white"
             />
-            <div className='mb-4'>
-                <Button onClick={handleFormat} type="primary" className='mr-2'>
+            <div className="flex gap-2 mb-4">
+                <Button onClick={handleFormat} type="primary" className="mb-2">
                     Format JSON
                 </Button>
-                <Button onClick={handleClear} type="default">
+                <Button onClick={handleClear} type="default" className="mb-2">
                     Clear
                 </Button>
-                <Button onClick={handleCopy} type="default">
+                <Button onClick={handleCopy} type="default" className="mb-2">
                     Copy to Clipboard
                 </Button>
             </div>
-            {error && <Alert message="Error" description={error} type="error" className='mb-4' />}
+            {error && <Alert message="Error" description={error} type="error" className="mb-4" />}
             {formattedJson && (
-                <div className='bg-dark p-4 rounded-md'>
+                <div className="bg-dark p-4 rounded-md">
                     <JSONPretty data={formattedJson} onCopy={(data) => navigator.clipboard.writeText(JSON.stringify(data, null, 2))} />
                 </div>
             )}

src/components/Error/ErrorCard.jsx

@@ -1,25 +1,18 @@
 import React, { useState } from "react";
-import useColorBorderBox from "../../hooks/useColorBorderBox"
-import {
-  MdOutlineArrowRightAlt,
-} from "react-icons/md";
+import useColorBorderBox from "../../hooks/useColorBorderBox";
+import { MdOutlineArrowRightAlt } from "react-icons/md";
 import ErrorType from "./ErrorType";
 import "./css/style.css";
-
 import ModalSolutions from "./ModalSolutions";
 
 function ErrorCard({ error }) {
-
   const [readMore, setReadMore] = useState(false);
   const [isOpenModal, setOpenModal] = useState(false);
   const [solution, setSolution] = useState("");
-  const { borderColor } = useColorBorderBox(error)
+  const { borderColor } = useColorBorderBox(error);
 
   return (
-    <div
-      id="main-div"
-      className={borderColor + " relative"}
-    >
+    <div id="main-div" className={borderColor + " relative"}>
       <h3 className="title">{error.title}</h3>
       <div className="absolute h-full -right-2 -top-2">
         <ErrorType type={error.type} />
@@ -45,7 +38,7 @@ function ErrorCard({ error }) {
       </div>
 
       <button
-        className="flex mt-2 items-center gap-2 px-3 py-2 border border-white/40 rounded-lg hover:border-primary hover:text-primary"
+        className="flex mt-2 items-center gap-2 px-3 py-2 border border-black dark:border-white rounded-lg hover:border-primary hover:text-primary"
         onClick={() => setOpenModal((prev) => !prev)}
       >
         <span className="text-xs">Solution</span>

src/components/Search/SearchInput.jsx

@@ -59,7 +59,6 @@ function SearchInput({ search, setSearch, setType }) {
             setType("");
           }}
         />
-
         <button
           className={`focus:outline-none ${!search ? "hidden" : "block"}`}
           onClick={() => setSearch("")}