kfir/tiny-url-NextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

adding style to the eyes

Browse source
This commit is contained in:
Kfir Dayan 2024-01-21 13:40:58 +02:00
parent aa575f3cc1
commit 5584f4f83a
3 changed files with 40 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/pages/_app.tsx Normal file
View file

@ -0,0 +1,10 @@
// src/pages/_app.tsx
import type { AppProps } from 'next/app';
import '../../styles/globals.css';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;

51
src/pages/index.tsx
View file

@ -9,6 +9,7 @@ const HomePage = () => {
const handleSubmit = async (e: { preventDefault: () => void; }) => { const handleSubmit = async (e: { preventDefault: () => void; }) => {
e.preventDefault(); e.preventDefault();
setTinyUrl('');
setError(''); setError('');
try { try {
const response = await fetch('http://localhost:3000/url-shortener/shorten', { const response = await fetch('http://localhost:3000/url-shortener/shorten', {
@ -21,7 +22,7 @@ const HomePage = () => {
const data = await response.json(); const data = await response.json();
if (response.ok && data.status === 201) { if (response.ok && data.status === 201) {
setTinyUrl(data.data); // Just store the tiny URL part setTinyUrl(data.data);
} else { } else {
setError(data.error || 'An error occurred while shortening the URL'); setError(data.error || 'An error occurred while shortening the URL');
} }
@ -31,29 +32,31 @@ const HomePage = () => {
}; };
return ( return (
<div className="container mx-auto p-4"> <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<h1 className="text-2xl font-bold mb-4">Shorten Your URL</h1> <div className="bg-white p-6 rounded shadow-md w-full max-w-md">
<form onSubmit={handleSubmit} className="mb-4"> <h1 className="text-2xl font-bold mb-4 text-center">Shorten Your URL</h1>
<input <form onSubmit={handleSubmit} className="mb-4">
type="url" <input
className="border p-2 mr-2 w-full" type="url"
placeholder="Enter URL here" className="border border-gray-300 p-2 w-full rounded mb-2"
value={url} placeholder="Enter URL here"
onChange={(e) => setUrl(e.target.value)} value={url}
/> onChange={(e) => setUrl(e.target.value)}
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> />
Shorten <button className="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
</button> Shorten
</form> </button>
{tinyUrl && ( </form>
<p className="text-green-500"> {tinyUrl && (
Shortened URL: <p className="text-green-600 bg-green-100 p-2 rounded">
<a href={`http://localhost:3000/url-shortener/${tinyUrl}`} target="_blank" rel="noopener noreferrer"> Shortened URL:
{tinyUrl} <a href={`http://localhost:3000/url-shortener/${tinyUrl}`} target="_blank" rel="noopener noreferrer" className="underline ml-1">
</a> {tinyUrl}
</p> </a>
)} </p>
{error && <p className="text-red-500">{error}</p>} )}
{error && <p className="text-red-600 bg-red-100 p-2 rounded">{error}</p>}
</div>
</div> </div>
); );
}; };

3
styles/globals.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;