Martin Dvorak
a8c752828e
The last visible difference between the two CTAs was the container: the deck button lived in a full-bleed sticky strip (translucent background, hairline top border, its own padding), which also tinted the disabled chip differently. The homework button sits plainly in the page flow. - The CTA block is now a plain space-y-2 stack at the end of the form: full-width button + centred helper line, exactly like /homework. - /create's page padding switches from the sticky-era .pb-cta (9rem, phone override 4.6rem) to .pb-tabbar, and lg:pb-20 to lg:pb-16 — identical to the homework page. The now-unused .pb-cta rules are gone. - Result: same button width (358px @390 / 688px @1280), height, radius, helper placement and trailing space on both pages; neither has a sticky ancestor any more. Service worker: freezmo-v16. Verified: CTA-flow suite 26/26 (below-the-fold at rest, no sticky ancestor, full-width, helper centred underneath, width/height/radius/trailing-space parity at 390px and 1280px), desktop regression 74/74, mobile 51/51, i18n 27/27. Lint + build clean.
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { redirect } from "next/navigation";
|
|
|
|
import { ApiKeyGate } from "@/components/ApiKeyGate";
|
|
import { AppHeader } from "@/components/AppHeader";
|
|
import { MobileSidebar, Sidebar, SidebarOffset } from "@/components/Sidebar";
|
|
import { TabBar } from "@/components/TabBar";
|
|
import { UploadScreen } from "@/components/UploadScreen";
|
|
|
|
export const metadata = {
|
|
title: "New deck",
|
|
};
|
|
|
|
export default async function CreatePage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
|
}) {
|
|
const { mode } = await searchParams;
|
|
// The library's quick actions (and the mode switch) deep-link into a mode;
|
|
// a link that points at the other side is handed to the page that owns it.
|
|
if (mode === "homework") redirect("/homework?mode=homework");
|
|
|
|
return (
|
|
<ApiKeyGate>
|
|
<div className="flex min-h-dvh">
|
|
<Sidebar />
|
|
<SidebarOffset />
|
|
<MobileSidebar />
|
|
<main className="flex min-h-dvh min-w-0 flex-1 flex-col">
|
|
<AppHeader />
|
|
<div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16">
|
|
<UploadScreen />
|
|
</div>
|
|
<TabBar />
|
|
</main>
|
|
</div>
|
|
</ApiKeyGate>
|
|
);
|
|
}
|