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;

19
src/pages/index.tsx
View file

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

3
styles/globals.css Normal file
View file

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