add

fatin-webEfo · Jan 21, 2025 · 6526a01 · 6526a01
1 parent 18e91c9
commit 6526a01
Show file tree

Hide file tree

Showing 11 changed files with 619 additions and 199 deletions.
diff --git a/index.html b/index.html
@@ -6,26 +6,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SquareCraft</title>
 
-    <!-- Open Graph Meta Tags for Link Previews -->
     <meta property="og:title" content="SquareCraft" />
     <meta property="og:description" content="SquareCraft - Unleash the potential of Squarespace with powerful plugins and customization tools." />
     <meta property="og:image" content="https://i.ibb.co.com/sjrCv0p/Logo-Blue.png" />
     <meta property="og:url" content="https://charming-dragon-fe5e7c.netlify.app" />
     <meta property="og:type" content="website" />
 
-    <!-- Twitter Card Tags (Optional) -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="SquareCraft" />
     <meta name="twitter:description" content="SquareCraft - Unleash the potential of Squarespace with powerful plugins and customization tools." />
     <meta name="twitter:image" content="https://i.ibb.co.com/sjrCv0p/Logo-Blue.png" />
 
-    <!-- Additional SEO Meta Tags -->
     <meta name="description" content="SquareCraft - Unleash the potential of Squarespace with powerful plugins and customization tools." />
     <meta name="keywords" content="Squarespace, plugins, website customization, SquareCraft" />
     <meta name="author" content="SquareCraft Team" />
   </head>
-  <body class="">
+  <body class="bg-[#F7F5F7]">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "localforage": "^1.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/src/components/LoadTest/LoadTest.jsx b/src/components/LoadTest/LoadTest.jsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import axios from "axios";
+
+const LoadTest = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [responses, setResponses] = useState([]);
+
+  // Send a GET request to the base API
+  const sendRequest = async () => {
+    try {
+      const response = await axios.get("http://localhost:8000"); // Your base API
+      setResponses((prev) => [...prev, response.data]);
+    } catch (error) {
+      console.error("Request failed:", error);
+    }
+  };
+
+  // Start the load test by sending 50 requests per second
+  const startLoadTest = () => {
+    setIsLoading(true);
+
+    // Interval to send requests at 50 requests per second
+    const interval = setInterval(() => {
+      sendRequest();
+    }, 20); // Every 20ms to simulate 50 requests per second
+
+    // Stop after 10 seconds
+    setTimeout(() => {
+      clearInterval(interval);
+      setIsLoading(false);
+    }, 10000); // Run the test for 10 seconds
+  };
+
+  return (
+    <div>
+      <h2>API Load Test</h2>
+      <button onClick={startLoadTest} disabled={isLoading}>
+        {isLoading ? "Testing..." : "Start Load Test"}
+      </button>
+
+      <h3>Responses</h3>
+      <pre>{JSON.stringify(responses, null, 2)}</pre>
+    </div>
+  );
+};
+
+export default LoadTest;
diff --git a/src/hooks/ButtonLoader/ButtonLoader.jsx b/src/hooks/ButtonLoader/ButtonLoader.jsx
@@ -0,0 +1,17 @@
+
+const ButtonLoader = ( ) => {
+
+    return (
+      <div className="flex justify-center items-center ">
+        <div
+          className={`border-4 h-6 w-6 border-t-orange-700 bg-orange-500 border-orange-500 border-solid rounded-full`}
+          style={{
+            animation: "spin 1s linear infinite",
+          }}
+        ></div>
+      </div>
+    );
+  };
+
+  export default ButtonLoader;
+
diff --git a/src/hooks/Notification/Notification.jsx b/src/hooks/Notification/Notification.jsx
@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+// eslint-disable-next-line react/prop-types
+const Notification = ({ message, type, onClose, className = "", icon = null }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setVisible(true);
+
+    const timer = setTimeout(() => {
+      setVisible(false);
+      setTimeout(onClose, 500); 
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div
+      className={`fixed bottom-5 right-5 flex items-center gap-3 p-4 rounded-md text-white text-sm shadow-lg transition-all duration-500 transform ${
+        visible ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
+      } ${type === "success" ? "bg-green-500" : "bg-red-500"} ${className}`}
+    >
+      {icon && <img src={icon} alt="icon" className="w-6 h-6" />}
+      <span>{message}</span>
+    </div>
+  );
+};
+
+export default Notification;