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