Refactored layout
This commit is contained in:
+27
-208
@@ -1,237 +1,56 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Play,
|
||||
Puzzle,
|
||||
Settings,
|
||||
ChevronDown,
|
||||
Check,
|
||||
User,
|
||||
LogOut,
|
||||
} from "lucide-react";
|
||||
import { getVersions } from "./lib/saturn";
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import Logo from "@/assets/logo.png";
|
||||
|
||||
// Utility for merging tailwind classes
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
// Components
|
||||
import { useEffect, useState } from "react";
|
||||
import Sidebar from "./components/layout/Sidebar";
|
||||
import TopBar from "./components/layout/TopBar";
|
||||
import PlaySection from "./components/PlaySection";
|
||||
import ModsSection from "./components/ModsSection";
|
||||
import SettingsSection from "./components/SettingsSection";
|
||||
import { getVersions } from "./lib/saturn";
|
||||
import { GameVersion } from "./lib/types";
|
||||
|
||||
type Section = "play" | "mods" | "settings";
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [activeSection, setActiveSection] = useState<Section>("play");
|
||||
export default function App() {
|
||||
const [active, setActive] = useState<Section>("play");
|
||||
const [versions, setVersions] = useState<GameVersion[]>([]);
|
||||
const [selectedVersion, setSelectedVersion] = useState<GameVersion | null>(
|
||||
null,
|
||||
);
|
||||
const [isVersionDropdownOpen, setIsVersionDropdownOpen] = useState(false);
|
||||
const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
|
||||
|
||||
const versionRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const accountRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const [versionOpen, setVersionOpen] = useState(false);
|
||||
const [accountOpen, setAccountOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchVersions = async () => {
|
||||
const v = await getVersions();
|
||||
getVersions().then((v) => {
|
||||
setVersions(v);
|
||||
if (v.length > 0) setSelectedVersion(v[0]);
|
||||
};
|
||||
fetchVersions();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as Node;
|
||||
|
||||
// Close version dropdown if clicked outside
|
||||
if (versionRef.current && !versionRef.current.contains(target)) {
|
||||
setIsVersionDropdownOpen(false);
|
||||
}
|
||||
|
||||
// Close account dropdown if clicked outside
|
||||
if (accountRef.current && !accountRef.current.contains(target)) {
|
||||
setIsAccountDropdownOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
if (v.length) setSelectedVersion(v[0]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-screen bg-saturn-bg text-saturn-text-primary overflow-hidden font-sans">
|
||||
{/* Sidebar */}
|
||||
<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>
|
||||
<div className="flex h-screen">
|
||||
<Sidebar active={active} setActive={setActive} />
|
||||
|
||||
<nav className="flex flex-col gap-4 h-full">
|
||||
<button
|
||||
onClick={() => setActiveSection("play")}
|
||||
className={cn("sidebar-icon", activeSection === "play" && "active")}
|
||||
title="Play"
|
||||
>
|
||||
<Play
|
||||
size={22}
|
||||
fill={activeSection === "play" ? "currentColor" : "none"}
|
||||
<main className="flex-1 flex flex-col">
|
||||
<TopBar
|
||||
versions={versions}
|
||||
selectedVersion={selectedVersion}
|
||||
setSelectedVersion={setSelectedVersion}
|
||||
versionOpen={versionOpen}
|
||||
setVersionOpen={setVersionOpen}
|
||||
accountOpen={accountOpen}
|
||||
setAccountOpen={setAccountOpen}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveSection("mods")}
|
||||
className={cn("sidebar-icon", activeSection === "mods" && "active")}
|
||||
title="Mods"
|
||||
>
|
||||
<Puzzle
|
||||
size={22}
|
||||
fill={activeSection === "mods" ? "currentColor" : "none"}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveSection("settings")}
|
||||
className={cn(
|
||||
"sidebar-icon",
|
||||
activeSection === "settings" && "active",
|
||||
)}
|
||||
title="Settings"
|
||||
>
|
||||
<Settings
|
||||
size={22}
|
||||
fill={activeSection === "settings" ? "currentColor" : "none"}
|
||||
/>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
{/* Top Bar */}
|
||||
<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">
|
||||
{/* Version Selector */}
|
||||
<div ref={versionRef} className="relative">
|
||||
<div className="relative group overflow-visible inline-block">
|
||||
{/* Glow */}
|
||||
<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) => !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={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) => (
|
||||
<button
|
||||
key={v.id}
|
||||
onClick={() => {
|
||||
setSelectedVersion(v);
|
||||
setIsVersionDropdownOpen(false);
|
||||
}}
|
||||
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"
|
||||
>
|
||||
<span>{v.name}</span>
|
||||
{selectedVersion?.id === v.id && <Check size={14} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Account Selector */}
|
||||
<div ref={accountRef} className="relative group overflow-visible">
|
||||
{/* Glow */}
|
||||
<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="relative z-10 flex items-center gap-3 pl-20 pr-4 py-2 rounded-lg btn-primary"
|
||||
onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<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={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",
|
||||
)}
|
||||
>
|
||||
<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 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>
|
||||
</header>
|
||||
|
||||
{/* Content Sections */}
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden p-8">
|
||||
{activeSection === "play" && selectedVersion && (
|
||||
<div className="flex-1 p-8">
|
||||
{active === "play" && selectedVersion && (
|
||||
<PlaySection version={selectedVersion} />
|
||||
)}
|
||||
{activeSection === "mods" && selectedVersion && (
|
||||
{active === "mods" && selectedVersion && (
|
||||
<ModsSection version={selectedVersion} />
|
||||
)}
|
||||
{activeSection === "settings" && <SettingsSection />}
|
||||
{active === "settings" && <SettingsSection />}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import { User, LogOut } from "lucide-react";
|
||||
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
setOpen: (v: boolean) => void;
|
||||
}
|
||||
|
||||
export default function AccountDropdown({ open, setOpen }: Props) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
className="flex items-center gap-3 px-4 py-2 rounded-lg btn-primary"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs opacity-70">Playing as</p>
|
||||
<p className="font-bold">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",
|
||||
)}
|
||||
>
|
||||
<button className="w-full flex gap-2 px-4 py-2 hover:bg-white/5">
|
||||
<User size={14} /> Switch Account
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Play, Puzzle, Settings } from "lucide-react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type Section = "play" | "mods" | "settings";
|
||||
|
||||
interface Props {
|
||||
active: Section;
|
||||
setActive: (s: Section) => void;
|
||||
}
|
||||
|
||||
export default function Sidebar({ active, setActive }: Props) {
|
||||
return (
|
||||
<aside className="w-16 border-r border-saturn-border flex flex-col items-center py-6 gap-6 bg-saturn-panel/50">
|
||||
<nav className="flex flex-col gap-4 h-full">
|
||||
<button
|
||||
onClick={() => setActive("play")}
|
||||
className={twMerge("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")}
|
||||
>
|
||||
<Puzzle
|
||||
size={22}
|
||||
fill={active === "mods" ? "currentColor" : "none"}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActive("settings")}
|
||||
className={twMerge("sidebar-icon", active === "settings" && "active")}
|
||||
>
|
||||
<Settings
|
||||
size={22}
|
||||
fill={active === "settings" ? "currentColor" : "none"}
|
||||
/>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
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;
|
||||
}
|
||||
|
||||
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}
|
||||
/>
|
||||
|
||||
<AccountDropdown
|
||||
open={props.accountOpen}
|
||||
setOpen={props.setAccountOpen}
|
||||
/>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
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;
|
||||
}
|
||||
|
||||
export default function VersionDropdown({
|
||||
versions,
|
||||
selected,
|
||||
onSelect,
|
||||
open,
|
||||
setOpen,
|
||||
}: 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
|
||||
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",
|
||||
)}
|
||||
>
|
||||
{versions.map((v) => (
|
||||
<button
|
||||
key={v.id}
|
||||
onClick={() => {
|
||||
onSelect(v);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="w-full flex justify-between px-4 py-2 text-sm hover:bg-saturn-accent/10"
|
||||
>
|
||||
{v.name}
|
||||
{selected?.id === v.id && <Check size={14} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user