@@ -34,37 +34,22 @@ export function GuideOverview({ children, className }: GuideOverviewProps) {
3434 className
3535 ) }
3636 >
37- { /* Outcomes section (full width) */ }
38- { outcomes && (
39- < div className = "mb-6" >
40- < h2 className = "mb-3 font-semibold text-card-foreground text-xl" >
41- Outcomes
42- </ h2 >
43- < div className = "text-muted-foreground" >
44- { React . isValidElement ( outcomes ) &&
45- ( outcomes . props as { children : React . ReactNode } ) . children }
46- </ div >
47- </ div >
48- ) }
49-
50- { /* Two column layout - You will Learn (2/3) and Prerequisites (1/3) */ }
51- < div className = "grid gap-6 md:grid-cols-3" >
52- { /* You will Learn column - takes 2/3 of width */ }
53- { youWillLearn && (
54- < div className = "md:col-span-2" >
55- < h3 className = "mb-3 font-medium text-card-foreground text-lg" >
56- You will Learn
57- </ h3 >
58- < div className = "space-y-2 text-muted-foreground text-sm" >
59- { React . isValidElement ( youWillLearn ) &&
60- ( youWillLearn . props as { children : React . ReactNode } ) . children }
37+ { /* When only Outcomes and Prerequisites exist, show them side by side */ }
38+ { outcomes && prerequisites && ! youWillLearn && (
39+ < div className = "grid gap-6 md:grid-cols-2" >
40+ { /* Outcomes column */ }
41+ < div >
42+ < h2 className = "mb-3 font-semibold text-card-foreground text-xl" >
43+ Outcomes
44+ </ h2 >
45+ < div className = "text-muted-foreground" >
46+ { React . isValidElement ( outcomes ) &&
47+ ( outcomes . props as { children : React . ReactNode } ) . children }
6148 </ div >
6249 </ div >
63- ) }
6450
65- { /* Prerequisites column - takes 1/3 of width */ }
66- { prerequisites && (
67- < div className = "md:col-span-1" >
51+ { /* Prerequisites column */ }
52+ < div >
6853 < h3 className = "mb-3 font-medium text-card-foreground text-lg" >
6954 Prerequisites
7055 </ h3 >
@@ -73,8 +58,80 @@ export function GuideOverview({ children, className }: GuideOverviewProps) {
7358 ( prerequisites . props as { children : React . ReactNode } ) . children }
7459 </ div >
7560 </ div >
76- ) }
77- </ div >
61+ </ div >
62+ ) }
63+
64+ { /* When YouWillLearn exists, use the original layout */ }
65+ { youWillLearn && (
66+ < >
67+ { /* Outcomes section (full width) */ }
68+ { outcomes && (
69+ < div className = "mb-6" >
70+ < h2 className = "mb-3 font-semibold text-card-foreground text-xl" >
71+ Outcomes
72+ </ h2 >
73+ < div className = "text-muted-foreground" >
74+ { React . isValidElement ( outcomes ) &&
75+ ( outcomes . props as { children : React . ReactNode } ) . children }
76+ </ div >
77+ </ div >
78+ ) }
79+
80+ { /* Two column layout - You will Learn (2/3) and Prerequisites (1/3) */ }
81+ < div className = "grid gap-6 md:grid-cols-3" >
82+ { /* You will Learn column - takes 2/3 of width */ }
83+ < div className = "md:col-span-2" >
84+ < h3 className = "mb-3 font-medium text-card-foreground text-lg" >
85+ You will Learn
86+ </ h3 >
87+ < div className = "space-y-2 text-muted-foreground text-sm" >
88+ { React . isValidElement ( youWillLearn ) &&
89+ ( youWillLearn . props as { children : React . ReactNode } )
90+ . children }
91+ </ div >
92+ </ div >
93+
94+ { /* Prerequisites column - takes 1/3 of width */ }
95+ { prerequisites && (
96+ < div className = "md:col-span-1" >
97+ < h3 className = "mb-3 font-medium text-card-foreground text-lg" >
98+ Prerequisites
99+ </ h3 >
100+ < div className = "space-y-2 text-muted-foreground text-sm" >
101+ { React . isValidElement ( prerequisites ) &&
102+ ( prerequisites . props as { children : React . ReactNode } )
103+ . children }
104+ </ div >
105+ </ div >
106+ ) }
107+ </ div >
108+ </ >
109+ ) }
110+
111+ { /* Fallback for edge cases - only outcomes, only prerequisites, etc. */ }
112+ { outcomes && ! prerequisites && ! youWillLearn && (
113+ < div >
114+ < h2 className = "mb-3 font-semibold text-card-foreground text-xl" >
115+ Outcomes
116+ </ h2 >
117+ < div className = "text-muted-foreground" >
118+ { React . isValidElement ( outcomes ) &&
119+ ( outcomes . props as { children : React . ReactNode } ) . children }
120+ </ div >
121+ </ div >
122+ ) }
123+
124+ { ! outcomes && prerequisites && ! youWillLearn && (
125+ < div >
126+ < h3 className = "mb-3 font-medium text-card-foreground text-lg" >
127+ Prerequisites
128+ </ h3 >
129+ < div className = "space-y-2 text-muted-foreground text-sm" >
130+ { React . isValidElement ( prerequisites ) &&
131+ ( prerequisites . props as { children : React . ReactNode } ) . children }
132+ </ div >
133+ </ div >
134+ ) }
78135 </ div >
79136 ) ;
80137}
0 commit comments