feat: Add button to call /api/random and populate textarea

src/app/[locale]/(auth)/api/random/route.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from 'next/server';
+
+import { logger } from '@/libs/Logger';
+
+// import env variables
+
+export const POST = async (_: Request) => {
+  const { CLOUD_URL, DATABASE_URL } = process.env;
+
+  const resp = await fetch(`${CLOUD_URL}/random`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      dbPath: DATABASE_URL,
+    }),
+  });
+  logger.info('resp:', resp);
+  const data = await resp.json();
+
+  try {
+    logger.info(`A new random has been created ${JSON.stringify(data)}`);
+
+    return NextResponse.json({
+      data,
+    });
+  } catch (error) {
+    logger.error(error, 'An error occurred while creating a search');
+
+    return NextResponse.json({}, { status: 500 });
+  }
+};

src/components/SearchBox.tsx

@@ -315,6 +315,25 @@ const SearchBox = () => {
         Search the Web
       </button>
 
+      {/* a btn to call /api/random and put the text in the textarea */}
+      <button
+        type="button"
+        onClick={async () => {
+          const response = await fetch('/api/random', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          });
+          const data = await response.json();
+          console.log('Random data:', data);
+          setTextAreaValue(data.data.data);
+        }}
+        className="mb-2 me-2 mt-4 w-full rounded-lg bg-gray-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+      >
+        Random
+      </button>
+
       {showLoading && (
         <div className="flex justify-center">
           <div