Skip to content

Commit

Permalink
Fixed layout
Browse files Browse the repository at this point in the history
  • Loading branch information
mattpocock committed Dec 4, 2024
1 parent ff593e1 commit 1801881
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 133 deletions.
123 changes: 120 additions & 3 deletions apps/evalite-ui/app/root.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,35 @@
import type { LinksFunction } from "@remix-run/node";
import {
Link,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";
import {
ChevronDownCircleIcon,
ChevronUpCircleIcon,
MinusCircleIcon,
ZapIcon,
} from "lucide-react";
import { SidebarRight } from "~/components/sidebar-right";
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
} from "~/components/ui/sidebar";

import "./tailwind.css";
import { DEFAULT_SERVER_PORT } from "@evalite/core/constants";
import { getEvals } from "@evalite/core/sdk";

export const links: LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
Expand Down Expand Up @@ -42,6 +62,103 @@ export function Layout({ children }: { children: React.ReactNode }) {
);
}

type ScoreState = "up" | "down" | "same" | "first";

export const clientLoader = async () => {
const evals = await getEvals();

return {
menu: Object.entries(evals).map(([key, value]) => {
const mostRecentEval = value[0]!;

const secondMostRecentEval = value[1];

const score = mostRecentEval.score;

const state: ScoreState = !secondMostRecentEval
? "first"
: score > secondMostRecentEval.score
? "up"
: score < secondMostRecentEval.score
? "down"
: "same";
return {
name: key,
state,
score,
};
}),
};
};

export default function App() {
return <Outlet />;
const evals = useLoaderData<typeof clientLoader>();

return (
<SidebarProvider>
<Sidebar className="border-r-0">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<div className="px-2 py-1 flex items-center space-x-2.5">
<ZapIcon className="size-4" />
<span className="truncate font-semibold tracking-tight">
Evalite
</span>
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Evals</SidebarGroupLabel>
<SidebarMenu>
{evals.menu.map((item) => (
<SidebarMenuItem key={item.name}>
<SidebarMenuButton asChild>
<Link to={`/${item.name}`} className="flex justify-between">
<span>{item.name}</span>
<Score score={item.score} state={item.state} />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<Outlet />
</SidebarInset>
<SidebarRight />
</SidebarProvider>
);
}

const Score = (props: { score: number; state: ScoreState }) => {
return (
<span className="flex items-center space-x-2">
<span>{Math.round(props.score * 100)}%</span>
{props.state === "up" && (
<span className="text-primary">
<ChevronUpCircleIcon />
</span>
)}
{props.state === "down" && (
<span className="text-destructive">
<ChevronDownCircleIcon className="" />
</span>
)}
{props.state === "same" && (
<span className="text-blue-500">
<MinusCircleIcon className="transform size-3" />
</span>
)}
{props.state === "first" && (
<span className="text-muted">
<MinusCircleIcon className="transform size-3" />
</span>
)}
</span>
);
};
6 changes: 2 additions & 4 deletions apps/evalite-ui/app/routes/$name.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@ import type { MetaFunction } from "@remix-run/node";
import { useLoaderData, type ClientLoaderFunctionArgs } from "@remix-run/react";
import { InnerPageLayout } from "~/components/page-header";

export const meta: MetaFunction = () => {
export const meta: MetaFunction<typeof clientLoader> = (args) => {
return [
{ title: "New Remix App" },
{ title: `${(args.data as any)?.name} | Evalite` },
{ name: "description", content: "Welcome to Remix!" },
];
};

type ScoreState = "up" | "down" | "same" | "first";

export const clientLoader = async (args: ClientLoaderFunctionArgs) => {
return {
name: args.params.name!,
Expand Down
135 changes: 9 additions & 126 deletions apps/evalite-ui/app/routes/_index.tsx
Original file line number Diff line number Diff line change
@@ -1,139 +1,22 @@
import { getEvals } from "@evalite/core/sdk";
import type { MetaFunction } from "@remix-run/node";
import { Link, Outlet, useLoaderData } from "@remix-run/react";
import {
ChevronDownCircleIcon,
ChevronUpCircleIcon,
MinusCircleIcon,
ZapIcon,
} from "lucide-react";
import { SidebarRight } from "~/components/sidebar-right";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from "~/components/ui/breadcrumb";
import { Separator } from "~/components/ui/separator";
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarTrigger,
} from "~/components/ui/sidebar";
import { useSubscribeToTestServer } from "~/use-subscribe-to-socket";
import { redirect, type MetaFunction } from "@remix-run/react";

export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
return [{ title: "Evalite" }];
};

type ScoreState = "up" | "down" | "same" | "first";

export const clientLoader = async () => {
const evals = await getEvals();

return {
menu: Object.entries(evals).map(([key, value]) => {
const mostRecentEval = value[0]!;

const secondMostRecentEval = value[1];
const firstName = Object.keys(evals)[0];

const score = mostRecentEval.score;
if (firstName) {
return redirect(`/${firstName}`);
}

const state: ScoreState = !secondMostRecentEval
? "first"
: score > secondMostRecentEval.score
? "up"
: score < secondMostRecentEval.score
? "down"
: "same";
return {
name: key,
state,
score,
};
}),
};
return null;
};

export default function Index() {
const evals = useLoaderData<typeof clientLoader>();

return (
<SidebarProvider>
<Sidebar className="border-r-0">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<div className="px-2 py-1 flex items-center space-x-2.5">
<ZapIcon className="size-4" />
<span className="truncate font-semibold tracking-tight">
Evalite
</span>
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Evals</SidebarGroupLabel>
<SidebarMenu>
{evals.menu.map((item) => (
<SidebarMenuItem key={item.name}>
<SidebarMenuButton asChild>
<Link to={`/${item.name}`} className="flex justify-between">
<span>{item.name}</span>
<Score score={item.score} state={item.state} />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<Outlet />
</SidebarInset>
<SidebarRight />
</SidebarProvider>
);
export default function Page() {
return null;
}

const Score = (props: { score: number; state: ScoreState }) => {
return (
<span className="flex items-center space-x-2">
<span>{Math.round(props.score * 100)}%</span>
{props.state === "up" && (
<span className="text-primary">
<ChevronUpCircleIcon />
</span>
)}
{props.state === "down" && (
<span className="text-destructive">
<ChevronDownCircleIcon className="" />
</span>
)}
{props.state === "same" && (
<span className="text-blue-500">
<MinusCircleIcon className="transform size-3" />
</span>
)}
{props.state === "first" && (
<span className="text-muted">
<MinusCircleIcon className="transform size-3" />
</span>
)}
</span>
);
};

0 comments on commit 1801881

Please sign in to comment.