update: algolia api integration

docs/intro.mdx

@@ -0,0 +1,20 @@
+---
+sidebar_position: 1
+description: Get started with Docusaurus in less than 50 minutes.
+sidebar_label: Introduction
+title: Introduction
+---
+
+import CustomTag from "@site/src/components/TagsComponents/CustomTag";
+import Callout from "@site/src/components/Callout/Callout";
+import { useState } from "react";
+import ToastMessage from "@site/src/components/Toast/Toast";
+import React, { useState } from "react";
+
+# Toast Message
+
+# Example MDX File
+
+Some content before the toast message.
+
+<ToastMessage />

docusaurus.config.js

@@ -53,9 +53,9 @@ const config = {
     ({
       // Replace with your project's social card
       algolia: {
-        apiKey: "f60c2ae59dd332b43d4efef67ad46e87",
-        indexName: "30-days-of-cpp",
-        appId: "OU047TL2DP",
+        apiKey: "4eadbd9906c2db99f8c4d53bb7202144",
+        indexName: "subhadipbhowmik",
+        appId: "SKRAQTXG41",
         contextualSearch: true,
         placeholder: "Search Tutorial",
       },

src/components/Callout/Callout.js

@@ -0,0 +1,18 @@
+// Callout.js
+import React from "react";
+
+const Callout = ({ type, children }) => {
+  const styles = {
+    border: "2px solid",
+    padding: "10px",
+    borderRadius: "5px",
+    backgroundColor:
+      type === "info" ? "#e2f0ff" : type === "warning" ? "#ffe5b3" : "#d9f7be",
+    borderColor:
+      type === "info" ? "#1890ff" : type === "warning" ? "#faad14" : "#52c41a",
+  };
+
+  return <div style={styles}>{children}</div>;
+};
+
+export default Callout;

src/components/Toast/Toast.js

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import "./toastStyles.css"; // Import CSS file for styling
+
+const ToastMessage = () => {
+  const [showToast, setShowToast] = useState(false);
+
+  const toggleToast = () => {
+    setShowToast(!showToast);
+    // Automatically hide the toast after 3 seconds (3000 milliseconds)
+    setTimeout(() => {
+      setShowToast(false);
+    }, 3000);
+  };
+
+  return (
+    <div>
+      <button onClick={toggleToast}>Show Toast</button>
+
+      {showToast && (
+        <div className="toast">
+          <span className="toast-text">This is a toast message!</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ToastMessage;

src/components/Toast/toastStyles.css

@@ -0,0 +1,17 @@
+/* toastStyles.css */
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 5px;
+  z-index: 9999;
+}
+
+.toast-text {
+  font-size: 16px;
+}