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">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <h1 className="text-2xl font-bold mb-4">Shorten Your URL</h1>
+      <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 p-2 mr-2 w-full"
+            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="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          <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-500">
+          <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">
+            <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-500">{error}</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;