Skip to content

Commit 953b909

Browse files
petervachonruudandriessen
petervachon
authored and
ruudandriessen
committed
chore(repo): create branch for layout collaboration
This branch tests the process for creating and contributing new page layouts. Initial PR creates a unique link to share with team members for feedback and collaboration.
1 parent 4faba1e commit 953b909

19 files changed

Lines changed: 1707 additions & 40 deletions

‎apps/apollo-vertex/app/_meta.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export default {
44
"shadcn-components": "Shadcn Components",
55
"vertex-components": "Vertex Components",
66
themes: "Themes",
7+
"page-layouts": "Page Layouts",
78
};

‎apps/apollo-vertex/app/page-layouts/dashboard/page.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { DashboardLayoutTemplate } from '@/templates/DashboardLayoutTemplate';
2+
3+
# Dashboard
4+
5+
This is a blank dashboard page layout with the shell component.
6+
7+
<div className="not-prose my-8 rounded-lg overflow-hidden" style={{ height: '600px' }}>
8+
<div className="[&_.h-screen]:!h-full h-full">
9+
<DashboardLayoutTemplate />
10+
</div>
11+
</div>
12+
13+
## Usage
14+
15+
This page provides a starting point for building dashboard layouts within the Apollo Vertex design system.

‎apps/apollo-vertex/app/page-layouts/detail/page.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { DetailLayoutTemplate } from '@/templates/DetailLayoutTemplate';
2+
3+
# Detail
4+
5+
This is a blank detail page layout with the shell component.
6+
7+
<div className="not-prose my-8 rounded-lg overflow-hidden" style={{ height: '600px' }}>
8+
<div className="[&_.h-screen]:!h-full h-full">
9+
<DetailLayoutTemplate />
10+
</div>
11+
</div>
12+
13+
## Usage
14+
15+
This page provides a starting point for building detail view layouts within the Apollo Vertex design system.

‎apps/apollo-vertex/app/page-layouts/list/page.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ListLayoutTemplate } from '@/templates/ListLayoutTemplate';
2+
3+
# List
4+
5+
This is a blank list page layout with the shell component.
6+
7+
<div className="not-prose my-8 rounded-lg overflow-hidden" style={{ height: '600px' }}>
8+
<div className="[&_.h-screen]:!h-full h-full">
9+
<ListLayoutTemplate />
10+
</div>
11+
</div>
12+
13+
## Usage
14+
15+
This page provides a starting point for building list view layouts within the Apollo Vertex design system.

‎apps/apollo-vertex/next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3-
import "./.next/types/routes.d.ts";
3+
import "./.next/dev/types/routes.d.ts";
44

55
// NOTE: This file should not be edited
66
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

