improve styling ending state

Author: kentcdodds

10-styling.html

@@ -25,36 +25,29 @@
     }
   </style>
   <script type="text/babel">
-    const smallBox = (
-      <div
-        className="box box--small"
-        style={{fontStyle: 'italic', backgroundColor: 'lightblue'}}
-      >
-        small lightblue box
-      </div>
-    )
-    const mediumBox = (
-      <div
-        className="box box--medium"
-        style={{fontStyle: 'italic', backgroundColor: 'pink'}}
-      >
-        medium pink box
-      </div>
-    )
-    const largeBox = (
-      <div
-        className="box box--large"
-        style={{fontStyle: 'italic', backgroundColor: 'orange'}}
-      >
-        large orange box
-      </div>
-    )
+    function Box({style, size, className = '', ...otherProps}) {
+      const sizeClassName = size ? `box--${size}` : ''
+      return (
+        <div
+          className={`box ${className} ${sizeClassName}`}
+          style={{fontStyle: 'italic', ...style}}
+          {...otherProps}
+        />
+      )
+    }
 
     const element = (
       <div>
-        {smallBox}
-        {mediumBox}
-        {largeBox}
+        <Box size="small" style={{backgroundColor: 'lightblue'}}>
+          small lightblue box
+        </Box>
+        <Box size="medium" style={{backgroundColor: 'pink'}}>
+          medium pink box
+        </Box>
+        <Box size="large" style={{backgroundColor: 'orange'}}>
+          large orange box
+        </Box>
+        <Box>sizeless box</Box>
       </div>
     )