feat : use same size as admin for nav bar

This commit is contained in:
2026-10-08 22:34:49 +07:00 Unverified
parent 065099b2b1
commit 36063fc214
6 changed files with 66 additions and 62 deletions
+32 -30
View File
@@ -63,36 +63,38 @@ export default async function StructuredEditorPage({
<div className="min-h-svh">
<AdminHeader />
<main className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
<header className="flex items-center gap-4">
<Button
variant="ghost"
size="icon"
render={<Link href="/admin" />}
nativeButton={false}
aria-label="กลับ Dashboard"
>
<ArrowLeftIcon />
</Button>
<div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
<Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
</div>
<div className="min-w-0">
<p className="text-sm text-muted-foreground">{guide.name}</p>
<h1 className="whitespace-nowrap font-heading text-3xl font-semibold">
{sectionTitle}
</h1>
<EditorPresence guideId={guide.id} section={sectionTitle} />
</div>
<Button className="ml-auto" variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview/${page}`} target="_blank" />} nativeButton={false}>
Preview
</Button>
</header>
<GuideSectionNav
guideId={guide.id}
characterKey={guide.characterKey}
current={page}
extras={extraSections.map(({ id, slug, title }) => ({ id, slug, title }))}
/>
<div className="flex flex-col">
<header className="flex items-center gap-4">
<Button
variant="ghost"
size="icon"
render={<Link href="/admin" />}
nativeButton={false}
aria-label="กลับ Dashboard"
>
<ArrowLeftIcon />
</Button>
<div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
<Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
</div>
<div className="min-w-0">
<p className="text-sm text-muted-foreground">{guide.name}</p>
<h1 className="whitespace-nowrap font-heading text-3xl font-semibold">
{sectionTitle}
</h1>
<EditorPresence guideId={guide.id} section={sectionTitle} />
</div>
<Button className="ml-auto" variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview/${page}`} target="_blank" />} nativeButton={false}>
Preview
</Button>
</header>
<GuideSectionNav
guideId={guide.id}
characterKey={guide.characterKey}
current={page}
extras={extraSections.map(({ id, slug, title }) => ({ id, slug, title }))}
/>
</div>
<GuideSectionEditor
key={`${editorSection}:${extraSection?.id ?? "fixed"}:${guide.version}`}
section={editorSection}
+20 -18
View File
@@ -39,24 +39,26 @@ export default async function GuideOverviewPage({ params }: { params: Promise<{
<div className="min-h-svh">
<AdminHeader />
<main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
<header className="flex flex-wrap items-center gap-4">
<Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard">
<ArrowLeftIcon />
</Button>
<div className="relative size-16 overflow-hidden rounded-lg border">
<Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
</div>
<div className="min-w-0 flex-1">
<p className="text-sm text-muted-foreground">เลือกส่วนที่ต้องการแก้ไข</p>
<h1 className="font-heading text-3xl font-semibold">{guide.name}</h1>
<EditorPresence guideId={guide.id} section="Overview" />
</div>
<GuideVisibilityControl guideId={guide.id} guideName={guide.name} isPublic={guide.isPublic} version={guide.version} />
<Button variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview`} target="_blank" />} nativeButton={false}>
Preview
</Button>
</header>
<GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="overview" extras={extras} />
<div className="flex flex-col">
<header className="flex flex-wrap items-center gap-4">
<Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard">
<ArrowLeftIcon />
</Button>
<div className="relative size-16 overflow-hidden rounded-lg border">
<Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
</div>
<div className="min-w-0 flex-1">
<p className="text-sm text-muted-foreground">เลือกส่วนที่ต้องการแก้ไข</p>
<h1 className="font-heading text-3xl font-semibold">{guide.name}</h1>
<EditorPresence guideId={guide.id} section="Overview" />
</div>
<GuideVisibilityControl guideId={guide.id} guideName={guide.name} isPublic={guide.isPublic} version={guide.version} />
<Button variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview`} target="_blank" />} nativeButton={false}>
Preview
</Button>
</header>
<GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="overview" extras={extras} />
</div>
<GuideOverviewForm key={guide.version} guide={guide} />
<div className="grid gap-4 md:grid-cols-2">
{sections.map(({ slug, title, description }) => (