wip: layout stuff
This commit is contained in:
parent
1966fce572
commit
c0a4af9c99
46
src/app/(dashboard)/project/[id]/(home)/layout.tsx
Normal file
46
src/app/(dashboard)/project/[id]/(home)/layout.tsx
Normal file
|
@ -0,0 +1,46 @@
|
|||
"use client";
|
||||
|
||||
import { SettingsHeader } from "~/app/(dashboard)/settings/SettingsHeader";
|
||||
import { SidebarNav } from "~/components/SidebarNav";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import { useProject } from "../_context/ProjectContext";
|
||||
|
||||
const sidebarNavItems = [
|
||||
{
|
||||
title: "Home",
|
||||
description: "Quick overview of all containers for this project.",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
title: "Sessions",
|
||||
description: "Manage your active sessions and logout remotely.",
|
||||
href: "/sessions",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ProjectHomeLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const project = useProject();
|
||||
const items = sidebarNavItems.map((item) => ({
|
||||
...item,
|
||||
href: `${project.path}${item.href}`,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="hidden space-y-6 py-10 md:block">
|
||||
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
|
||||
<aside className="-mx-4 lg:w-1/5">
|
||||
<SidebarNav items={items} />
|
||||
</aside>
|
||||
<div className="flex-1 space-y-6 lg:max-w-2xl">
|
||||
<SettingsHeader items={items} />
|
||||
<Separator />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
3
src/app/(dashboard)/project/[id]/(home)/page.tsx
Normal file
3
src/app/(dashboard)/project/[id]/(home)/page.tsx
Normal file
|
@ -0,0 +1,3 @@
|
|||
export default function ProjectHome() {
|
||||
return <p>hello world</p>;
|
||||
}
|
|
@ -6,9 +6,9 @@ import { useParams } from "next/navigation";
|
|||
import { Button } from "~/components/ui/button";
|
||||
import { api } from "~/trpc/react";
|
||||
import { type RouterOutputs } from "~/trpc/shared";
|
||||
import { ProjectContextProvider } from "../_context/ProjectContext";
|
||||
import { CreateService } from "./CreateService";
|
||||
import { ServiceCard } from "./ServiceCard";
|
||||
import { CreateService } from "./_components/CreateService";
|
||||
import { ServiceCard } from "./_components/ServiceCard";
|
||||
import { ProjectContextProvider } from "./_context/ProjectContext";
|
||||
|
||||
export function ProjectLayout(props: {
|
||||
project: RouterOutputs["projects"]["get"];
|
||||
|
@ -44,7 +44,7 @@ export function ProjectLayout(props: {
|
|||
: undefined,
|
||||
}}
|
||||
>
|
||||
<h1 className="text-3xl font-bold">
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
{project.data.friendlyName}{" "}
|
||||
<span className="text-nowrap text-sm font-normal text-muted-foreground">
|
||||
({project.data.internalName})
|
|
@ -1,5 +1,5 @@
|
|||
import { api } from "~/trpc/server";
|
||||
import { ProjectLayout } from "./_components/ProjectLayout";
|
||||
import { ProjectLayout } from "./ProjectLayout";
|
||||
|
||||
export default async function ProjectPage(props: {
|
||||
params: { id: string };
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
export default function ProjectHome() {
|
||||
// return (
|
||||
// // <pre>{JSON.stringify(project, null, 2)}</pre>
|
||||
// )
|
||||
|
||||
return <p>hello world</p>;
|
||||
}
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const trimTrailingSlash = (path: string) => path.replace(/\/$/, "");
|
||||
|
||||
type SidebarNavItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
|
@ -10,7 +12,9 @@ type SidebarNavItem = {
|
|||
|
||||
export function SettingsHeader(props: { items: SidebarNavItem[] }) {
|
||||
const path = usePathname();
|
||||
const active = props.items.find((item) => item.href === path);
|
||||
const active = props.items.find(
|
||||
(item) => trimTrailingSlash(item.href) === path,
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
import Image from "next/image";
|
||||
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import { SidebarNav } from "~/components/SidebarNav";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import { SettingsHeader } from "./SettingsHeader";
|
||||
|
||||
const sidebarNavItems = [
|
||||
|
@ -23,29 +21,11 @@ interface SettingsLayoutProps {
|
|||
|
||||
export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="md:hidden">
|
||||
<Image
|
||||
src="/examples/forms-light.png"
|
||||
width={1280}
|
||||
height={791}
|
||||
alt="Forms"
|
||||
className="block dark:hidden"
|
||||
/>
|
||||
<Image
|
||||
src="/examples/forms-dark.png"
|
||||
width={1280}
|
||||
height={791}
|
||||
alt="Forms"
|
||||
className="hidden dark:block"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden space-y-6 p-10 pb-16 md:block">
|
||||
<div className="space-y-0.5">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your account settings as well as the global instance
|
||||
settings.
|
||||
Manage your account settings as well as the global instance settings.
|
||||
</p>
|
||||
</div>
|
||||
<Separator className="my-6" />
|
||||
|
@ -60,6 +40,5 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -29,7 +29,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
|
|||
href={item.href}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "ghost" }),
|
||||
pathname === item.href
|
||||
pathname === item.href.replace(/\/$/, "")
|
||||
? "bg-muted hover:bg-muted"
|
||||
: "hover:bg-transparent hover:underline",
|
||||
"justify-start",
|
||||
|
|
Loading…
Reference in a new issue