create title bar component

components/WindowControls.js

@@ -38,6 +38,47 @@ const CopyButton = React.memo(function CopyButton({ text }) {
 
 const WINDOW_THEMES_MAP = { bw: <ControlsBW />, boxy: <ControlsBoxy /> }
 
+export function TitleBar({ light, value, onChange }) {
+  return (
+    <div>
+      <input
+        aria-label="Image title"
+        type="text"
+        spellCheck="false"
+        value={value || ''}
+        onChange={e => onChange(e.target.value)}
+      />
+      <style jsx>
+        {`
+          div {
+            position: absolute;
+            margin: 0px;
+            top: -3px;
+            left: -9px;
+            width: 100%;
+            text-align: center;
+          }
+
+          input {
+            width: 250px;
+            background: none;
+            outline: none;
+            border: none;
+            text-align: center;
+            /**
+             * 140px is an arbitrary value, but it's roughly equal to:
+             * 2 * (window theme width + window theme outside margin)
+             */
+            max-width: calc(100% - 140px);
+            font-size: 14px;
+            color: ${light ? COLORS.BLACK : COLORS.SECONDARY};
+          }
+        `}
+      </style>
+    </div>
+  )
+}
+
 export default function WindowControls({
   theme,
   copyable,
@@ -49,15 +90,7 @@ export default function WindowControls({
   return (
     <div className="window-controls">
       {WINDOW_THEMES_MAP[theme] || <Controls />}
-      <div className="window-title-container">
+      <TitleBar value={titleBar} onChange={onTitleBarChange} light={light} />
-        <input
-          aria-label="Image title"
-          type="text"
-          spellCheck="false"
-          value={titleBar || ''}
-          onChange={e => onTitleBarChange(e.target.value)}
-        />
-      </div>
       {copyable && (
         <div className="copy-button">
           <CopyButton text={code} />
@@ -75,30 +108,6 @@ export default function WindowControls({
             text-align: ${theme === 'boxy' ? 'right' : 'initial'};
           }
 
-          .window-title-container {
-            position: absolute;
-            margin: 0px;
-            top: -3px;
-            left: -9px;
-            width: 100%;
-            text-align: center;
-          }
-
-          input {
-            width: 250px;
-            background: none;
-            outline: none;
-            border: none;
-            text-align: center;
-            /**
-         * 140px is an arbitrary value, but it's roughly equal to:
-         * 2 * (window theme width + window theme outside margin)
-         */
-            max-width: calc(100% - 140px);
-            font-size: 14px;
-            color: ${light ? COLORS.BLACK : COLORS.SECONDARY};
-          }
-
           .copy-button {
             cursor: pointer;
             position: absolute;