temp: cluster pages
This commit is contained in:
parent
eb820e45ff
commit
4e8b03f86b
6 changed files with 102 additions and 38 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
}
|
||||
57
apps/oneclient/frontend/src/routes/app/clusters/route.tsx
Normal file
57
apps/oneclient/frontend/src/routes/app/clusters/route.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@
|
|||
* {
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-webkit-user-drag: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue