Skip to content

feat: Roadmaps #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Sep 7, 2025
Merged

feat: Roadmaps #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
526a1c9
Roadmaps initial version
arjunkomath Sep 2, 2025
3eecb09
Fix build
arjunkomath Sep 2, 2025
408d57d
Address code review
arjunkomath Sep 3, 2025
4aae2d8
Update board item view
arjunkomath Sep 3, 2025
26a48fc
Update roadmap board item UI
arjunkomath Sep 3, 2025
f918c4b
Address code review
arjunkomath Sep 6, 2025
fc1f429
Clean up header
arjunkomath Sep 6, 2025
26af1a5
Shared types
arjunkomath Sep 6, 2025
f2d41a5
Fix counting logic
arjunkomath Sep 6, 2025
dfb80cf
Clean up board page
arjunkomath Sep 7, 2025
c269802
Fix types
arjunkomath Sep 7, 2025
4fc7846
clean up tailwind config
arjunkomath Sep 7, 2025
5b0ef74
Address code review
arjunkomath Sep 7, 2025
8a61735
Fix reordering
arjunkomath Sep 7, 2025
93fb4fa
Address code review
arjunkomath Sep 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 106 additions & 18 deletions apps/page/components/page-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import { IPage, IPageSettings } from "@changes-page/supabase/types/page";
import { Menu } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/outline";
import classNames from "classnames";
import Image from "next/image";
import Link from "next/link";
import { PageRoadmap } from "../lib/data";
import OptionalLink from "./optional-link";

export default function PageHeader({
page,
settings,
roadmaps = [],
isRoadmapPage = false,
}: {
page: IPage;
settings: IPageSettings;
roadmaps?: PageRoadmap[];
isRoadmapPage?: boolean;
}) {
return (
<>
Expand All @@ -33,40 +41,120 @@ export default function PageHeader({

<div
className={classNames(
"relative max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8",
"relative mx-auto max-w-4xl py-8 px-4 sm:px-6 lg:px-8",
settings?.cover_image && settings?.page_logo && "-mt-24 z-50"
)}
>
<div className="space-y-8 sm:space-y-12">
<div className="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
<OptionalLink href={settings?.product_url}>
{settings?.page_logo ? (
<>
<div className="space-y-6 sm:space-y-8">
<div className="space-y-3 sm:space-y-4">
<div className="flex items-center space-x-4">
{settings?.page_logo && (
<OptionalLink href={settings?.product_url}>
<Image
placeholder="blur"
blurDataURL="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
className="h-24 w-24 md:h-32 md:w-32 mx-auto bg-gray-100 dark:bg-gray-900 rounded-full p-2 cp__page-logo"
className="h-12 w-12 md:h-16 md:w-16 bg-gray-100 dark:bg-gray-900 rounded-full p-2 cp__page-logo"
alt={page?.title}
src={settings?.page_logo}
width={128}
height={128}
width={64}
height={64}
/>
<h1 className="hidden" aria-hidden>
</OptionalLink>
)}
<div>
<OptionalLink href={settings?.product_url}>
<h1 className="text-2xl font-extrabold tracking-tight sm:text-3xl cp__page-title">
{page?.title}
</h1>
</>
) : (
<h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl cp__page-title">
{page?.title}
</h1>
)}
</OptionalLink>
</OptionalLink>
</div>
</div>

{page?.description && (
<p className="text-md md:text-xl text-gray-600 dark:text-gray-300 max-w-lg mx-auto cp__page-description">
<p className="text-sm md:text-lg text-gray-600 dark:text-gray-300 cp__page-description">
{page?.description}
</p>
)}

{/* Navigation bar - only show if there are roadmaps */}
{roadmaps.length > 0 && (
<div className="border-b border-gray-200 dark:border-gray-700">
<nav className="-mb-px flex space-x-8">
<Link
href="/"
className={`py-2 px-1 border-b-2 font-medium text-sm ${
!isRoadmapPage
? "border-indigo-500 text-indigo-600 dark:text-indigo-400"
: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
}`}
>
Changelog
</Link>

{roadmaps.length === 1 ? (
<Link
href={`/roadmap/${roadmaps[0].slug}`}
className={`py-2 px-1 border-b-2 font-medium text-sm ${
isRoadmapPage
? "border-indigo-500 text-indigo-600 dark:text-indigo-400"
: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
}`}
>
Roadmap
</Link>
) : (
<Menu as="div" className="relative">
{({ open }) => (
<>
<Menu.Button
className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center ${
isRoadmapPage
? "border-indigo-500 text-indigo-600 dark:text-indigo-400"
: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
}`}
>
Roadmaps
<ChevronDownIcon
className={`ml-1 h-4 w-4 transform transition-transform ${
open ? "rotate-180" : ""
}`}
/>
</Menu.Button>

<Menu.Items className="absolute left-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-700 z-50 focus:outline-none">
<div className="py-1">
{roadmaps.map((roadmap) => (
<Menu.Item key={roadmap.id}>
{({ active }) => (
<Link
href={`/roadmap/${roadmap.slug}`}
className={`block px-4 py-2 text-sm ${
active
? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
: "text-gray-700 dark:text-gray-300"
}`}
>
<div className="font-medium">
{roadmap.title}
</div>
{roadmap.description && (
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
{roadmap.description}
</div>
)}
</Link>
)}
</Menu.Item>
))}
</div>
</Menu.Items>
</>
)}
</Menu>
)}
</nav>
</div>
)}
</div>
</div>
</div>
Expand Down
Loading