102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "./components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card";
|
|
import { Input } from "./components/ui/input";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
|
|
import { Progress } from "./components/ui/progress";
|
|
import { LogOut, Play, Settings, User } from "lucide-react";
|
|
|
|
export default function App() {
|
|
const [progress, setProgress] = useState(0);
|
|
const [launching, setLaunching] = useState(false);
|
|
|
|
const handleLaunch = () => {
|
|
setLaunching(true);
|
|
setProgress(0);
|
|
const interval = setInterval(() => {
|
|
setProgress((prev) => {
|
|
if (prev >= 100) {
|
|
clearInterval(interval);
|
|
setLaunching(false);
|
|
return 100;
|
|
}
|
|
return prev + 5;
|
|
});
|
|
}, 200);
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen w-full items-center justify-center bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-900 p-6">
|
|
<Card className="w-[480px] shadow-2xl rounded-2xl border border-zinc-700 bg-zinc-900/80 backdrop-blur-md">
|
|
<CardHeader className="text-center">
|
|
<CardTitle className="text-2xl font-bold text-white">
|
|
Saturn Client Launcher
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<Tabs defaultValue="play" className="w-full">
|
|
<TabsList className="grid grid-cols-3">
|
|
<TabsTrigger value="play">Play</TabsTrigger>
|
|
<TabsTrigger value="account">Account</TabsTrigger>
|
|
<TabsTrigger value="settings">Settings</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Play Tab */}
|
|
<TabsContent value="play" className="space-y-4">
|
|
<div className="flex flex-col items-center gap-4">
|
|
{!launching ? (
|
|
<Button
|
|
onClick={handleLaunch}
|
|
className="w-full font-bold text-lg flex items-center gap-2"
|
|
>
|
|
<Play className="w-5 h-5" /> LAUNCH
|
|
</Button>
|
|
) : (
|
|
<div className="w-full space-y-2">
|
|
<Progress value={progress} />
|
|
<p className="text-sm text-zinc-400 text-center">
|
|
Downloading assets... {progress}%
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Account Tab */}
|
|
<TabsContent value="account" className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-200">Username</label>
|
|
<Input placeholder="Enter your username" className="bg-zinc-800 border-zinc-700" />
|
|
</div>
|
|
<Button className="w-full flex items-center gap-2">
|
|
<User className="w-5 h-5" /> Login
|
|
</Button>
|
|
<Button variant="destructive" className="w-full flex items-center gap-2">
|
|
<LogOut className="w-5 h-5" /> Logout
|
|
</Button>
|
|
</TabsContent>
|
|
|
|
{/* Settings Tab */}
|
|
<TabsContent value="settings" className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-200">
|
|
Java Path
|
|
</label>
|
|
<Input placeholder="/usr/bin/java" className="bg-zinc-800 border-zinc-700" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-200">
|
|
RAM Allocation (MB)
|
|
</label>
|
|
<Input placeholder="2048" className="bg-zinc-800 border-zinc-700" />
|
|
</div>
|
|
<Button className="w-full flex items-center gap-2">
|
|
<Settings className="w-5 h-5" /> Save Settings
|
|
</Button>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |