49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { cn } from "@lume/utils";
|
|
import { useTranslation } from "react-i18next";
|
|
import { NavLink, Outlet } from "react-router-dom";
|
|
import { RelaySidebar } from "./components/sidebar";
|
|
|
|
export function RelaysScreen() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="grid h-full w-full lg:grid-cols-4 xl:grid-cols-5 rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-none dark:ring-1 dark:ring-white/10">
|
|
<RelaySidebar className="col-span-1" />
|
|
<div className="col-span-3 xl:col-span-4 flex flex-col rounded-r-xl bg-white dark:bg-black">
|
|
<div className="h-14 shrink-0 flex px-5 items-center gap-6 border-b border-neutral-100 dark:border-neutral-950">
|
|
<NavLink
|
|
end
|
|
to={"/relays/"}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"h-9 w-24 rounded-lg inline-flex items-center justify-center font-medium",
|
|
isActive
|
|
? "bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-950 dark:hover:bg-neutral-900"
|
|
: "",
|
|
)
|
|
}
|
|
>
|
|
{t("relays.global")}
|
|
</NavLink>
|
|
<NavLink
|
|
to={"/relays/follows/"}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"h-9 w-24 rounded-lg inline-flex items-center justify-center font-medium",
|
|
isActive
|
|
? "bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-950 dark:hover:bg-neutral-900"
|
|
: "",
|
|
)
|
|
}
|
|
>
|
|
{t("relays.follows")}
|
|
</NavLink>
|
|
</div>
|
|
<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|