|
1
|
import { useState, useEffect } from "react"; |
|
2
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; |
|
3
|
import { Badge } from "@/components/ui/badge"; |
|
4
|
import { Separator } from "@/components/ui/separator"; |
|
5
|
|
|
6
|
interface VersionInfo { |
|
7
|
version: string; |
|
8
|
name: string; |
|
9
|
build: string; |
|
10
|
features: string[]; |
|
11
|
changelog: Record<string, { |
|
12
|
date: string; |
|
13
|
changes: string[]; |
|
14
|
}>; |
|
15
|
} |
|
16
|
|
|
17
|
export function VersionInfo() { |
|
18
|
const [versionData, setVersionData] = useState<VersionInfo | null>(null); |
|
19
|
|
|
20
|
useEffect(() => { |
|
21
|
fetch('/version.json') |
|
22
|
.then(res => res.json()) |
|
23
|
.then(setVersionData) |
|
24
|
.catch(console.error); |
|
25
|
}, []); |
|
26
|
|
|
27
|
if (!versionData) return null; |
|
28
|
|
|
29
|
const latestVersion = Object.keys(versionData.changelog)[0]; |
|
30
|
const latestChangelog = versionData.changelog[latestVersion]; |
|
31
|
|
|
32
|
return ( |
|
33
|
<Card className="w-full max-w-2xl mx-auto"> |
|
34
|
<CardHeader> |
|
35
|
<div className="flex items-center justify-between"> |
|
36
|
<CardTitle className="text-xl font-semibold"> |
|
37
|
{versionData.name} |
|
38
|
</CardTitle> |
|
39
|
<Badge variant="default" className="text-sm"> |
|
40
|
v{versionData.version} |
|
41
|
</Badge> |
|
42
|
</div> |
|
43
|
<p className="text-sm text-gray-600 dark:text-gray-400"> |
|
44
|
Build: {versionData.build} |
|
45
|
</p> |
|
46
|
</CardHeader> |
|
47
|
|
|
48
|
<CardContent className="space-y-6"> |
|
49
|
{/* Key Features */} |
|
50
|
<div> |
|
51
|
<h3 className="font-medium mb-3">Key Features</h3> |
|
52
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2"> |
|
53
|
{versionData.features.map((feature, index) => ( |
|
54
|
<div key={index} className="flex items-center text-sm"> |
|
55
|
<i className="material-icons text-primary-600 text-sm mr-2">check_circle</i> |
|
56
|
{feature} |
|
57
|
</div> |
|
58
|
))} |
|
59
|
</div> |
|
60
|
</div> |
|
61
|
|
|
62
|
<Separator /> |
|
63
|
|
|
64
|
{/* Latest Release Notes */} |
|
65
|
<div> |
|
66
|
<h3 className="font-medium mb-3"> |
|
67
|
Release Notes - v{latestVersion} |
|
68
|
</h3> |
|
69
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> |
|
70
|
Released: {latestChangelog.date} |
|
71
|
</p> |
|
72
|
<ul className="space-y-2"> |
|
73
|
{latestChangelog.changes.map((change, index) => ( |
|
74
|
<li key={index} className="flex items-start text-sm"> |
|
75
|
<i className="material-icons text-green-600 text-sm mr-2 mt-0.5"> |
|
76
|
new_releases |
|
77
|
</i> |
|
78
|
{change} |
|
79
|
</li> |
|
80
|
))} |
|
81
|
</ul> |
|
82
|
</div> |
|
83
|
</CardContent> |
|
84
|
</Card> |
|
85
|
); |
|
86
|
} |