Skip to content

Commit 37d5cff

Browse files
michal92299michal92299
authored
Update Settings.tsx
1 parent d5e89dc commit 37d5cff

1 file changed

Lines changed: 249 additions & 126 deletions

File tree

‎source-code/components/Settings.tsx‎

Lines changed: 249 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,269 @@
1-
import React from 'react';
2-
import { Smartphone, Github, ShieldCheck, Bell, ChevronRight, Palette, Layers, Info } from 'lucide-react';
3-
import { ThemeId, Theme } from '../types';
1+
import React, { useState, useEffect } from 'react';
2+
import { Smartphone, Github, ShieldCheck, Bell, ChevronRight, Palette, Layers, Info, ExternalLink, Globe, MessageSquare, Youtube, Languages } from 'lucide-react';
3+
import { ThemeId, Theme, Language } from '../types';
44
import { THEMES } from '../utils/theme';
5+
import { TRANSLATIONS } from '../utils/translations';
56

67
interface SettingsProps {
78
currentTheme: ThemeId;
89
setTheme: (id: ThemeId) => void;
10+
language: Language;
11+
setLanguage: (lang: Language) => void;
912
}
1013

11-
export const Settings: React.FC<SettingsProps> = ({ currentTheme, setTheme }) => {
12-
return (
13-
<div className="space-y-6 pb-20">
14-
<div className="px-6 pt-2">
15-
<h2 className="text-3xl font-mono font-bold text-white mb-1">SYSTEM_CONFIG</h2>
16-
<p className="text-muted text-sm">Personalize your experience</p>
14+
const SocialLink = ({ href, label, icon: Icon, subLabel }: { href: string, label: string, icon: any, subLabel?: string }) => (
15+
<a
16+
href={href}
17+
target="_blank"
18+
rel="noreferrer"
19+
className="p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
20+
>
21+
<div className="flex items-center gap-3">
22+
<div className="p-2 rounded-lg bg-background text-muted group-hover:text-primary transition-colors">
23+
<Icon size={18} />
24+
</div>
25+
<div>
26+
<p className="text-sm font-medium text-text">{label}</p>
27+
{subLabel && <p className="text-xs text-muted">{subLabel}</p>}
28+
</div>
1729
</div>
30+
<ExternalLink size={14} className="text-muted/50" />
31+
</a>
32+
);
1833

19-
{/* Theme Section */}
20-
<section className="px-4">
21-
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl p-5 shadow-xl">
22-
<div className="flex items-center gap-3 mb-4">
23-
<Palette className="text-primary" size={20} />
24-
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">Theme Engine</h3>
25-
</div>
34+
export const Settings: React.FC<SettingsProps> = ({ currentTheme, setTheme, language, setLanguage }) => {
35+
const [notificationsEnabled, setNotificationsEnabled] = useState(false);
36+
const t = TRANSLATIONS[language];
2637

27-
<div className="grid grid-cols-2 gap-3">
28-
{Object.values(THEMES).map((theme: Theme) => (
29-
<button
30-
key={theme.id}
31-
onClick={() => setTheme(theme.id)}
32-
className={`
33-
relative overflow-hidden rounded-xl p-3 border text-left transition-all duration-200
34-
${currentTheme === theme.id
35-
? 'border-primary bg-primary/10 shadow-[0_0_15px_-5px_rgb(var(--color-primary))]'
36-
: 'border-white/5 bg-background/50 hover:bg-white/5'}
37-
`}
38-
>
39-
<div className="flex items-center justify-between mb-2">
40-
<div
41-
className="w-8 h-8 rounded-lg shadow-lg"
42-
style={{ backgroundColor: `rgb(${theme.colors.primary})` }}
43-
/>
44-
{currentTheme === theme.id && (
45-
<div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
46-
)}
47-
</div>
48-
<p className={`text-xs font-bold ${currentTheme === theme.id ? 'text-white' : 'text-muted'}`}>
49-
{theme.name}
50-
</p>
51-
</button>
52-
))}
53-
</div>
54-
</div>
55-
</section>
38+
useEffect(() => {
39+
const saved = localStorage.getItem('hackeros_notifications');
40+
setNotificationsEnabled(saved === 'true');
41+
}, []);
5642

57-
{/* Preferences Section */}
58-
<section className="px-4">
59-
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden shadow-xl">
60-
<div className="p-4 border-b border-white/5 flex items-center gap-3">
61-
<Layers className="text-primary" size={20} />
62-
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">Preferences</h3>
63-
</div>
43+
const toggleNotifications = () => {
44+
const newState = !notificationsEnabled;
45+
setNotificationsEnabled(newState);
46+
localStorage.setItem('hackeros_notifications', String(newState));
47+
};
6448

65-
<div className="divide-y divide-white/5">
66-
<div className="p-4 flex items-center justify-between group cursor-pointer hover:bg-white/5 transition-colors">
67-
<div className="flex items-center gap-3">
68-
<div className="p-2 rounded-lg bg-background text-muted">
69-
<Bell size={18} />
70-
</div>
71-
<div>
72-
<p className="text-sm font-medium text-text">Release Notifications</p>
73-
<p className="text-xs text-muted">Get alerts for new HackerOS versions</p>
74-
</div>
75-
</div>
76-
<div className="relative inline-flex h-6 w-11 items-center rounded-full bg-primary">
77-
<span className="inline-block h-4 w-4 transform translate-x-6 rounded-full bg-white transition-transform"/>
78-
</div>
79-
</div>
49+
const languages: { code: Language; label: string; flag: string }[] = [
50+
{ code: 'pl', label: 'Polski', flag: '🇵🇱' },
51+
{ code: 'en', label: 'English', flag: '🇺🇸' },
52+
{ code: 'de', label: 'Deutsch', flag: '🇩🇪' },
53+
{ code: 'es', label: 'Español', flag: '🇪🇸' },
54+
{ code: 'fr', label: 'Français', flag: '🇫🇷' },
55+
];
8056

81-
<div className="p-4 flex items-center justify-between group cursor-pointer hover:bg-white/5 transition-colors">
82-
<div className="flex items-center gap-3">
83-
<div className="p-2 rounded-lg bg-background text-muted">
84-
<Smartphone size={18} />
85-
</div>
86-
<div>
87-
<p className="text-sm font-medium text-text">Cache Management</p>
88-
<p className="text-xs text-muted">0.4 MB used</p>
89-
</div>
90-
</div>
91-
<ChevronRight size={16} className="text-muted" />
92-
</div>
93-
</div>
94-
</div>
95-
</section>
57+
return (
58+
<div className="space-y-6 pb-24">
59+
<div className="px-6 pt-2">
60+
<h2 className="text-3xl font-mono font-bold text-white mb-1">{t.header_config}</h2>
61+
<p className="text-muted text-sm">{t.sub_config}</p>
62+
</div>
9663

97-
{/* About Section */}
98-
<section className="px-4">
99-
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden shadow-xl">
100-
<div className="p-4 border-b border-white/5 flex items-center gap-3">
101-
<Info className="text-primary" size={20} />
102-
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">Information</h3>
103-
</div>
64+
{/* Language Section */}
65+
<section className="px-4">
66+
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl p-5 shadow-xl">
67+
<div className="flex items-center gap-3 mb-4">
68+
<Languages className="text-primary" size={20} />
69+
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">{t.settings_lang}</h3>
70+
</div>
71+
72+
<div className="grid grid-cols-2 gap-2">
73+
{languages.map((lang) => (
74+
<button
75+
key={lang.code}
76+
onClick={() => setLanguage(lang.code)}
77+
className={`
78+
flex items-center gap-3 px-4 py-3 rounded-xl border transition-all duration-200
79+
${language === lang.code
80+
? 'border-primary bg-primary/10 text-white'
81+
: 'border-white/5 bg-background/50 text-muted hover:bg-white/5'}
82+
`}
83+
>
84+
<span className="text-xl">{lang.flag}</span>
85+
<span className="text-sm font-bold">{lang.label}</span>
86+
</button>
87+
))}
88+
</div>
89+
</div>
90+
</section>
10491

105-
<div className="divide-y divide-white/5">
106-
<a
107-
href="https://github.com/HackerOS-Linux-System"
108-
target="_blank"
109-
rel="noreferrer"
110-
className="p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
111-
>
112-
<div className="flex items-center gap-3">
113-
<div className="p-2 rounded-lg bg-background text-muted">
114-
<Github size={18} />
115-
</div>
116-
<div>
117-
<p className="text-sm font-medium text-text">Source Code</p>
118-
<p className="text-xs text-muted">github.com/HackerOS-Linux-System</p>
119-
</div>
120-
</div>
121-
<ChevronRight size={16} className="text-muted" />
122-
</a>
92+
{/* Theme Section */}
93+
<section className="px-4">
94+
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl p-5 shadow-xl">
95+
<div className="flex items-center gap-3 mb-4">
96+
<Palette className="text-primary" size={20} />
97+
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">{t.settings_theme}</h3>
98+
</div>
99+
100+
<div className="grid grid-cols-2 gap-3">
101+
{Object.values(THEMES).map((theme: Theme) => (
102+
<button
103+
key={theme.id}
104+
onClick={() => setTheme(theme.id)}
105+
className={`
106+
relative overflow-hidden rounded-xl p-3 border text-left transition-all duration-200
107+
${currentTheme === theme.id
108+
? 'border-primary bg-primary/10 shadow-[0_0_15px_-5px_rgb(var(--color-primary))]'
109+
: 'border-white/5 bg-background/50 hover:bg-white/5'}
110+
`}
111+
>
112+
<div className="flex items-center justify-between mb-2">
113+
<div
114+
className="w-8 h-8 rounded-lg shadow-lg"
115+
style={{ backgroundColor: `rgb(${theme.colors.primary})` }}
116+
/>
117+
{currentTheme === theme.id && (
118+
<div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
119+
)}
120+
</div>
121+
<p className={`text-xs font-bold ${currentTheme === theme.id ? 'text-white' : 'text-muted'}`}>
122+
{theme.name}
123+
</p>
124+
</button>
125+
))}
126+
</div>
127+
</div>
128+
</section>
123129

124-
<div className="p-4 flex items-center justify-between">
125-
<div className="flex items-center gap-3">
126-
<div className="p-2 rounded-lg bg-background text-muted">
127-
<ShieldCheck size={18} />
128-
</div>
129-
<div>
130-
<p className="text-sm font-medium text-text">Build Version</p>
131-
<p className="text-xs text-muted">v1.0.2-stable (Android)</p>
132-
</div>
133-
</div>
134-
</div>
135-
</div>
136-
</div>
137-
</section>
130+
{/* Links / Socials */}
131+
<section className="px-4">
132+
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden shadow-xl">
133+
<div className="p-4 border-b border-white/5 flex items-center gap-3">
134+
<Globe className="text-primary" size={20} />
135+
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">{t.settings_social}</h3>
136+
</div>
137+
138+
<div className="divide-y divide-white/5">
139+
<SocialLink
140+
href="https://discord.com/invite/8yHNcBaEKy"
141+
label="Discord Community"
142+
icon={MessageSquare}
143+
subLabel="Join the server"
144+
/>
145+
<SocialLink
146+
href="https://x.com/hackeros_linux"
147+
label="X / Twitter"
148+
icon={ExternalLink}
149+
subLabel="@hackeros_linux"
150+
/>
151+
<SocialLink
152+
href="https://linuxiarze.pl/distro-hackeros/"
153+
label="Linuxiarze.pl"
154+
icon={Globe}
155+
/>
156+
<SocialLink
157+
href="https://distrowatch.com/table.php?distribution=hackeros"
158+
label="DistroWatch"
159+
icon={Globe}
160+
/>
161+
<SocialLink
162+
href="https://www.reddit.com/r/HackerOS_/"
163+
label="Reddit"
164+
icon={ExternalLink}
165+
subLabel="r/HackerOS_"
166+
/>
167+
<SocialLink
168+
href="https://www.youtube.com/channel/UCB_b48f2diMH2JByN2OmgGw"
169+
label="YouTube"
170+
icon={Youtube}
171+
subLabel="Official Channel"
172+
/>
173+
</div>
174+
</div>
175+
</section>
138176

139-
<div className="text-center pt-4">
140-
<p className="text-[10px] font-mono text-muted/40 uppercase tracking-[0.2em]">
141-
Designed for Hackers
142-
</p>
143-
</div>
177+
{/* Preferences Section */}
178+
<section className="px-4">
179+
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden shadow-xl">
180+
<div className="p-4 border-b border-white/5 flex items-center gap-3">
181+
<Layers className="text-primary" size={20} />
182+
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">{t.settings_pref}</h3>
183+
</div>
184+
185+
<div className="divide-y divide-white/5">
186+
<div
187+
className="p-4 flex items-center justify-between group cursor-pointer hover:bg-white/5 transition-colors"
188+
onClick={toggleNotifications}
189+
>
190+
<div className="flex items-center gap-3">
191+
<div className="p-2 rounded-lg bg-background text-muted">
192+
<Bell size={18} />
193+
</div>
194+
<div>
195+
<p className="text-sm font-medium text-text">{t.pref_notifications}</p>
196+
<p className="text-xs text-muted">{t.pref_notifications_desc}</p>
197+
</div>
198+
</div>
199+
<div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${notificationsEnabled ? 'bg-primary' : 'bg-gray-700'}`}>
200+
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${notificationsEnabled ? 'translate-x-6' : 'translate-x-1'}`}/>
201+
</div>
202+
</div>
203+
204+
<div className="p-4 flex items-center justify-between group cursor-pointer hover:bg-white/5 transition-colors">
205+
<div className="flex items-center gap-3">
206+
<div className="p-2 rounded-lg bg-background text-muted">
207+
<Smartphone size={18} />
208+
</div>
209+
<div>
210+
<p className="text-sm font-medium text-text">{t.pref_cache}</p>
211+
<p className="text-xs text-muted">0.5 MB used</p>
212+
</div>
213+
</div>
214+
<ChevronRight size={16} className="text-muted" />
215+
</div>
216+
</div>
217+
</div>
218+
</section>
219+
220+
{/* About Section */}
221+
<section className="px-4">
222+
<div className="bg-card/50 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden shadow-xl">
223+
<div className="p-4 border-b border-white/5 flex items-center gap-3">
224+
<Info className="text-primary" size={20} />
225+
<h3 className="font-bold text-sm uppercase tracking-widest text-muted">{t.settings_info}</h3>
226+
</div>
227+
228+
<div className="divide-y divide-white/5">
229+
<a
230+
href="https://github.com/HackerOS-Linux-System/HackerOS-App"
231+
target="_blank"
232+
rel="noreferrer"
233+
className="p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
234+
>
235+
<div className="flex items-center gap-3">
236+
<div className="p-2 rounded-lg bg-background text-muted">
237+
<Github size={18} />
238+
</div>
239+
<div>
240+
<p className="text-sm font-medium text-text">Source Code</p>
241+
<p className="text-xs text-muted">HackerOS-App</p>
242+
</div>
243+
</div>
244+
<ChevronRight size={16} className="text-muted" />
245+
</a>
246+
247+
<div className="p-4 flex items-center justify-between">
248+
<div className="flex items-center gap-3">
249+
<div className="p-2 rounded-lg bg-background text-muted">
250+
<ShieldCheck size={18} />
251+
</div>
252+
<div>
253+
<p className="text-sm font-medium text-text">App Version</p>
254+
<p className="text-xs text-muted">v0.1-beta</p>
255+
</div>
256+
</div>
257+
</div>
258+
</div>
259+
</div>
260+
</section>
261+
262+
<div className="text-center pt-4">
263+
<p className="text-[10px] font-mono text-muted/40 uppercase tracking-[0.2em]">
264+
Designed for Hackers
265+
</p>
266+
</div>
144267
</div>
145268
);
146269
};

0 commit comments

Comments
 (0)