Skip to content

Commit b08a18f

Browse files
michal92299michal92299
authored
Update VersionCard.tsx
1 parent e94aaee commit b08a18f

1 file changed

Lines changed: 109 additions & 48 deletions

File tree

‎source-code/components/VersionCard.tsx‎

Lines changed: 109 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,128 @@
11
import React from 'react';
2-
import { Terminal, Calendar, Activity, ArrowRight } from 'lucide-react';
3-
import { ReleaseInfo } from '../types';
2+
import { Terminal, Calendar, Activity, Info, Clock, CheckCircle2 } from 'lucide-react';
3+
import { ReleaseInfo, Language } from '../types';
4+
import { TRANSLATIONS } from '../utils/translations';
45

56
interface VersionCardProps {
67
release: ReleaseInfo;
78
isLatest: boolean;
9+
language: Language;
810
}
911

10-
export const VersionCard: React.FC<VersionCardProps> = ({ release, isLatest }) => {
12+
export const VersionCard: React.FC<VersionCardProps> = ({ release, isLatest, language }) => {
13+
const t = TRANSLATIONS[language];
14+
15+
// Helper to parse the edition string (e.g. "HackerOS Official: 18.01.2026")
16+
const parseEditionLine = (line: string) => {
17+
const parts = line.split(':');
18+
if (parts.length >= 2) {
19+
return {
20+
name: parts[0].trim(),
21+
date: parts.slice(1).join(':').trim()
22+
};
23+
}
24+
return { name: line, date: '' };
25+
};
26+
27+
const editionsList = release.editions
28+
? release.editions.split('\n').map(parseEditionLine)
29+
: [];
30+
1131
return (
1232
<div className={`
13-
relative p-5 rounded-2xl border backdrop-blur-sm transition-all duration-300
14-
${isLatest
15-
? 'bg-card/40 border-primary/30 shadow-[0_0_30px_-15px_rgb(var(--color-primary))]'
16-
: 'bg-card/20 border-white/5 hover:bg-card/30'
33+
relative overflow-hidden rounded-2xl border backdrop-blur-md transition-all duration-300 mb-6
34+
${isLatest
35+
? 'bg-card/60 border-primary/30 shadow-[0_0_25px_-10px_rgb(var(--color-primary))]'
36+
: 'bg-card/30 border-white/5 hover:bg-card/40'
1737
}
18-
`}>
38+
`}>
39+
{/* Header Background Accent */}
40+
{isLatest && (
41+
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/10 blur-[50px] rounded-full pointer-events-none" />
42+
)}
43+
44+
{/* Top Banner for Latest */}
1945
{isLatest && (
20-
<div className="absolute -top-3 right-4 flex items-center gap-1.5 bg-primary text-background text-[10px] font-bold px-3 py-1 rounded-full shadow-lg font-mono tracking-wide">
21-
<span className="relative flex h-2 w-2">
22-
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
23-
<span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
24-
</span>
25-
LATEST_BUILD
46+
<div className="bg-primary/10 border-b border-primary/10 px-4 py-1.5 flex items-center justify-between">
47+
<span className="text-[10px] font-bold text-primary tracking-widest uppercase flex items-center gap-2">
48+
<span className="relative flex h-2 w-2">
49+
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
50+
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
51+
</span>
52+
{t.latest_build}
53+
</span>
2654
</div>
2755
)}
2856

29-
<div className="flex items-center gap-3 mb-4">
30-
<div className={`p-2.5 rounded-xl ${isLatest ? 'bg-primary/20 text-primary' : 'bg-white/5 text-muted'}`}>
31-
<Terminal size={22} />
32-
</div>
33-
<div>
34-
<h3 className="text-xl font-mono font-bold text-text">
35-
{release.version}
36-
</h3>
37-
<p className="text-xs text-muted font-mono flex items-center gap-1">
38-
Build: RELEASE_CANDIDATE
39-
</p>
40-
</div>
41-
</div>
57+
<div className="p-5">
58+
{/* Version Header */}
59+
<div className="flex items-start gap-4 mb-4">
60+
<div className={`p-3 rounded-xl shrink-0 ${isLatest ? 'bg-primary text-background' : 'bg-white/5 text-muted'}`}>
61+
<Terminal size={24} strokeWidth={2.5} />
62+
</div>
63+
<div className="flex-1">
64+
<h3 className="text-2xl font-mono font-bold text-text tracking-tight">
65+
{release.version}
66+
</h3>
67+
{release.description && (
68+
<div className="mt-1.5 flex items-start gap-2 text-sm text-muted/90 leading-snug">
69+
<Info size={14} className="mt-0.5 shrink-0 opacity-70" />
70+
<p>{release.description}</p>
71+
</div>
72+
)}
73+
</div>
74+
</div>
4275

43-
<div className="flex items-center gap-2 mb-4 text-xs text-muted/80 bg-background/50 border border-white/5 p-3 rounded-lg">
44-
<Calendar size={14} className="shrink-0 text-primary" />
45-
<p className="font-mono leading-relaxed truncate">{release.editions}</p>
46-
</div>
76+
{/* Release Roadmap / Editions Grid */}
77+
{editionsList.length > 0 && (
78+
<div className="mb-5 bg-background/40 rounded-xl border border-white/5 overflow-hidden">
79+
<div className="px-3 py-2 border-b border-white/5 bg-white/5 flex items-center gap-2">
80+
<Calendar size={12} className="text-primary" />
81+
<span className="text-[10px] font-bold uppercase tracking-wider text-muted">{t.roadmap}</span>
82+
</div>
83+
<div className="divide-y divide-white/5">
84+
{editionsList.map((edition, idx) => (
85+
<div key={idx} className="flex items-center justify-between p-3 hover:bg-white/5 transition-colors">
86+
<div className="flex items-center gap-2">
87+
<div className="w-1.5 h-1.5 rounded-full bg-primary/50" />
88+
<span className="text-xs font-medium text-text">{edition.name}</span>
89+
</div>
90+
{edition.date && (
91+
<div className="flex items-center gap-1.5 bg-background/60 px-2 py-1 rounded text-[10px] font-mono text-primary border border-primary/10">
92+
<Clock size={10} />
93+
{edition.date}
94+
</div>
95+
)}
96+
</div>
97+
))}
98+
</div>
99+
</div>
100+
)}
47101

48-
<div className="space-y-2">
49-
<div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-muted/50">
50-
<Activity size={12} />
51-
<span>System Log</span>
52-
</div>
53-
<div className="text-sm text-text/90 leading-relaxed border-l-2 border-primary/20 pl-3">
54-
{release.news
55-
? release.news.split('\n').map((line, i) => (
56-
<p key={i} className="mb-1 last:mb-0 flex items-start gap-2">
57-
<span className="text-primary mt-1.5 text-[6px] opacity-60">●</span>
58-
{line}
59-
</p>
60-
))
61-
: <span className="text-muted italic">No data available.</span>
62-
}
63-
</div>
64-
</div>
102+
{/* Changelog / News */}
103+
<div className="space-y-3">
104+
<div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-muted/50 pl-1">
105+
<Activity size={12} />
106+
<span>{t.changelog}</span>
107+
</div>
108+
<div className="relative">
109+
<div className="absolute top-0 bottom-0 left-1.5 w-px bg-white/10" />
110+
<div className="space-y-3 pl-5">
111+
{release.news
112+
? release.news.split('\n').map((line, i) => (
113+
<div key={i} className="group relative">
114+
<div className="absolute -left-[19px] top-1.5 w-2 h-2 rounded-full border border-card bg-muted/20 group-hover:bg-primary transition-colors" />
115+
<p className="text-xs text-text/80 leading-relaxed font-mono">
116+
{line}
117+
</p>
118+
</div>
119+
))
120+
: <span className="text-muted italic text-xs">{t.no_changes}</span>
121+
}
122+
</div>
123+
</div>
124+
</div>
65125
</div>
126+
</div>
66127
);
67128
};

0 commit comments

Comments
 (0)