feat: add input of long url on homepage

src/pages/Home.tsx

@@ -1,8 +1,45 @@
-import React, {useState } from 'react';
+import React, { useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../app/hooks';
+import {
+    shortenUrl,
+    selectShortUrl,
+    selectUrlStatus,
+    selectUrlError,
+    clearShortUrl,
+} from '../features/url/urlSlice';
 
 const Home: React.FC = () => {
+    /* component level state */
+    const [longUrl, setLongUrl] = useState('');
+
+    /* global state */
+    const dispatch = useAppDispatch();
+
+    const shortUrl = useAppSelector(selectShortUrl);
+    const status = useAppSelector(selectUrlStatus);
+    const error = useAppSelector(selectUrlError);
+
+    /* methods */
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' && longUrl.trim() !== '') {
+            dispatch(shortenUrl(longUrl));
+        }
+    };
+
     return (
-        <div>Hello World!</div>
+        <div className="min-h-screen flex items-center justify-center bg-purple-100">
+            <div className="text-center space-y-6">
+                <h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1>
+                <input
+                type="text"
+                placeholder="Enter your long URL here"
+                value={longUrl}
+                onChange={(e) => setLongUrl(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="w-80 p-3 rounded-md text-lg border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
+                />
+            </div>
+        </div>
     );
 };