Unify version select labels between docs and playground

Author: fhammerschmidt

package.json

@@ -57,7 +57,7 @@
     "unified": "^8.4.0"
   },
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "dev": "next",
     "build": "rescript && npm run update-index && next build",
     "test": "node scripts/test-examples.mjs && node scripts/test-hrefs.mjs",
     "reanalyze": "reanalyze -all-cmt .",

src/Playground.res

@@ -969,9 +969,7 @@ module Settings = {
                   cmp(b) - cmp(a)
                 })
                 <>
-                  <option disabled=true className="py-4">
-                    {React.string("--- Experimental ---")}
-                  </option>
+                  <VersionSelect.SectionHeader value=Constants.dropdownLabelNext />
                   {versionByOrder
                   ->Array.map(version => {
                     let version = Semver.toString(version)
@@ -980,9 +978,7 @@ module Settings = {
                     </option>
                   })
                   ->React.array}
-                  <option disabled=true className="py-4">
-                    {React.string("--- Official Releases ---")}
-                  </option>
+                  <VersionSelect.SectionHeader value=Constants.dropdownLabelReleased />
                 </>
               }}
               {switch stableVersions {

src/common/Constants.res

@@ -25,6 +25,9 @@ let nextVersion =
 
 let allReactVersions = [("latest", "v0.12.0"), ("v0.11.0", "v0.11.0"), ("v0.10.0", "v0.10.0")]
 
+let dropdownLabelNext = "--- Next ---"
+let dropdownLabelReleased = "--- Released ---"
+
 // Used for the DocsOverview and collapsible navigation
 let languageManual = version => {
   [

src/components/VersionSelect.res

@@ -1,3 +1,9 @@
+module SectionHeader = {
+  @react.component
+  let make = (~value) =>
+    <option disabled=true key=value className="py-4"> {React.string(value)} </option>
+}
+
 @react.component
 let make = (
   ~onChange,
@@ -18,13 +24,9 @@ let make = (
     | None => React.null
     | Some((value, label)) =>
       <>
-        <option disabled=true key="next-heading" className="py-4">
-          {React.string("--- Next ---")}
-        </option>
+        <SectionHeader value=Constants.dropdownLabelNext />
         <option className="py-4" key=value value> {React.string(label)} </option>
-        <option disabled=true key="released-heading" className="py-4">
-          {React.string("--- Released ---")}
-        </option>
+        <SectionHeader value=Constants.dropdownLabelReleased />
       </>
     }}
     {React.array(children)}

src/components/VersionSelect.resi

@@ -1,3 +1,8 @@
+module SectionHeader: {
+  @react.component
+  let make: (~value: string) => React.element
+}
+
 @react.component
 let make: (
   ~onChange: ReactEvent.Form.t => unit,