adding style to the eyes

src/pages/_app.tsx

@@ -0,0 +1,10 @@
+// src/pages/_app.tsx
+
+import type { AppProps } from 'next/app';
+import '../../styles/globals.css';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

src/pages/index.tsx

@@ -9,6 +9,7 @@ const HomePage = () => {
 
   const handleSubmit = async (e: { preventDefault: () => void; }) => {
     e.preventDefault();
+    setTinyUrl('');
     setError('');
     try {
       const response = await fetch('http://localhost:3000/url-shortener/shorten', {
@@ -21,7 +22,7 @@ const HomePage = () => {
 
       const data = await response.json();
       if (response.ok && data.status === 201) {
-        setTinyUrl(data.data);  // Just store the tiny URL part
+        setTinyUrl(data.data);
       } else {
         setError(data.error || 'An error occurred while shortening the URL');
       }
@@ -31,29 +32,31 @@ const HomePage = () => {
   };
 
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">Shorten Your URL</h1>
-      <form onSubmit={handleSubmit} className="mb-4">
-        <input
-          type="url"
-          className="border p-2 mr-2 w-full"
-          placeholder="Enter URL here"
-          value={url}
-          onChange={(e) => setUrl(e.target.value)}
-        />
-        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-          Shorten
-        </button>
-      </form>
-      {tinyUrl && (
-        <p className="text-green-500">
-          Shortened URL: 
-          <a href={`http://localhost:3000/url-shortener/${tinyUrl}`} target="_blank" rel="noopener noreferrer">
-            {tinyUrl}
-          </a>
-        </p>
-      )}
-      {error && <p className="text-red-500">{error}</p>}
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white p-6 rounded shadow-md w-full max-w-md">
+        <h1 className="text-2xl font-bold mb-4 text-center">Shorten Your URL</h1>
+        <form onSubmit={handleSubmit} className="mb-4">
+          <input
+            type="url"
+            className="border border-gray-300 p-2 w-full rounded mb-2"
+            placeholder="Enter URL here"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+          />
+          <button className="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+            Shorten
+          </button>
+        </form>
+        {tinyUrl && (
+          <p className="text-green-600 bg-green-100 p-2 rounded">
+            Shortened URL: 
+            <a href={`http://localhost:3000/url-shortener/${tinyUrl}`} target="_blank" rel="noopener noreferrer" className="underline ml-1">
+              {tinyUrl}
+            </a>
+          </p>
+        )}
+        {error && <p className="text-red-600 bg-red-100 p-2 rounded">{error}</p>}
+      </div>
     </div>
   );
 };

styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;