Skip to content

Commit 46ffc1b

Browse files
petervachonpetervachon
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 8492a3a commit 46ffc1b

20 files changed

Lines changed: 17000 additions & 7 deletions

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

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

‎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: 104 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,124 @@ interface ShellLayoutProps {
66
companyName: string;
77
productName: string;
88
companyLogo?: CompanyLogo;
9+
backgroundMode?: string;
910
}
1011

1112
export function ShellLayout({
1213
children,
1314
companyName,
1415
productName,
1516
companyLogo,
17+
backgroundMode = "flat",
1618
}: PropsWithChildren<ShellLayoutProps>) {
1719
return (
18-
<div className="h-screen p-3 overflow-hidden flex gap-2 bg-sidebar">
20+
<div className="h-screen pl-3 overflow-hidden flex gap-2 bg-sidebar">
1921
<Sidebar
2022
companyName={companyName}
2123
productName={productName}
2224
companyLogo={companyLogo}
2325
/>
24-
<main className="flex-1 flex flex-col overflow-hidden bg-background rounded-2xl border border-foreground/15">
25-
<div className="flex-1 overflow-y-auto custom-scrollbar">
26+
<main
27+
className="flex-1 flex flex-col overflow-hidden relative"
28+
style={{
29+
backgroundColor: backgroundMode === "expressive" ? "#190D33" : undefined,
30+
}}
31+
>
32+
{/* Expressive Background Elements */}
33+
{backgroundMode === "expressive" && (
34+
<>
35+
{/* Bg container */}
36+
<div
37+
className="absolute overflow-hidden pointer-events-none transition-opacity duration-300"
38+
style={{
39+
width: '2184.47px',
40+
height: '1494.44px',
41+
left: '-208px',
42+
top: '-252px',
43+
opacity: backgroundMode === "expressive" ? 1 : 0,
44+
}}
45+
>
46+
{/* Vector 210 */}
47+
<div
48+
className="absolute transition-opacity duration-300"
49+
style={{
50+
width: '807px',
51+
height: '789px',
52+
left: '650px',
53+
top: '257px',
54+
background: 'rgba(78, 9, 77, 0.6)',
55+
filter: 'blur(90px)',
56+
opacity: backgroundMode === "expressive" ? 1 : 0,
57+
transitionDelay: '0ms',
58+
}}
59+
/>
60+
61+
{/* Vector 212 */}
62+
<div
63+
className="absolute transition-opacity duration-300"
64+
style={{
65+
width: '1309px',
66+
height: '737px',
67+
left: '-70px',
68+
top: '-46px',
69+
background: '#223045',
70+
filter: 'blur(60px)',
71+
opacity: backgroundMode === "expressive" ? 1 : 0,
72+
transitionDelay: '50ms',
73+
}}
74+
/>
75+
76+
{/* Vector 211 */}
77+
<div
78+
className="absolute transition-opacity duration-300"
79+
style={{
80+
width: '1260px',
81+
height: '800px',
82+
left: '-208px',
83+
top: '0px',
84+
background: 'rgba(244, 66, 35, 0.27)',
85+
filter: 'blur(90px)',
86+
transform: 'rotate(23.94deg)',
87+
opacity: backgroundMode === "expressive" ? 1 : 0,
88+
transitionDelay: '100ms',
89+
}}
90+
/>
91+
92+
{/* Vector 213 */}
93+
<div
94+
className="absolute transition-opacity duration-300"
95+
style={{
96+
width: '1408px',
97+
height: '523.77px',
98+
left: '484px',
99+
top: '-252px',
100+
background: 'linear-gradient(257.56deg, rgba(152, 166, 184, 0.5) 36.7%, rgba(68, 74, 82, 0.5) 88.5%)',
101+
filter: 'blur(100px)',
102+
transform: 'rotate(-13.86deg)',
103+
opacity: backgroundMode === "expressive" ? 1 : 0,
104+
transitionDelay: '150ms',
105+
}}
106+
/>
107+
</div>
108+
109+
{/* CoverLayer */}
110+
<div
111+
className="absolute pointer-events-none transition-opacity duration-300"
112+
style={{
113+
width: '1440px',
114+
height: '813px',
115+
left: '0px',
116+
top: '0px',
117+
background: 'rgba(25, 13, 51, 0.79)',
118+
mixBlendMode: 'overlay',
119+
opacity: backgroundMode === "expressive" ? 1 : 0,
120+
transitionDelay: '200ms',
121+
}}
122+
/>
123+
</>
124+
)}
125+
126+
<div className="flex-1 overflow-y-auto custom-scrollbar relative z-10">
26127
{children}
27128
</div>
28129
</main>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Sidebar = ({
3434
<motion.aside
3535
className={cn(
3636
sidebarWidth,
37-
"rounded-[10px] flex flex-col bg-sidebar will-change-[width] px-2 overflow-hidden",
37+
"rounded-[10px] flex flex-col bg-sidebar will-change-[width] px-2 pt-4 overflow-hidden",
3838
)}
3939
animate={{
4040
width: isCollapsed ? 48 : 264,

0 commit comments

Comments
 (0)