feat: create generic page template apply to Tag and Entry template

This commit is contained in:
Thomas Bishop 2025-07-25 16:01:28 +01:00
parent 3a0bed3355
commit 052f42b580
3 changed files with 34 additions and 39 deletions

View file

@ -1,25 +1,7 @@
import Main from "@/templates/Main"
import { useParams } from "react-router"
import Page from "./Page"
export default function Entry() {
const { entry } = useParams()
return (
<Main>
<div className="flex-1 flex flex-col overflow-auto">
<div className="@container/main flex flex-col">
<div className="flex flex-1">
<div className="border-l-none w-full">
<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
<h2 className="scroll-m-20 font-semibold">
<span>{entry?.replace(/_/g, " ")}</span>
</h2>
</div>
<div className="p-4 lg:p-6"></div>
</div>
</div>
</div>
</div>
</Main>
)
return <Page titleComponent={<span>{entry?.replace(/_/g, " ")}</span>} />
}

23
src/templates/Page.tsx Normal file
View file

@ -0,0 +1,23 @@
import Main from "./Main"
export default function Page({ pageTitle = null, pageBody = null, titleComponent = null }) {
return (
<Main>
<div className="flex-1 flex flex-col overflow-auto">
<div className="@container/main flex flex-col">
<div className="flex flex-1">
<div className="border-l-none w-full">
<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
<h2 className="scroll-m-20 font-semibold">
{titleComponent ? titleComponent : <span>{pageTitle}</span>}
</h2>
</div>
<div className="p-4 lg:p-6">{pageBody}</div>
</div>
</div>
</div>
</div>
</Main>
)
}

View file

@ -1,26 +1,16 @@
import Main from "@/templates/Main"
import { useParams } from "react-router"
import Page from "./Page"
export default function Tag() {
const { tag } = useParams()
return (
<Main>
<div className="flex-1 flex flex-col overflow-auto">
<div className="@container/main flex flex-col">
<div className="flex flex-1">
<div className="border-l-none w-full">
<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
<h2 className="scroll-m-20 font-semibold">
<Page
titleComponent={
<>
<span className="mr-2 text-muted-foreground">Entries tagged:</span>
<span>{tag}</span>
</h2>
</div>
<div className="p-4 lg:p-6"></div>
</div>
</div>
</div>
</div>
</Main>
</>
}
/>
)
}