Skip to content

Commit 546afb7

Browse files
larakhaslarakhas
committed
Implementerte React frontend,
laget Logginn- og URLForkorterside(ikke ferdig)
1 parent 0da1e5a commit 546afb7

File tree

5 files changed

+139
-31
lines changed

5 files changed

+139
-31
lines changed

‎.idea/jarRepositories.xml

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/App.tsx

+8-30
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,13 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
import Url from "./Url";
2+
//import Logginn from "./Logginn";
53

64
function App() {
7-
const [count, setCount] = useState(0)
5+
return (
6+
<>
87

9-
return (
10-
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
31-
</>
32-
)
8+
<Url />
9+
</>
10+
);
3311
}
3412

35-
export default App
13+
export default App;

‎frontend/src/Logginn.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
const Logginn = () => {
2+
return (
3+
<div className="min-h-screen flex flex-col justify-between bg-white">
4+
<nav className="flex justify-between items-center px-8 py-4 bg-white shadow">
5+
<img src="/nav-logo.png" alt="NAV logo" className="h-10" />
6+
<div className="flex space-x-8 text-gray-700 font-medium">
7+
<a href="#">Hjem</a>
8+
<a href="#">Privat</a>
9+
<a href="#">Arbeidsgiver</a>
10+
<a href="#">Samarbeidspartnere</a>
11+
<input placeholder="Søk" className="border rounded px-2" />
12+
</div>
13+
</nav>
14+
15+
<main className="flex-grow flex flex-col items-center justify-center">
16+
<h1 className="text-3xl font-bold mb-8">Velkommen tilbake!</h1>
17+
<div className="flex flex-col gap-4">
18+
<input
19+
type="text"
20+
placeholder="Brukernavn"
21+
className="border border-gray-400 px-4 py-2 rounded w-80"
22+
/>
23+
<input
24+
type="password"
25+
placeholder="Passord"
26+
className="border border-gray-400 px-4 py-2 rounded w-80"
27+
/>
28+
<button className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded w-80">
29+
Logg inn
30+
</button>
31+
</div>
32+
</main>
33+
34+
<footer className="bg-gray-200 p-6">
35+
<div className="grid grid-cols-4 gap-4 text-sm">
36+
<ul>
37+
<li>Kontakt</li>
38+
<li>Kontakt oss</li>
39+
<li>NAV i ditt fylke</li>
40+
<li>Kurs fra NAV</li>
41+
<li>Klage og tilbakemeldinger</li>
42+
</ul>
43+
<ul>
44+
<li>NAV og samfunn</li>
45+
<li>Statistikk, analyse og FoU</li>
46+
<li>Lover og regler (lovdata.no)</li>
47+
<li>Om NAV</li>
48+
</ul>
49+
<ul>
50+
<li>English</li>
51+
<li>Sámegiella</li>
52+
</ul>
53+
<ul>
54+
<li>Personvern og informasjonskapsler</li>
55+
<li>Endre samtykke for informasjonskapsler</li>
56+
<li>Svindelforsøk og sikkerhet</li>
57+
<li>Tilgjengelighet</li>
58+
</ul>
59+
</div>
60+
</footer>
61+
</div>
62+
);
63+
};
64+
65+
export default Logginn;

‎frontend/src/Url.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { useState } from 'react';
2+
3+
const Url = () => {
4+
const [url, setUrl] = useState('');
5+
6+
return (
7+
<div className="min-h-screen flex flex-col bg-gray-50">
8+
<nav className="flex justify-between items-center px-8 py-4 bg-white shadow">
9+
<img src="/nav-logo.png" alt="NAV logo" className="h-10" />
10+
<div className="flex space-x-8 text-gray-700 font-medium">
11+
<a href="#">Hjem</a>
12+
<a href="#">Privat</a>
13+
<a href="#">Arbeidsgiver</a>
14+
<a href="#">Samarbeidspartnere</a>
15+
<input placeholder="Søk" className="border rounded px-2" />
16+
<button className="text-indigo-600">Logg ut</button>
17+
</div>
18+
</nav>
19+
20+
<main className="flex-grow flex flex-col items-center justify-center p-8">
21+
<div className="bg-blue-100 p-8 rounded-lg shadow-lg w-full max-w-2xl">
22+
<h2 className="text-2xl font-semibold flex items-center gap-2 mb-4">
23+
🔗 URL-forkorter.no
24+
</h2>
25+
<p className="mb-4 text-sm">
26+
Kontroller lenken din her!
27+
</p>
28+
<div className="flex items-center gap-2">
29+
<input
30+
type="text"
31+
placeholder="Lim inn lenken her"
32+
className="border border-gray-300 px-4 py-2 rounded-md flex-grow"
33+
value={url}
34+
onChange={(e) => setUrl(e.target.value)}
35+
/>
36+
<button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
37+
Forkort
38+
</button>
39+
</div>
40+
<div className="mt-6 text-sm">
41+
Din lenke er godkjent og leder til:
42+
<a href="#" className="text-blue-600 ml-1 underline">
43+
lenke.no/kjempelanglenke
44+
</a>
45+
</div>
46+
<button className="mt-4 bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md">
47+
Logg inn
48+
</button>
49+
</div>
50+
</main>
51+
52+
<footer className="bg-white p-4 text-center text-sm">
53+
<a href="#" className="text-gray-500 hover:text-gray-700">⬅️ Gå tilbake til hjemmesiden</a>
54+
</footer>
55+
</div>
56+
);
57+
};
58+
59+
export default Url;

‎frontend/tsconfig.app.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"noUnusedLocals": true,
2121
"noUnusedParameters": true,
2222
"noFallthroughCasesInSwitch": true,
23-
"noUncheckedSideEffectImports": true
23+
"noUncheckedSideEffectImports": true,
24+
"allowSyntheticDefaultImports": true
2425
},
2526
"include": ["src"]
2627
}

0 commit comments

Comments
 (0)