temp: cluster pages

This commit is contained in:
LynithDev 2025-06-17 21:42:42 +02:00
parent eb820e45ff
commit 4e8b03f86b
6 changed files with 102 additions and 38 deletions

View file

@ -20,7 +20,7 @@ export function Navbar() {
<div className="flex flex-1 items-center justify-center pointer-events-none gap-6">
<NavbarLink to="/app">Home</NavbarLink>
<NavbarLink to="/app/test">Clusters</NavbarLink>
<NavbarLink to="/app/clusters">Clusters</NavbarLink>
<NavbarLink to="/">Accounts</NavbarLink>
</div>

View file

@ -1,9 +1,9 @@
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/app/test')({
export const Route = createFileRoute('/app/clusters/')({
component: RouteComponent,
});
function RouteComponent() {
return <div>Hello "/app/test"!</div>;
return <div>Hello "/app/clusters/"!</div>;
}

View file

@ -0,0 +1,57 @@
import { AnimatedOutlet, AnimatedOutletProvider } from '@onelauncher/common/components';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/app/clusters')({
component: RouteComponent,
});
function RouteComponent() {
return (
<div className="flex w-full h-full">
<BackgroundGradients />
<AnimatedOutletProvider>
<AnimatedOutlet
enter={{
initial: {
bottom: '-100%',
opacity: 0,
},
animate: {
bottom: 0,
opacity: 1,
},
}}
exit={{
initial: {
bottom: 0,
opacity: 1,
},
animate: {
bottom: '-100%',
opacity: 0,
},
}}
from={Route.id}
/>
</AnimatedOutletProvider>
</div>
);
}
function BackgroundGradients() {
return (
<div className="relative">
<div style={{
background: 'rgba(0, 0, 0, 0.80)',
}}
>
</div>
<div style={{
background: 'linear-gradient(180deg, rgba(17, 23, 28, 0.00) 0%, #11171C 60.1%)',
}}
>
</div>
</div>
);
}

View file

@ -15,36 +15,43 @@ export const Route = createFileRoute('/app/')({
component: RouteComponent,
});
const clusters = [
{
mc_version: '1.8.9',
},
undefined,
{
mc_version: '1.21.4',
},
];
function RouteComponent() {
const { data: clusters } = useCommandSuspense<Array<ClusterModel | undefined>>(
'getClusters',
async () => {
await new Promise(resolve => setTimeout(resolve, 3000)); // Simulate loading delay
return bindings.core.getClusters();
},
{
select: ((data: Array<ClusterModel>) => {
const sorted = data.sort((a, b) => {
if (a.last_played && b.last_played)
return new Date(b.last_played).getTime() - new Date(a.last_played).getTime();
else if (a.last_played)
return -1; // a has last_played, b does not
else if (b.last_played)
return 1; // b has last_played, a does not
// const { data: clusters } = useCommandSuspense<Array<ClusterModel | undefined>>(
// 'getClusters',
// bindings.core.getClusters,
// {
// select: ((data: Array<ClusterModel>) => {
// const sorted = data.sort((a, b) => {
// if (a.last_played && b.last_played)
// return new Date(b.last_played).getTime() - new Date(a.last_played).getTime();
// else if (a.last_played)
// return -1; // a has last_played, b does not
// else if (b.last_played)
// return 1; // b has last_played, a does not
const aVersion = a.mc_version.replaceAll('.', '');
const bVersion = b.mc_version.replaceAll('.', '');
return Number.parseInt(bVersion) - Number.parseInt(aVersion);
});
// const aVersion = a.mc_version.replaceAll('.', '');
// const bVersion = b.mc_version.replaceAll('.', '');
// return Number.parseInt(bVersion) - Number.parseInt(aVersion);
// });
return [
sorted[0],
sorted[1],
undefined,
];
}) as (data: Array<ClusterModel | undefined>) => Array<ClusterModel | undefined>,
},
);
// return [
// sorted[0],
// sorted[1],
// undefined,
// ];
// }) as (data: Array<ClusterModel | undefined>) => Array<ClusterModel | undefined>,
// },
// );
return (
<div className="flex h-full w-full flex-col justify-center">

View file

@ -1,7 +1,7 @@
import { LoaderSuspense, Navbar } from '@/components';
import { GameBackground } from '@/components/GameBackground';
import { AnimatedOutlet } from '@onelauncher/common/components';
import { createFileRoute, Outlet } from '@tanstack/react-router';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/app')({
component: RouteComponent,
@ -16,19 +16,18 @@ function RouteComponent() {
<Background />
<div className="h-full w-full pb-12">
{/* <AnimatedOutlet
<AnimatedOutlet
enter={{
initial: { opacity: 1, left: '-100%' },
animate: { opacity: 1, left: 0 },
initial: { opacity: 0 },
animate: { opacity: 1 },
}}
exit={{
initial: { opacity: 1, left: 0 },
animate: { opacity: 1, left: '150%' },
initial: { opacity: 1 },
animate: { opacity: 0 },
}}
from={Route.id}
transition={{ duration: 0.3, bounce: 0.1, power: 0.2, type: 'spring' }}
/> */}
<Outlet />
/>
</div>
</div>
</LoaderSuspense>

View file

@ -83,6 +83,7 @@
* {
user-select: none !important;
-webkit-user-select: none !important;
-webkit-user-drag: none !important;
cursor: default !important;
}