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 eb9dfb7a9b
commit b184c639b0
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 */
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));
}
};
@@ -35,52 +41,75 @@ const Home: React.FC = () => {
}
};
const handleClear = () => {
dispatch(clearShortUrl())
};
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">
<h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1>
<input
type="text"
placeholder="https://example.com/my-long-url"
value={url}
onChange={(e) => setUrl(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 className="flex items-center justify-center space-x-2">
<input
type="text"
placeholder="https://example.com/my-long-url"
value={url}
onChange={(e) => setUrl(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"
/>
<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' && (
<p className="text-gray-600 text-sm">Shortening your URL...</p>
)}
{/* Error Message */}
{status === 'failed' && (
<p className="text-red-600 text-sm">{error}</p>
)}
</div>
{/* Short URL Display */}
{status === 'succeeded' && shortUrl && (
<div className="space-y-2">
<p className="text-green-700 font-medium text-lg">
Your short URL:
<a
href={shortUrl}
target="_blank"
rel="noopener noreferrer"
className="underline ml-2"
>
{shortUrl}
</a>
</p>
{/* Spacer to ensure result doesn't push up the input */}
<div className="h-10" />
{/* Result Section (Appears Below) */}
{status === 'succeeded' && shortUrl && (
<div className="w-full max-w-md border-t border-gray-300 pt-6 text-center">
<p className="text-green-700 font-medium text-lg">
Your short URL:
<a
href={shortUrl}
target="_blank"
rel="noopener noreferrer"
className="underline ml-2"
>
{shortUrl}
</a>
</p>
<div className="flex justify-center space-x-2 mt-4">
<button
onClick={handleCopy}
className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition">
Copy to Clipboard
className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition"
>
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>
</div>
)}
</div>
</div>
)}
</div>
);
};