-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.tsx
99 lines (92 loc) · 3.54 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React, {useState} from 'react';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import logo from './logo.svg';
import baselhack from './assests/images/logohack.png';
import './App.css';
import { QuestionCard } from './component/question-card';
import { UserForm } from './component/user-form';
import Language from './components/Language';
import Difficulty from './components/Difficulty';
import Questions from './components/Questions';
const App: React.FunctionComponent = () => {
const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
const [selectedDifficulty, setSelectedDifficulty] = useState<string | null>(
null
);
const [apiUrl, setApiUrl] = useState<string | null>(null);
const handleLanguageSelect = (language: string) => {
setSelectedLanguage(language);
};
const handleDifficultySelect = (difficulty: string) => {
setSelectedDifficulty(difficulty);
// difficulty lvl depending on users choice
if (difficulty === 'Beginner') {
setApiUrl('http://localhost:3000/expert.json');
} else if (difficulty === 'Advanced') {
setApiUrl('http://localhost:3000/advanced.json');
} else if (difficulty === 'Expert') {
setApiUrl('https://www.api.org/sda125');
}
};
return (
<body>
<header className="bg-neutral">
<img src={baselhack} alt="Logo HackBasel" className="App-logo" />
<div className="title"> Certifever help </div>
</header>
<div className="App">
{!selectedLanguage ? (
<Language onSelectLanguage={handleLanguageSelect} />
) : !selectedDifficulty ? (
<Difficulty onSelectDifficulty={handleDifficultySelect} />
) : apiUrl ? (
<Questions apiUrl={apiUrl} />
) : (
<div>
<h1>Uploading...</h1>
</div>
)}
</div>
<div className="bg-white my-5 w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
<UserForm onFormSubmit={(formData) => console.log(formData)}></UserForm>
<main className=" md:w-2/3 lg:w-3/4 px-5 py-40">
<h1 className="text-2xl md:text-4xl">Welcome to Certifever</h1>
<p>
Certifever help you to learn very quick any content. You can upload
a PDF with a topic or you can choice a topic and you will get some
questions for learning the topic
</p>
</main>
</div>
<footer className="footer p-10 bg-neutral text-neutral-content">
<nav>
<header className="footer-title">AI Prompters Team</header>
<a className="link link-hover">Anurag Grag</a>
<a className="link link-hover">Liam Hoo</a>
<a className="link link-hover">Martin Mraz</a>
<a href='/' className="link link-hover">Ibrahim Kuray</a>
</nav>
<nav>
<header className="footer-title">AI Prompters Team</header>
<a className="link link-hover">Chris Vogel</a>
<a className="link link-hover">David Zimmerli</a>
<a className="link link-hover">Joel Zimmerli</a>
</nav>
<nav>
<header className="footer-title">Created 2023</header>
<a className="link link-hover" href="https://www.baselhack.ch/">
BaselHack
</a>
<a className="link link-hover">Project Idea of Roland Brand</a>
<a
className="link link-hover"
href="https://github.com/zimmj/certifever-front-end"
>
GitHub Reposotory
</a>
</nav>
</footer>
</body>
);
};
export default App;