saturnclientmc/launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Refactored

Browse Source
This commit is contained in:
selimaj-dev
2026-04-04 17:11:55 +02:00
parent 7739038f88
commit 0f0e3a1c5d
8 changed files with 140 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/AccountDropdown.tsx
+43 -21
View File
@@ -1,36 +1,58 @@
import { User, LogOut } from "lucide-react";
import { cn } from "@/lib/utils";
import { Props } from "./props";
import { twMerge } from "tailwind-merge";
interface Props {
open: boolean;
setOpen: (v: boolean) => void;
}
export default function AccountDropdown({ open, setOpen }: Props) {
export default function AccountDropdown({
isAccountDropdownOpen,
setIsAccountDropdownOpen,
accountRef,
}: Props) {
return (
<div className="relative">
<div ref={accountRef} className="relative group overflow-visible">
<div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-lg blur opacity-25 group-hover:opacity-50 transition pointer-events-none duration-700" />
<button
className="flex items-center gap-3 px-4 py-2 rounded-lg btn-primary"
onClick={() => setOpen(!open)}
className="relative z-10 flex items-center gap-3 pl-20 pr-4 py-2 rounded-lg btn-primary"
onClick={() => setIsAccountDropdownOpen((prev: boolean) => !prev)}
>
<div>
<p className="text-xs opacity-70">Playing as</p>
<p className="font-bold">SaturnDev</p>
<div className="absolute -top-2 left-4 group-hover:scale-110 transition-transform duration-700 w-12 overflow-hidden z-20">
<img
src="https://render.crafty.gg/3d/bust/Kr4ight"
className="w-full h-full object-cover"
/>
</div>
<div className="leading-tight">
<p className="text-[10px] text-white/80 uppercase tracking-wide">
Playing as
</p>
<p className="text-sm font-bold text-white">SaturnDev</p>
</div>
</button>
<div
className={twMerge(
"absolute top-full right-0 mt-2 w-48 bg-saturn-panel border rounded-lg",
open ? "opacity-100" : "opacity-0 pointer-events-none",
className={cn(
"absolute top-full right-0 mt-2 w-48 bg-saturn-panel border border-saturn-border rounded-lg shadow-2xl z-50 py-1 overflow-hidden transition-all duration-200 origin-top",
isAccountDropdownOpen
? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
: "opacity-0 scale-95 -translate-y-2 pointer-events-none",
)}
>
<button className="w-full flex gap-2 px-4 py-2 hover:bg-white/5">
<User size={14} /> Switch Account
<div className="px-4 py-3 border-b border-saturn-border">
<p className="text-sm font-bold">SaturnDev</p>
<p className="text-xs text-saturn-text-secondary truncate">
dev@saturnclient.com
</p>
</div>
<button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5 transition-colors">
<User size={14} />
<span>Switch Account</span>
</button>
<button className="w-full flex gap-2 px-4 py-2 text-red-400 hover:bg-red-500/10">
<LogOut size={14} /> Logout
<button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-red-500/10 text-red-400 transition-colors">
<LogOut size={14} />
<span>Logout</span>
</button>
</div>
</div>
src/components/layout/Sidebar.tsx
+10 -12
View File
@@ -1,27 +1,25 @@
import { Play, Puzzle, Settings } from "lucide-react";
import { twMerge } from "tailwind-merge";
import Logo from "@/assets/logo.png";
import { cn } from "@/lib/utils";
type Section = "play" | "mods" | "settings";
interface Props {
active: Section;
setActive: (s: Section) => void;
}
export default function Sidebar({ active, setActive }: Props) {
export default function Sidebar({ active, setActive }: any) {
return (
<aside className="w-16 border-r border-saturn-border flex flex-col items-center py-6 gap-6 bg-saturn-panel/50">
<div>
<img src={Logo} alt="Saturn Logo" className="w-10 h-10" />
</div>
<nav className="flex flex-col gap-4 h-full">
<button
onClick={() => setActive("play")}
className={twMerge("sidebar-icon", active === "play" && "active")}
className={cn("sidebar-icon", active === "play" && "active")}
>
<Play size={22} fill={active === "play" ? "currentColor" : "none"} />
</button>
<button
onClick={() => setActive("mods")}
className={twMerge("sidebar-icon", active === "mods" && "active")}
className={cn("sidebar-icon", active === "mods" && "active")}
>
<Puzzle
size={22}
@@ -31,7 +29,7 @@ export default function Sidebar({ active, setActive }: Props) {
<button
onClick={() => setActive("settings")}
className={twMerge("sidebar-icon", active === "settings" && "active")}
className={cn("sidebar-icon", active === "settings" && "active")}
>
<Settings
size={22}
src/components/layout/TopBar.tsx
+4 -25
View File
@@ -1,34 +1,13 @@
import VersionDropdown from "./VersionDropdown";
import AccountDropdown from "./AccountDropdown";
import { GameVersion } from "@/lib/types";
interface Props {
versions: GameVersion[];
selectedVersion: GameVersion | null;
setSelectedVersion: (v: GameVersion) => void;
versionOpen: boolean;
setVersionOpen: (v: boolean) => void;
accountOpen: boolean;
setAccountOpen: (v: boolean) => void;
}
import { Props } from "./props";
export default function TopBar(props: Props) {
return (
<header className="h-14 flex justify-between items-center px-6 border-b">
<VersionDropdown
versions={props.versions}
selected={props.selectedVersion}
onSelect={props.setSelectedVersion}
open={props.versionOpen}
setOpen={props.setVersionOpen}
/>
<header className="h-14 border-b border-saturn-border flex items-center justify-between px-6 bg-saturn-panel/30 backdrop-blur-md z-100 py-10">
<VersionDropdown {...props} />
<AccountDropdown
open={props.accountOpen}
setOpen={props.setAccountOpen}
/>
<AccountDropdown {...props} />
</header>
);
}
src/components/layout/VersionDropdown.tsx
+41 -33
View File
@@ -1,52 +1,60 @@
import { ChevronDown, Check } from "lucide-react";
import { GameVersion } from "@/lib/types";
import { twMerge } from "tailwind-merge";
interface Props {
versions: GameVersion[];
selected: GameVersion | null;
onSelect: (v: GameVersion) => void;
open: boolean;
setOpen: (v: boolean) => void;
}
import { cn } from "@/lib/utils";
import { Props } from "./props";
export default function VersionDropdown({
versions,
selected,
onSelect,
open,
setOpen,
selectedVersion,
setSelectedVersion,
isVersionDropdownOpen,
setIsVersionDropdownOpen,
setIsAccountDropdownOpen,
versionRef,
}: Props) {
return (
<div className="relative">
<button
onClick={() => setOpen(!open)}
className="flex items-center gap-2 px-3 py-1.5 rounded-md btn-primary text-sm"
>
<span>{selected?.name || "Loading..."}</span>
<ChevronDown
size={14}
className={twMerge("transition-transform", open && "rotate-180")}
/>
</button>
<div ref={versionRef} className="relative">
<div className="relative group overflow-visible inline-block">
<div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-md blur opacity-25 group-hover:opacity-50 transition duration-500 pointer-events-none" />
<button
onClick={() => {
setIsVersionDropdownOpen((prev: boolean) => !prev);
setIsAccountDropdownOpen(false);
}}
className="relative z-10 flex items-center gap-2 px-3 py-1.5 rounded-md btn-primary text-sm font-medium"
>
<span>{selectedVersion?.name || "Loading..."}</span>
<ChevronDown
size={14}
className={cn(
"transition-transform",
isVersionDropdownOpen && "rotate-180",
)}
/>
</button>
</div>
<div
className={twMerge(
"absolute top-full left-0 mt-2 w-48 bg-saturn-panel border rounded-lg",
open ? "opacity-100" : "opacity-0 pointer-events-none",
className={cn(
"absolute top-full left-0 mt-2 w-48 bg-saturn-panel border border-saturn-border rounded-lg shadow-2xl z-50 py-1 overflow-hidden transition-all duration-200 origin-top",
isVersionDropdownOpen
? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
: "opacity-0 scale-95 -translate-y-2 pointer-events-none",
)}
>
{versions.map((v) => (
{versions.map((v: GameVersion) => (
<button
key={v.id}
onClick={() => {
onSelect(v);
setOpen(false);
setSelectedVersion(v);
setIsVersionDropdownOpen(false);
}}
className="w-full flex justify-between px-4 py-2 text-sm hover:bg-saturn-accent/10"
className="w-full flex items-center justify-between px-4 py-2 text-sm hover:bg-saturn-accent/10 hover:text-saturn-accent transition-colors"
>
{v.name}
{selected?.id === v.id && <Check size={14} />}
<span>{v.name}</span>
{selectedVersion?.id === v.id && <Check size={14} />}
</button>
))}
</div>
src/components/layout/props.ts
+18
View File
@@ -0,0 +1,18 @@
import { GameVersion } from "@/lib/types";
export type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
export interface Props {
versions: GameVersion[];
selectedVersion: GameVersion | null;
setSelectedVersion: SetState<GameVersion | null>;
isVersionDropdownOpen: boolean;
setIsVersionDropdownOpen: SetState<boolean>;
isAccountDropdownOpen: boolean;
setIsAccountDropdownOpen: SetState<boolean>;
versionRef: React.RefObject<HTMLDivElement | null>;
accountRef: React.RefObject<HTMLDivElement | null>;
}