lgtm

src/App.jsx

@@ -2,35 +2,32 @@ import "@code-hike/mdx/styles";
 import { MarigoldProvider } from "@marigold/components";
 import theme from "@marigold/theme-b2b";
 
-import Slides from "./slideshow.mdx";
+import Intro from "./intro.mdx";
 import Validation from "./validation.mdx";
 import Conclusion from "./conclusion.mdx";
 
 import { Example } from "./example";
-import { Frame } from "./Frame";
+import { Slide, Frame } from "./components";
 
 const App = () => (
- <div data-theme="b2b" className="content">
- <div className="content-item">
- <Slides />
- </div>
- <div className="content-item" style={{ maxWidth: 700 }}>
+ <Slide.Container>
+ <Slide>
+ <Intro />
+ </Slide>
+ <Slide maxWidth={700}>
  <Frame>
  <MarigoldProvider theme={theme}>
  <Example />
  </MarigoldProvider>
  </Frame>
- </div>
- <div className="content-item">
+ </Slide>
+ <Slide>
  <Validation />
- </div>
- <div
- className="content-item"
- style={{ display: "grid", placeItems: "center" }}
- >
+ </Slide>
+ <Slide>
  <Conclusion />
- </div>
- </div>
+ </Slide>
+ </Slide.Container>
 );
 
 export default App;

src/Frame.jsx → src/components.jsx

@@ -1,4 +1,5 @@
-// eslint-disable-next-line react/prop-types
+/* eslint-disable react/prop-types */
+
 export const Frame = ({ children }) => (
  <div
  className="ch-codegroup"
@@ -21,3 +22,17 @@ export const Frame = ({ children }) => (
  </div>
  </div>
 );
+
+export const Slide = ({ children, maxWidth }) => (
+ <div className="slide" style={{ maxWidth }}>
+ <div style={{ width: "100%" }}>{children} </div>
+ </div>
+);
+
+const SlideContainer = ({ children }) => (
+ <div data-theme="b2b" className="slide-container">
+ {children}
+ </div>
+);
+
+Slide.Container = SlideContainer;

src/conclusion.mdx

@@ -1,4 +1,5 @@
 ## Summary
 
 - Reduces the need for state management and boilerplate
--
+- Uses native input validation, opt-in for more complex use cases
+- Handles client-side **and** server-side errors

src/index.css

@@ -8,22 +8,55 @@
 
 body {
  background: #f9fafb;
+ height: 100vh;
 }
 
 /* LAYOUT */
-.content {
+.slide-container {
+ height: 100vh;
+ width: 100vw;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
 }
 
-.content-item {
+.slide {
+ display: grid;
+ place-items: center;
  scroll-snap-align: start;
  max-width: 900px;
  height: 100vh;
  margin: 0 auto;
  padding: 48px 0;
 }
 
+.slide h2 {
+ color: #030712;
+ font-size: clamp(48px, 2vw, 64px);
+ font-weight: 700;
+ text-decoration: underline;
+ text-underline-offset: 4px;
+ text-decoration-thickness: 4px;
+ text-decoration-color: #9ca3af;
+ margin-bottom: 16px;
+}
+
+.slide ul {
+ list-style: circle inside;
+}
+
+.slide li {
+ color: #374151;
+ font-size: clamp(24px, 2vw, 32px);
+ padding: 4px 0;
+}
+
+.slide strong {
+ font-weight: inherit;
+ text-decoration: underline;
+ text-underline-offset: 4px;
+ text-decoration-thickness: 2px;
+}
+
 /* CODE HIKE */
 .ch-codegroup {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

src/slideshow.mdx → src/intro.mdx

@@ -176,12 +176,6 @@ export const App = () => {
 
 ---
 
-```tsx example.tsx
-
-```
-
----
-
 ```tsx example.tsx
 export const App = () => {
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {