@@ -97,8 +97,8 @@ export const Events: FC = () => {
9797 Storybook's thriving community can help answer your questions.
9898 Developers of all skill levels welcome.
9999 </ p >
100- < div className = "flex flex-col gap-8 mb -8 md:flex-row" >
101- < div className = "flex flex-1 gap-4 p-6 border rounded border-zinc-300 md:gap-6 md:p-8 dark:border-slate-700" >
100+ < div className = "mb-8 flex flex-col gap-8 md:flex-row" >
101+ < div className = "flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700" >
102102 < Youtube size = { 40 } />
103103 < div className = "flex-1" >
104104 < h2 className = "text-lg font-bold" > Subscribe to YouTube channel</ h2 >
@@ -114,7 +114,7 @@ export const Events: FC = () => {
114114 </ a >
115115 </ div >
116116 </ div >
117- < div className = "flex flex-1 gap-4 p-6 border rounded border-zinc-300 md:gap-6 md:p-8 dark:border-slate-700" >
117+ < div className = "flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700" >
118118 < TwitterIcon className = "h-10 w-10 text-[#4999e9]" />
119119 < div className = "flex-1" >
120120 < h2 className = "text-lg font-bold" > Twitter</ h2 >
@@ -131,8 +131,8 @@ export const Events: FC = () => {
131131 </ div >
132132 </ div >
133133 </ div >
134- < div className = "flex flex-col gap-8 mb -8 md:flex-row" >
135- < div className = "flex flex-1 gap-4 p-6 border rounded border-zinc-300 md:gap-6 md:p-8 dark:border-slate-700" >
134+ < div className = "mb-8 flex flex-col gap-8 md:flex-row" >
135+ < div className = "flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700" >
136136 < DiscordIcon className = "h-10 w-10 text-[#5a65ea]" />
137137 < div className = "flex-1" >
138138 < h2 className = "text-lg font-bold" > Follow #announcements chat</ h2 >
@@ -150,91 +150,6 @@ export const Events: FC = () => {
150150 </ div >
151151 < div className = "flex-1 px-6 md:px-8" />
152152 </ div >
153- < div >
154- < h3 className = "mb-3 text-lg font-bold" > Storybook Sessions</ h3 >
155- < div >
156- < p >
157- Join us for these 1-hour sessions, hosted by the{ ' ' }
158- < a href = "https://www.chromatic.com/" >
159- < span > Chromatic</ span >
160- </ a > { ' ' }
161- team. We'll explore the component-driven approach to building,
162- testing, and documenting UIs using Storybook. You'll learn how
163- to:
164- </ p >
165- < ul className = "pl-4 my-4 list-disc list-inside" >
166- < li >
167- Utilize addons to debug CSS, verify event handlers, and mock API
168- requests.
169- </ li >
170- < li >
171- Publish your Storybook to gather feedback and embed stories into
172- other tools.
173- </ li >
174- < li >
175- Strategies for organizing your stories and auto-generating docs.
176- </ li >
177- < li >
178- Use stories to test components for visual, functional, and
179- accessibility purposes.
180- </ li >
181- < li >
182- Facilitate better designer-developer collaboration using the
183- designs addon and the Storybook Connect plugin.
184- </ li >
185- </ ul >
186- </ div >
187- < h3 className = "mt-6 mb-3 text-lg font-bold" > Upcoming</ h3 >
188- < ul >
189- { localizedSessions . upcoming . map ( ( session ) => (
190- < li
191- className = "flex items-center justify-between border-b h-11 border-b-zinc-300 dark:border-b-slate-700"
192- key = { session . id }
193- >
194- < div className = "flex items-center gap-4" >
195- < CalendarIcon className = "w-4 h-4 text-zinc-500 dark:text-slate-400" />
196- < div className = "font-bold text-md" > { session . title } </ div >
197- < div > — </ div >
198- < div className = "text-md text-zinc-500 dark:text-slate-400" >
199- { session . dateShort }
200- </ div >
201- </ div >
202- < a
203- className = "flex items-center gap-2 text-blue-500"
204- href = { session . registrationLink }
205- rel = "noreferrer"
206- target = "_blank"
207- >
208- Register < ChevronSmallRightIcon />
209- </ a >
210- </ li >
211- ) ) }
212- </ ul >
213- { localizedSessions . upcoming . length === 0 && (
214- < div className = "p-6 border border-dashed rounded border-zinc-300 dark:border-slate-700" >
215- No upcoming sessions scheduled at the moment. To stay informed about
216- new sessions, please sign up for our newsletter.
217- </ div >
218- ) }
219- < h3 className = "mt-6 mb-3 text-lg font-bold" > Past</ h3 >
220- < ul >
221- { localizedSessions . past . map ( ( session ) => (
222- < li
223- className = "flex items-center border-b h-11 border-b-zinc-300 dark:border-slate-700"
224- key = { session . id }
225- >
226- < div className = "flex items-center gap-4" >
227- < CalendarIcon className = "w-4 h-4 text-zinc-500 dark:text-slate-400" />
228- < div className = "font-bold text-md" > { session . title } </ div >
229- < div > — </ div >
230- < div className = "text-md text-zinc-500 dark:text-slate-400" >
231- { session . dateShort }
232- </ div >
233- </ div >
234- </ li >
235- ) ) }
236- </ ul >
237- </ div >
238153 </ Section >
239154 ) ;
240155} ;
0 commit comments