Simple ui

2025-08-23 08:55:16 +02:00
parent b17dd572bd
commit 01ef3b6406
7 changed files with 585 additions and 3 deletions
@@ -1,9 +1,102 @@
+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>
-      <Button className="font-bold">LAUNCH</Button>
+    <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>
  );
 }