‎apps/apollo-vertex/registry/dropdown-menu/dropdown-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function DropdownMenuContent({
4242
data-slot="dropdown-menu-content"
4343
sideOffset={sideOffset}
4444
className={cn(
45-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
45+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10001] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
4646
className,
4747
)}
4848
{...props}

‎apps/apollo-vertex/registry/select/select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ function SelectContent({
6262
<SelectPrimitive.Content
6363
data-slot="select-content"
6464
className={cn(
65-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
65+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[10001] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
6666
position === "popper" &&
6767
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
6868
className,

‎apps/apollo-vertex/registry/shell/internal/shell-layout.tsx‎

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface ShellLayoutProps {
99
companyName: string;
1010
productName: string;
1111
companyLogo?: CompanyLogo;
12+
backgroundMode?: string;
1213
}
1314

1415
function DarkGradientBackground() {
@@ -275,17 +276,119 @@ export function ShellLayout({
275276
companyName,
276277
productName,
277278
companyLogo,
279+
backgroundMode = "flat",
278280
}: PropsWithChildren<ShellLayoutProps>) {
279281
return (
280-
<div className="h-screen overflow-hidden flex bg-sidebar">
282+
<div className="h-screen pl-3 overflow-hidden flex gap-2 bg-sidebar">
281283
<Sidebar
282284
companyName={companyName}
283285
productName={productName}
284286
companyLogo={companyLogo}
285287
/>
286-
<main className="flex-1 flex flex-col overflow-hidden relative">
287-
<GradientBackground />
288-
<div className="flex-1 overflow-y-auto custom-scrollbar">
288+
<main
289+
className="flex-1 flex flex-col overflow-hidden relative"
290+
style={{
291+
backgroundColor: backgroundMode === "expressive" ? "#190D33" : undefined,
292+
}}
293+
>
294+
{/* Gradient Background for flat mode */}
295+
{backgroundMode === "flat" && <GradientBackground />}
296+
297+
{/* Expressive Background Elements */}
298+
{backgroundMode === "expressive" && (
299+
<>
300+
{/* Bg container */}
301+
<div
302+
className="absolute overflow-hidden pointer-events-none transition-opacity duration-300"
303+
style={{
304+
width: '2184.47px',
305+
height: '1494.44px',
306+
left: '-208px',
307+
top: '-252px',
308+
opacity: backgroundMode === "expressive" ? 1 : 0,
309+
}}
310+
>
311+
{/* Vector 210 */}
312+
<div
313+
className="absolute transition-opacity duration-300"
314+
style={{
315+
width: '807px',
316+
height: '789px',
317+
left: '650px',
318+
top: '257px',
319+
background: 'rgba(78, 9, 77, 0.6)',
320+
filter: 'blur(90px)',
321+
opacity: backgroundMode === "expressive" ? 1 : 0,
322+
transitionDelay: '0ms',
323+
}}
324+
/>
325+
326+
{/* Vector 212 */}
327+
<div
328+
className="absolute transition-opacity duration-300"
329+
style={{
330+
width: '1309px',
331+
height: '737px',
332+
left: '-70px',
333+
top: '-46px',
334+
background: '#223045',
335+
filter: 'blur(60px)',
336+
opacity: backgroundMode === "expressive" ? 1 : 0,
337+
transitionDelay: '50ms',
338+
}}
339+
/>
340+
341+
{/* Vector 211 */}
342+
<div
343+
className="absolute transition-opacity duration-300"
344+
style={{
345+
width: '1260px',
346+
height: '800px',
347+
left: '-208px',
348+
top: '0px',
349+
background: 'rgba(244, 66, 35, 0.27)',
350+
filter: 'blur(90px)',
351+
transform: 'rotate(23.94deg)',
352+
opacity: backgroundMode === "expressive" ? 1 : 0,
353+
transitionDelay: '100ms',
354+
}}
355+
/>
356+
357+
{/* Vector 213 */}
358+
<div
359+
className="absolute transition-opacity duration-300"
360+
style={{
361+
width: '1408px',
362+
height: '523.77px',
363+
left: '484px',
364+
top: '-252px',
365+
background: 'linear-gradient(257.56deg, rgba(152, 166, 184, 0.5) 36.7%, rgba(68, 74, 82, 0.5) 88.5%)',
366+
filter: 'blur(100px)',
367+
transform: 'rotate(-13.86deg)',
368+
opacity: backgroundMode === "expressive" ? 1 : 0,
369+
transitionDelay: '150ms',
370+
}}
371+
/>
372+
</div>
373+
374+
{/* CoverLayer */}
375+
<div
376+
className="absolute pointer-events-none transition-opacity duration-300"
377+
style={{
378+
width: '1440px',
379+
height: '813px',
380+
left: '0px',
381+
top: '0px',
382+
background: 'rgba(25, 13, 51, 0.79)',
383+
mixBlendMode: 'overlay',
384+
opacity: backgroundMode === "expressive" ? 1 : 0,
385+
transitionDelay: '200ms',
386+
}}
387+
/>
388+
</>
389+
)}
390+
391+
<div className="flex-1 overflow-y-auto custom-scrollbar relative z-10">
289392
{children}
290393
</div>
291394
</main>

0 commit comments

Comments
 (0)