elia/shortenit
1
0
Fork 0
Code Issues 7 Pull requests 1 Releases Packages Wiki Activity

Fix a small bug within the URL shortener component

Browse source
This commit is contained in:
Anthony Al Lazkani 2024-12-25 22:36:09 +02:00
parent 4947b55fe8
commit ebff4c020f
1 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/components/URLShortener/URLShortener.tsx
View file

@ -76,39 +76,41 @@ export default function URLShortener() {
} }
} }
return ( return (
<div className="URLShortener-component"> <>
<div className="left-side"> <div className="URLShortener-component">
<h1>Paste the URL</h1> <div className="left-side">
<form className="url-input" onSubmit={ShortenIt}> <h1>Paste the URL</h1>
<input <form className="url-input" onSubmit={ShortenIt}>
type="text" <input
placeholder="www.example.com" type="text"
aria-label="URL input field" placeholder="http://www.example.com"
value={url} aria-label="URL input field"
onChange={(e) => setUrl(e.target.value)} value={url}
/> onChange={(e) => setUrl(e.target.value)}
<button type="submit">Shorten It</button> />
</form> <button type="submit">Shorten It</button>
</form>
{shortenedUrl && showInput && ( {shortenedUrl && showInput && (
<div className="url-input shortened"> <div className="url-input shortened">
<input type="text" readOnly value={shortenedUrl} /> <input type="text" readOnly value={shortenedUrl} />
<button onClick={copyURL}>Copy</button> <button onClick={copyURL}>Copy</button>
</div> </div>
)} )}
</div>
<div className="right-side">
<div className="right-side-title">
<h1>Shorten It</h1>
</div> </div>
<div className="right-side-content"> <div className="right-side">
<p> <div className="right-side-title">
Shortenit is a free and open-source URL shortening service designed <h1>Shorten It</h1>
for simplicity and efficiency. </div>
</p> <div className="right-side-content">
<p>
Shortenit is a free and open-source URL shortening service designed
for simplicity and efficiency.
</p>
</div>
</div> </div>
</div> </div>
<ToastContainer /> <ToastContainer />
</div> </>
); );
} }