Skip to content

Commit 2c89104

Browse files
author
Alexandra Zwinger
committed
Make SettingsModal.ts
more responsive
1 parent 034ac0a commit 2c89104

File tree

3 files changed

+206
-207
lines changed

3 files changed

+206
-207
lines changed

‎src/components/SettingsModal.tsx‎

Lines changed: 167 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,189 +1,191 @@
1-
import React, { useState } from 'react';
1+
import React, {useState} from 'react';
22
import '../styles/Modal.css';
3-
import { CuteButton } from './CuteButton';
3+
import {CuteButton} from './CuteButton';
44

55
interface ModalProps {
6-
isOpen: boolean;
7-
onClose: () => void;
6+
isOpen: boolean;
7+
onClose: () => void;
88
}
99

1010
interface Checkbox {
11-
id: number;
12-
text: string;
13-
checked: boolean;
11+
id: number;
12+
text: string;
13+
checked: boolean;
1414
}
1515

1616
interface Chapter {
17-
id: number;
18-
title: string;
19-
checkboxes: Checkbox[];
17+
id: number;
18+
title: string;
19+
checkboxes: Checkbox[];
2020
}
2121

22-
const Modal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
23-
const [chapters, setChapters] = useState<Chapter[]>([
24-
{
25-
id: 1,
26-
title: 'Kapitel 1',
27-
checkboxes: [
28-
{ id: 1, text: 'Checkbox 1', checked: false },
29-
{ id: 2, text: 'Checkbox 2', checked: false },
30-
{ id: 3, text: 'Checkbox 3', checked: false },
31-
],
32-
},
33-
]);
34-
35-
const toggleCheckbox = (chapterId: number, checkboxId: number) => {
36-
setChapters((prevChapters) =>
37-
prevChapters.map((chapter) =>
38-
chapter.id === chapterId
39-
? {
40-
...chapter,
41-
checkboxes: chapter.checkboxes.map((checkbox) =>
42-
checkbox.id === checkboxId
43-
? { ...checkbox, checked: !checkbox.checked }
44-
: checkbox
45-
),
46-
}
47-
: chapter
48-
)
49-
);
50-
};
22+
const Modal: React.FC<ModalProps> = ({isOpen, onClose}) => {
23+
const [chapters, setChapters] = useState<Chapter[]>([
24+
{
25+
id: 1,
26+
title: 'Kapitel 1',
27+
checkboxes: [
28+
{id: 1, text: 'Checkbox 1', checked: false},
29+
{id: 2, text: 'Checkbox 2', checked: false},
30+
{id: 3, text: 'Checkbox 3', checked: false},
31+
],
32+
},
33+
]);
34+
35+
const toggleCheckbox = (chapterId: number, checkboxId: number) => {
36+
setChapters((prevChapters) =>
37+
prevChapters.map((chapter) =>
38+
chapter.id === chapterId
39+
? {
40+
...chapter,
41+
checkboxes: chapter.checkboxes.map((checkbox) =>
42+
checkbox.id === checkboxId
43+
? {...checkbox, checked: !checkbox.checked}
44+
: checkbox
45+
),
46+
}
47+
: chapter
48+
)
49+
);
50+
};
5151

52-
const addCheckbox = (chapterId: number) => {
53-
const newCheckbox = {
54-
id: Date.now(),
55-
text: `Checkbox ${Math.random()}`,
56-
checked: false,
52+
const addCheckbox = (chapterId: number) => {
53+
const newCheckbox = {
54+
id: Date.now(),
55+
text: `Checkbox ${Math.random()}`,
56+
checked: false,
57+
};
58+
59+
setChapters((prevChapters) =>
60+
prevChapters.map((chapter) =>
61+
chapter.id === chapterId
62+
? {...chapter, checkboxes: [...chapter.checkboxes, newCheckbox]}
63+
: chapter
64+
)
65+
);
5766
};
5867

59-
setChapters((prevChapters) =>
60-
prevChapters.map((chapter) =>
61-
chapter.id === chapterId
62-
? { ...chapter, checkboxes: [...chapter.checkboxes, newCheckbox] }
63-
: chapter
64-
)
65-
);
66-
};
67-
68-
const deleteCheckbox = (chapterId: number, checkboxId: number) => {
69-
setChapters((prevChapters) =>
70-
prevChapters.map((chapter) =>
71-
chapter.id === chapterId
72-
? {
73-
...chapter,
74-
checkboxes: chapter.checkboxes.filter(
75-
(checkbox) => checkbox.id !== checkboxId
76-
),
77-
}
78-
: chapter
79-
)
80-
);
81-
};
68+
const deleteCheckbox = (chapterId: number, checkboxId: number) => {
69+
setChapters((prevChapters) =>
70+
prevChapters.map((chapter) =>
71+
chapter.id === chapterId
72+
? {
73+
...chapter,
74+
checkboxes: chapter.checkboxes.filter(
75+
(checkbox) => checkbox.id !== checkboxId
76+
),
77+
}
78+
: chapter
79+
)
80+
);
81+
};
8282

83-
const addChapter = () => {
84-
const newChapter = {
85-
id: Date.now(),
86-
title: `Kapitel ${chapters.length + 1}`,
87-
checkboxes: [],
83+
const addChapter = () => {
84+
const newChapter = {
85+
id: Date.now(),
86+
title: `Kapitel ${chapters.length + 1}`,
87+
checkboxes: [],
88+
};
89+
setChapters((prev) => [...prev, newChapter]);
8890
};
89-
setChapters((prev) => [...prev, newChapter]);
90-
};
91-
92-
return (
93-
<div className="modal-overlay" onClick={onClose}>
94-
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
95-
<p className="text-2xl font-bold text-white text-left mt-3 ml-3 mb-6">
96-
Lernfortschritt
97-
</p>
98-
99-
{chapters.map((chapter) => (
100-
<div key={chapter.id}>
101-
<p className="text-xl text-white text-left mt-2 ml-3 mb-4">
102-
{chapter.title}
103-
</p>
104-
<div className="checkbox-group ml-3 mb-4">
105-
{chapter.checkboxes.map((checkbox) => (
106-
<div key={checkbox.id} className="checkbox-item">
107-
<label className="text-white">
108-
<input
109-
type="checkbox"
110-
checked={checkbox.checked}
111-
onChange={() => toggleCheckbox(chapter.id, checkbox.id)}
91+
92+
return (
93+
<div className="modal-overlay" onClick={onClose}>
94+
<div className="modal-content min-w-[300px] w-[650px] max-w-[90%]" onClick={(e) => e.stopPropagation()}>
95+
<p className="text-2xl font-bold text-white text-left mt-3 ml-3 mb-2">
96+
Lernfortschritt
97+
</p>
98+
{chapters.map((chapter) => (
99+
<div key={chapter.id}>
100+
<div className="flex gap-4 items-center mt-2 ml-3 mb-4">
101+
<p className="text-xl text-white text-left">
102+
{chapter.title}
103+
</p>
104+
<button
105+
className="delete-btn"
106+
onClick={() => {
107+
}}
108+
>
109+
x
110+
</button>
111+
</div>
112+
<div className="checkbox-group ml-8 mb-4">
113+
{chapter.checkboxes.map((checkbox) => (
114+
<div key={checkbox.id} className="checkbox-item w-[65%]">
115+
<input
116+
type="checkbox"
117+
className={"min-w-[30px]"}
118+
checked={checkbox.checked}
119+
onChange={() => toggleCheckbox(chapter.id, checkbox.id)}
120+
/>
121+
<input
122+
type="text"
123+
className={"flex-grow px-2"}
124+
value={checkbox.text}
125+
onChange={(e) => {
126+
const newText = e.target.value;
127+
setChapters((prevChapters) =>
128+
prevChapters.map((ch) =>
129+
ch.id === chapter.id
130+
? {
131+
...ch,
132+
checkboxes: ch.checkboxes.map((c) =>
133+
c.id === checkbox.id
134+
? {...c, text: newText}
135+
: c
136+
),
137+
}
138+
: ch
139+
)
140+
);
141+
}}
142+
/>
143+
<button
144+
className="delete-btn"
145+
onClick={() => deleteCheckbox(chapter.id, checkbox.id)}
146+
>
147+
x
148+
</button>
149+
</div>
150+
))}
151+
</div>
152+
153+
<div className="add-checkbox-container">
154+
<button
155+
className="add-checkbox-btn"
156+
onClick={() => addCheckbox(chapter.id)}
157+
>
158+
+
159+
</button>
160+
<label className="text-white">Checkbox </label>
161+
162+
<button className="add-chapter-btn" onClick={addChapter}>
163+
+
164+
</button>
165+
<label className="text-white">Kapitel </label>
166+
</div>
167+
</div>
168+
))}
169+
170+
<div className="mt-auto flex justify-end gap-4">
171+
<CuteButton
172+
onClick={onClose}
173+
text={'Abbrechen'}
174+
textColor={'#CAE8FF'}
175+
bgColor={'#425E74'}
176+
classname={'text-base'}
112177
/>
113-
<input
114-
type="text"
115-
value={checkbox.text}
116-
onChange={(e) => {
117-
const newText = e.target.value;
118-
setChapters((prevChapters) =>
119-
prevChapters.map((ch) =>
120-
ch.id === chapter.id
121-
? {
122-
...ch,
123-
checkboxes: ch.checkboxes.map((c) =>
124-
c.id === checkbox.id
125-
? { ...c, text: newText }
126-
: c
127-
),
128-
}
129-
: ch
130-
)
131-
);
132-
}}
178+
<CuteButton
179+
text={'Speichern'}
180+
textColor={'#e3f1ef'}
181+
bgColor={'#506D69'}
182+
classname={'text-2xl'}
133183
/>
134-
</label>
135-
<button
136-
className="delete-btn"
137-
onClick={() => deleteCheckbox(chapter.id, checkbox.id)}
138-
>
139-
x
140-
</button>
141184
</div>
142-
))}
143-
</div>
144185

145-
<div className="add-checkbox-container">
146-
<button
147-
className="add-checkbox-btn"
148-
onClick={() => addCheckbox(chapter.id)}
149-
>
150-
+
151-
</button>
152-
<label className="text-white">Checkbox </label>
153-
154-
<button className="add-chapter-btn" onClick={addChapter}>
155-
+
156-
</button>
157-
<label className="text-white">Kapitel </label>
158-
159-
160-
</div>
161-
162-
163-
</div>
164-
))}
165-
166-
167-
168-
169-
<div className="mt-auto flex justify-end gap-4">
170-
<CuteButton
171-
onClick={onClose}
172-
text={'Abbrechen'}
173-
textColor={'#CAE8FF'}
174-
bgColor={'#425E74'}
175-
classname={'text-base'}
176-
/>
177-
<CuteButton
178-
text={'Speichern'}
179-
textColor={'#e3f1ef'}
180-
bgColor={'#506D69'}
181-
classname={'text-2xl'}
182-
/>
186+
</div>
183187
</div>
184-
</div>
185-
</div>
186-
);
188+
);
187189
};
188190

189191
export default Modal;

0 commit comments

Comments
 (0)