Skip to content

Commit 560985d

Browse files
arjunkomatharjunkomath
authored
Merge pull request #85 from techulus/develop
feat: Roadmap
2 parents bca1667 + 0672911 commit 560985d

File tree

102 files changed

+6062
-1324
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+6062
-1324
lines changed

‎apps/page/components/core/progress-bar.component.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Router from "next/router";
2+
import NProgress from "nprogress";
3+
import "nprogress/nprogress.css";
4+
5+
NProgress.configure({
6+
minimum: 0.3,
7+
easing: "ease",
8+
speed: 500,
9+
showSpinner: false,
10+
});
11+
12+
Router.events.on("routeChangeStart", () => NProgress.start());
13+
Router.events.on("routeChangeComplete", () => NProgress.done());
14+
Router.events.on("routeChangeError", () => NProgress.done());
15+
16+
export default function ProgressBar() {
17+
return null;
18+
}

‎apps/page/components/page-header.tsx‎

Lines changed: 106 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
import { IPage, IPageSettings } from "@changes-page/supabase/types/page";
2+
import { Menu } from "@headlessui/react";
3+
import { ChevronDownIcon } from "@heroicons/react/outline";
24
import classNames from "classnames";
35
import Image from "next/image";
6+
import Link from "next/link";
7+
import { PageRoadmap } from "../lib/data";
48
import OptionalLink from "./optional-link";
59

610
export default function PageHeader({
711
page,
812
settings,
13+
roadmaps = [],
14+
isRoadmapPage = false,
915
}: {
1016
page: IPage;
1117
settings: IPageSettings;
18+
roadmaps?: PageRoadmap[];
19+
isRoadmapPage?: boolean;
1220
}) {
1321
return (
1422
<>
@@ -33,40 +41,120 @@ export default function PageHeader({
3341

3442
<div
3543
className={classNames(
36-
"relative max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8",
44+
"relative mx-auto max-w-4xl py-8 px-4 sm:px-6 lg:px-8",
3745
settings?.cover_image && settings?.page_logo && "-mt-24 z-50"
3846
)}
3947
>
40-
<div className="space-y-8 sm:space-y-12">
41-
<div className="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
42-
<OptionalLink href={settings?.product_url}>
43-
{settings?.page_logo ? (
44-
<>
48+
<div className="space-y-6 sm:space-y-8">
49+
<div className="space-y-3 sm:space-y-4">
50+
<div className="flex items-center space-x-4">
51+
{settings?.page_logo && (
52+
<OptionalLink href={settings?.product_url}>
4553
<Image
4654
placeholder="blur"
4755
blurDataURL="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
48-
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"
56+
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"
4957
alt={page?.title}
5058
src={settings?.page_logo}
51-
width={128}
52-
height={128}
59+
width={64}
60+
height={64}
5361
/>
54-
<h1 className="hidden" aria-hidden>
62+
</OptionalLink>
63+
)}
64+
<div>
65+
<OptionalLink href={settings?.product_url}>
66+
<h1 className="text-2xl font-extrabold tracking-tight sm:text-3xl cp__page-title">
5567
{page?.title}
5668
</h1>
57-
</>
58-
) : (
59-
<h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl cp__page-title">
60-
{page?.title}
61-
</h1>
62-
)}
63-
</OptionalLink>
69+
</OptionalLink>
70+
</div>
71+
</div>
6472

6573
{page?.description && (
66-
<p className="text-md md:text-xl text-gray-600 dark:text-gray-300 max-w-lg mx-auto cp__page-description">
74+
<p className="text-sm md:text-lg text-gray-600 dark:text-gray-300 cp__page-description">
6775
{page?.description}
6876
</p>
6977
)}
78+
79+
{/* Navigation bar - only show if there are roadmaps */}
80+
{roadmaps.length > 0 && (
81+
<div className="border-b border-gray-200 dark:border-gray-700">
82+
<nav className="-mb-px flex space-x-8">
83+
<Link
84+
href="/"
85+
className={`py-2 px-1 border-b-2 font-medium text-sm ${
86+
!isRoadmapPage
87+
? "border-indigo-500 text-indigo-600 dark:text-indigo-400"
88+
: "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"
89+
}`}
90+
>
91+
Changelog
92+
</Link>
93+
94+
{roadmaps.length === 1 ? (
95+
<Link
96+
href={`/roadmap/${roadmaps[0].slug}`}
97+
className={`py-2 px-1 border-b-2 font-medium text-sm ${
98+
isRoadmapPage
99+
? "border-indigo-500 text-indigo-600 dark:text-indigo-400"
100+
: "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"
101+
}`}
102+
>
103+
Roadmap
104+
</Link>
105+
) : (
106+
<Menu as="div" className="relative">
107+
{({ open }) => (
108+
<>
109+
<Menu.Button
110+
className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center ${
111+
isRoadmapPage
112+
? "border-indigo-500 text-indigo-600 dark:text-indigo-400"
113+
: "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"
114+
}`}
115+
>
116+
Roadmaps
117+
<ChevronDownIcon
118+
className={`ml-1 h-4 w-4 transform transition-transform ${
119+
open ? "rotate-180" : ""
120+
}`}
121+
/>
122+
</Menu.Button>
123+
124+
<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">
125+
<div className="py-1">
126+
{roadmaps.map((roadmap) => (
127+
<Menu.Item key={roadmap.id}>
128+
{({ active }) => (
129+
<Link
130+
href={`/roadmap/${roadmap.slug}`}
131+
className={`block px-4 py-2 text-sm ${
132+
active
133+
? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
134+
: "text-gray-700 dark:text-gray-300"
135+
}`}
136+
>
137+
<div className="font-medium">
138+
{roadmap.title}
139+
</div>
140+
{roadmap.description && (
141+
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
142+
{roadmap.description}
143+
</div>
144+
)}
145+
</Link>
146+
)}
147+
</Menu.Item>
148+
))}
149+
</div>
150+
</Menu.Items>
151+
</>
152+
)}
153+
</Menu>
154+
)}
155+
</nav>
156+
</div>
157+
)}
70158
</div>
71159
</div>
72160
</div>

0 commit comments

Comments
 (0)