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 { Button } from "~/components/ui/button";
|
||||||
import { api } from "~/trpc/react";
|
import { api } from "~/trpc/react";
|
||||||
import { type RouterOutputs } from "~/trpc/shared";
|
import { type RouterOutputs } from "~/trpc/shared";
|
||||||
import { ProjectContextProvider } from "../_context/ProjectContext";
|
import { CreateService } from "./_components/CreateService";
|
||||||
import { CreateService } from "./CreateService";
|
import { ServiceCard } from "./_components/ServiceCard";
|
||||||
import { ServiceCard } from "./ServiceCard";
|
import { ProjectContextProvider } from "./_context/ProjectContext";
|
||||||
|
|
||||||
export function ProjectLayout(props: {
|
export function ProjectLayout(props: {
|
||||||
project: RouterOutputs["projects"]["get"];
|
project: RouterOutputs["projects"]["get"];
|
||||||
|
@ -44,7 +44,7 @@ export function ProjectLayout(props: {
|
||||||
: undefined,
|
: undefined,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h1 className="text-3xl font-bold">
|
<h1 className="text-3xl font-bold tracking-tight">
|
||||||
{project.data.friendlyName}{" "}
|
{project.data.friendlyName}{" "}
|
||||||
<span className="text-nowrap text-sm font-normal text-muted-foreground">
|
<span className="text-nowrap text-sm font-normal text-muted-foreground">
|
||||||
({project.data.internalName})
|
({project.data.internalName})
|
|
@ -1,5 +1,5 @@
|
||||||
import { api } from "~/trpc/server";
|
import { api } from "~/trpc/server";
|
||||||
import { ProjectLayout } from "./_components/ProjectLayout";
|
import { ProjectLayout } from "./ProjectLayout";
|
||||||
|
|
||||||
export default async function ProjectPage(props: {
|
export default async function ProjectPage(props: {
|
||||||
params: { id: string };
|
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";
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
const trimTrailingSlash = (path: string) => path.replace(/\/$/, "");
|
||||||
|
|
||||||
type SidebarNavItem = {
|
type SidebarNavItem = {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
|
@ -10,7 +12,9 @@ type SidebarNavItem = {
|
||||||
|
|
||||||
export function SettingsHeader(props: { items: SidebarNavItem[] }) {
|
export function SettingsHeader(props: { items: SidebarNavItem[] }) {
|
||||||
const path = usePathname();
|
const path = usePathname();
|
||||||
const active = props.items.find((item) => item.href === path);
|
const active = props.items.find(
|
||||||
|
(item) => trimTrailingSlash(item.href) === path,
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
import { Separator } from "~/components/ui/separator";
|
|
||||||
import { SidebarNav } from "~/components/SidebarNav";
|
import { SidebarNav } from "~/components/SidebarNav";
|
||||||
|
import { Separator } from "~/components/ui/separator";
|
||||||
import { SettingsHeader } from "./SettingsHeader";
|
import { SettingsHeader } from "./SettingsHeader";
|
||||||
|
|
||||||
const sidebarNavItems = [
|
const sidebarNavItems = [
|
||||||
|
@ -23,43 +21,24 @@ interface SettingsLayoutProps {
|
||||||
|
|
||||||
export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="hidden space-y-6 p-10 pb-16 md:block">
|
||||||
<div className="md:hidden">
|
<div className="space-y-0.5">
|
||||||
<Image
|
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
|
||||||
src="/examples/forms-light.png"
|
<p className="text-muted-foreground">
|
||||||
width={1280}
|
Manage your account settings as well as the global instance settings.
|
||||||
height={791}
|
</p>
|
||||||
alt="Forms"
|
|
||||||
className="block dark:hidden"
|
|
||||||
/>
|
|
||||||
<Image
|
|
||||||
src="/examples/forms-dark.png"
|
|
||||||
width={1280}
|
|
||||||
height={791}
|
|
||||||
alt="Forms"
|
|
||||||
className="hidden dark:block"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden space-y-6 p-10 pb-16 md:block">
|
<Separator className="my-6" />
|
||||||
<div className="space-y-0.5">
|
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
|
||||||
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
|
<aside className="-mx-4 lg:w-1/5">
|
||||||
<p className="text-muted-foreground">
|
<SidebarNav items={sidebarNavItems} />
|
||||||
Manage your account settings as well as the global instance
|
</aside>
|
||||||
settings.
|
<div className="flex-1 space-y-6 lg:max-w-2xl">
|
||||||
</p>
|
<SettingsHeader items={sidebarNavItems} />
|
||||||
</div>
|
<Separator />
|
||||||
<Separator className="my-6" />
|
{children}
|
||||||
<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={sidebarNavItems} />
|
|
||||||
</aside>
|
|
||||||
<div className="flex-1 space-y-6 lg:max-w-2xl">
|
|
||||||
<SettingsHeader items={sidebarNavItems} />
|
|
||||||
<Separator />
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,7 +29,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
|
||||||
href={item.href}
|
href={item.href}
|
||||||
className={cn(
|
className={cn(
|
||||||
buttonVariants({ variant: "ghost" }),
|
buttonVariants({ variant: "ghost" }),
|
||||||
pathname === item.href
|
pathname === item.href.replace(/\/$/, "")
|
||||||
? "bg-muted hover:bg-muted"
|
? "bg-muted hover:bg-muted"
|
||||||
: "hover:bg-transparent hover:underline",
|
: "hover:bg-transparent hover:underline",
|
||||||
"justify-start",
|
"justify-start",
|
||||||
|
|
Loading…
Reference in a new issue