Adding Test page (#30)

* UI button variant update

* fixing mobile menu bug

* adding test page

* typo

* code format

* fix hook use

* update icon in Test page

package.json

@@ -23,6 +23,7 @@
     "@total-typescript/ts-reset": "^0.5.1",
     "@upstash/ratelimit": "^0.4.4",
     "@upstash/redis": "^1.25.1",
+    "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
@@ -59,4 +60,4 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.2.2"
   }
-}
+}

src/app/layout.tsx

@@ -26,7 +26,7 @@ export default function RootLayout({
           <Providers>
             <Navbar />
             <Toaster position='bottom-right' />
-            <main> {/* Adjust top padding to account for navbar height */}
+            <main> 
               {children}
             </main>
           </Providers>

src/app/page.tsx

@@ -31,7 +31,7 @@ export default function Home() {
 
               <Paragraph className='mx-auto max-w-xl mb-6 text-center lg:text-left'>
                 With the Text Similarity API, you can easily determine the
-                similarity between two pieces of text with a free{' '}
+                similarity between two pieces of text with a free
                 <Link
                   href='/login'
                   className='underline underline-offset-2 text-black dark:text-dark-indigo'>

src/app/test/layout.tsx

@@ -0,0 +1,9 @@
+export default function layout({
+    children,
+  }: {
+    children: React.ReactNode
+  }){
+    return<div className="pt-12 px-4">
+        {children}
+    </div>
+  }

src/app/test/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+import { ChangeEvent, FC, useState } from "react";
+import axios from "axios";
+import { Button, CircularProgress } from "@mui/material";
+import { CheckIcon } from "lucide-react";
+
+const Page = () => {
+  const [text1, setText1] = useState("");
+  const [text2, setText2] = useState("");
+  const [similarity, setSimilarity] = useState<null | number>(null);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    setLoading(true);
+    e.preventDefault();
+
+    try {
+      const { data } = await axios.post("/api/similarity/similarity", {
+        text1,
+        text2,
+      });
+      if (data.error) {
+        setErrorMessage(data.error || "An unexpected error occurred");
+        setSimilarity(null);
+      } else {
+        setSimilarity(Number((data.similarity * 100).toFixed(2)));
+        setErrorMessage("");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInputChange =
+    (setter: React.Dispatch<React.SetStateAction<string>>) =>
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      setter(e.target.value);
+      setErrorMessage("");
+      setSimilarity(null);
+    };
+
+  return (
+    <div className="p-2">
+      <div className="flex flex-col items-center">
+        <h1 className="text-2xl font-bold mb-4">Text Similarity Analysis</h1>
+        <p className="max-w-md text-center mb-5">
+          Discover the degree of similarity between any two texts with our Text
+          Similarity API
+        </p>
+
+        {errorMessage ? (
+          <div className="my-2 mt-5 h-5 w-full max-w-2xl  text-red-500 text-center">
+            {errorMessage}
+          </div>
+        ) : (
+          <div
+            className={`relative my-2 mt-5 h-4 w-full max-w-2xl rounded-full border-2 ${
+              similarity !== null
+                ? "border-gray-200 dark:border-gray-600"
+                : "border-transparent"
+            }`}
+            style={{
+              opacity: similarity !== null ? "1" : "0",
+            }}
+          >
+            <div
+              className="h-3 rounded-full bg-green-400 transition-opacity duration-500"
+              style={{
+                width: similarity !== null ? `${similarity}%` : "0%",
+                opacity: similarity !== null ? "1" : "0",
+              }}
+            ></div>
+            {similarity !== null && (
+              <div className="absolute left-1/2 top-[7px] transform -translate-x-1/2 -translate-y-1/2 text-xs ">
+                {similarity}%
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="sm:flex gap-4 my-4 w-full max-w-2xl">
+          <div className="flex-1 mb-4">
+            <p className="font-bold text-md mb-2 pl-1">First Text</p>
+            <textarea
+              className="w-full p-2 rounded shadow border-none outline-none dark:bg-gray-700"
+              rows={10}
+              placeholder="Enter first text here"
+              value={text1}
+              onChange={handleInputChange(setText1)}
+            />
+          </div>
+          <div className="flex-1 mb-4">
+          <p className="font-bold text-md mb-2 pl-1">Second Text</p>
+            <textarea
+              className="w-full p-2 rounded shadow border-none outline-none dark:bg-gray-700"
+              rows={10}
+              placeholder="Enter second text here"
+              value={text2}
+              onChange={handleInputChange(setText2)}
+            />
+          </div>
+        </div>
+
+        <button
+      disabled={!text1 || !text2 || loading}
+      onClick={handleSubmit}
+      className="px-6 my-2 py-2 rounded shadow bg-indigo-600 hover:bg-indigo-600 transition-colors flex items-center"
+      style={{ color: "white", borderColor: "white" }}
+    >
+      {loading ? (
+        <CircularProgress size={20} style={{ color: "#ffffff" }} />
+      ) : (
+        <CheckIcon className="h-5 w-5 mr-1" /> 
+      )}
+      {loading ? "Checking..." : "Check Similarity"}
+    </button>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

src/components/DashboardNavLink.tsx

@@ -45,6 +45,17 @@ const DashboardNavLink = ({ session }: { session: boolean }) => {
         Documentation
       </Link>
 
+      <Link
+        href='/test'
+        className={`${buttonVariants({
+          variant: 'outline',
+          size: 'fit',
+          isActive: currentRoute === '/test'
+        })}`}
+      >
+        Test
+      </Link>
+
       {session ? (
         <>
           <SignOutButton />

src/components/DocumentationTabs.tsx

@@ -1,35 +1,51 @@
-'use client'
-import { FC } from 'react'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/Tabs'
-import CodeSnippet from './CodeSnippet'
-import { nodejs, php, python } from '@/const/code-snippet'
-import SimpleBar from 'simplebar-react';
-import 'simplebar/dist/simplebar.min.css';
-
+"use client";
+import { FC } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/Tabs";
+import CodeSnippet from "./CodeSnippet";
+import { nodejs, php, python } from "@/const/code-snippet";
+import SimpleBar from "simplebar-react";
+import "simplebar/dist/simplebar.min.css";
 
 const DocumentationTabs: FC = () => {
-    return <Tabs defaultValue='nodejs' className='w-full lg:text-left text-center'>
-        <TabsList className='pl-0 mb-5 flex justify-center'>
-            <TabsTrigger value={'nodejs'}> Node JS</TabsTrigger>
-            <TabsTrigger value={'php'}> Php</TabsTrigger>
-            <TabsTrigger value={'python'}> Python</TabsTrigger>
-        </TabsList>
-        <TabsContent value={'nodejs'}>
-            <SimpleBar>
-            <CodeSnippet animated CodeSnippet={nodejs} language={'nodejs'} show></CodeSnippet>
-            </SimpleBar>
+  return (
+    <Tabs defaultValue="nodejs" className="w-full lg:text-left text-center text-sm  md:text-md lg:text-lg">
+      <TabsList className="pl-0 mb-5 flex justify-center">
+        <TabsTrigger  className="text-xs sm:text:sm md:text-md lg:text-lg min-w-[70px] sm:min-w-[80px] md:min-w-[100px]" value={"nodejs"}> Node JS</TabsTrigger>
+        <TabsTrigger className="text-xs sm:text:sm md:text-md lg:text-lg min-w-[70px] sm:min-w-[80px] md:min-w-[100px]"  value={"php"}> Php</TabsTrigger>
+        <TabsTrigger className="text-xs sm:text:sm md:text-md lg:text-lg min-w-[70px] sm:min-w-[80px] md:min-w-[100px]"  value={"python"}> Python</TabsTrigger>
+      </TabsList>
+      <TabsContent value={"nodejs"}>
+        <SimpleBar>
+          <CodeSnippet
+            animated
+            CodeSnippet={nodejs}
+            language={"nodejs"}
+            show
+          ></CodeSnippet>
+        </SimpleBar>
       </TabsContent>
-        <TabsContent value={'php'}>
-            <SimpleBar>
-            <CodeSnippet animated CodeSnippet={php} language={'php'} show></CodeSnippet>
-            </SimpleBar>
+      <TabsContent value={"php"}>
+        <SimpleBar>
+          <CodeSnippet
+            animated
+            CodeSnippet={php}
+            language={"php"}
+            show
+          ></CodeSnippet>
+        </SimpleBar>
       </TabsContent>
-        <TabsContent value={'python'}>
-            <SimpleBar>
-            <CodeSnippet animated CodeSnippet={python} language={'python'} show></CodeSnippet>
-            </SimpleBar>
+      <TabsContent value={"python"}>
+        <SimpleBar>
+          <CodeSnippet
+            animated
+            CodeSnippet={python}
+            language={"python"}
+            show
+          ></CodeSnippet>
+        </SimpleBar>
       </TabsContent>
-    </Tabs> 
-}
+    </Tabs>
+  );
+};
 
-export default DocumentationTabs
+export default DocumentationTabs;

src/components/mobileMenu.tsx

@@ -4,7 +4,6 @@ import { Home, FileText, LogIn, LogOut, Info, LayoutDashboard, Loader2, Menu, Us
 import { signOut, useSession } from 'next-auth/react'
 import Link from 'next/link'
 import { useState } from 'react'
-import { Button } from './ui/Button'
 
 import {
     DropdownMenu,

src/pages/api/similarity/similarity.ts

@@ -0,0 +1,41 @@
+import axios from "axios";
+import { NextApiRequest, NextApiResponse } from "next";
+
+
+type ApiResponseData = {
+    similarity?: number; 
+    message?: string; 
+  };
+
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<ApiResponseData>
+  ) {
+    if (req.method === 'POST') {
+      const { text1, text2 } = req.body;
+
+      try {
+        const response = await axios.post('https://textsimilarityapi-eight.vercel.app/api/v1/similarity', {
+          text1,
+          text2,
+        }, {
+          headers: { Authorization: process.env.TEST_API_KEY }, 
+        });
+
+        res.status(200).json(response.data);
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          console.error(error);
+          res.status(error.response?.status || 500).json({ message: 'Error fetching similarity' });
+        } else {
+          console.error('An unexpected error occurred:', error);
+          res.status(500).json({ message: 'An unexpected error occurred' });
+        }
+      }
+    } else {
+      res.setHeader('Allow', ['POST']);
+      res.status(405).end(`Method ${req.method} Not Allowed`);
+    }
+  }
+