crayonix/minxa.lol
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve home component look

Browse Source
This commit is contained in:
Giovani
2025-07-25 03:35:03 +00:00
parent 469f393f1e
commit f82126bf81
1 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/pages/Home.tsx
View File

@@ -22,7 +22,13 @@ const Home: React.FC = () => {
/* methods */ /* methods */
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && url.trim() !== '') { if (e.key === 'Enter') {
handleSubmit();
}
};
const handleSubmit = () => {
if (url.trim() !== '') {
dispatch(shortenUrl(url)); dispatch(shortenUrl(url));
} }
}; };
@@ -35,52 +41,75 @@ const Home: React.FC = () => {
} }
}; };
const handleClear = () => {
dispatch(clearShortUrl())
};
return ( return (
<div className="min-h-screen flex items-center justify-center bg-purple-100"> <div className="min-h-screen bg-purple-100 px-4 py-10 flex flex-col items-center">
{/* Top Section (Static Position) */}
<div className="text-center space-y-6"> <div className="text-center space-y-6">
<h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1> <h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1>
<input <div className="flex items-center justify-center space-x-2">
type="text" <input
placeholder="https://example.com/my-long-url" type="text"
value={url} placeholder="https://example.com/my-long-url"
onChange={(e) => setUrl(e.target.value)} value={url}
onKeyDown={handleKeyDown} onChange={(e) => setUrl(e.target.value)}
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" 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"
/>
<button
onClick={handleSubmit}
className="w-12 h-12 bg-orange-500 text-white text-xl font-bold rounded-md hover:bg-orange-600 transition"
>
↵
</button>
</div>
{/* Loading State */}
{status === 'loading' && ( {status === 'loading' && (
<p className="text-gray-600 text-sm">Shortening your URL...</p> <p className="text-gray-600 text-sm">Shortening your URL...</p>
)} )}
{/* Error Message */}
{status === 'failed' && ( {status === 'failed' && (
<p className="text-red-600 text-sm">{error}</p> <p className="text-red-600 text-sm">{error}</p>
)} )}
</div>
{/* Short URL Display */} {/* Spacer to ensure result doesn't push up the input */}
{status === 'succeeded' && shortUrl && ( <div className="h-10" />
<div className="space-y-2">
<p className="text-green-700 font-medium text-lg"> {/* Result Section (Appears Below) */}
Your short URL: {status === 'succeeded' && shortUrl && (
<a <div className="w-full max-w-md border-t border-gray-300 pt-6 text-center">
href={shortUrl} <p className="text-green-700 font-medium text-lg">
target="_blank" Your short URL:
rel="noopener noreferrer" <a
className="underline ml-2" href={shortUrl}
> target="_blank"
{shortUrl} rel="noopener noreferrer"
</a> className="underline ml-2"
</p> >
{shortUrl}
</a>
</p>
<div className="flex justify-center space-x-2 mt-4">
<button <button
onClick={handleCopy} onClick={handleCopy}
className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition"> className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition"
Copy to Clipboard >
Copy to Clipboard
</button>
<button
onClick={handleClear}
className="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400 transition"
>
Clear
</button> </button>
</div> </div>
)} </div>
</div> )}
</div> </div>
); );
}; };