create title bar component

components/WindowControls.js

@@ -38,44 +38,19 @@ const CopyButton = React.memo(function CopyButton({ text }) {
 
 const WINDOW_THEMES_MAP = { bw: <ControlsBW />, boxy: <ControlsBoxy /> }
 
-export default function WindowControls({
+export function TitleBar({ light, value, onChange }) {
-  theme,
-  copyable,
-  code,
-  light,
-  titleBar,
-  onTitleBarChange,
-}) {
   return (
-    <div className="window-controls">
+    <div>
-      {WINDOW_THEMES_MAP[theme] || <Controls />}
-      <div className="window-title-container">
       <input
         aria-label="Image title"
         type="text"
         spellCheck="false"
-          value={titleBar || ''}
+        value={value || ''}
-          onChange={e => onTitleBarChange(e.target.value)}
+        onChange={e => onChange(e.target.value)}
       />
-      </div>
-      {copyable && (
-        <div className="copy-button">
-          <CopyButton text={code} />
-        </div>
-      )}
       <style jsx>
         {`
-          .window-controls {
+          div {
-            margin-top: -24px;
-            position: relative;
-            top: ${theme === 'bw' ? 36 : 34}px;
-            margin-left: ${theme === 'bw' ? 16 : 14}px;
-            margin-right: ${theme === 'boxy' ? 16 : 0}px;
-            z-index: 2;
-            text-align: ${theme === 'boxy' ? 'right' : 'initial'};
-          }
-
-          .window-title-container {
             position: absolute;
             margin: 0px;
             top: -3px;
@@ -98,6 +73,40 @@ export default function WindowControls({
             font-size: 14px;
             color: ${light ? COLORS.BLACK : COLORS.SECONDARY};
           }
+        `}
+      </style>
+    </div>
+  )
+}
+
+export default function WindowControls({
+  theme,
+  copyable,
+  code,
+  light,
+  titleBar,
+  onTitleBarChange,
+}) {
+  return (
+    <div className="window-controls">
+      {WINDOW_THEMES_MAP[theme] || <Controls />}
+      <TitleBar value={titleBar} onChange={onTitleBarChange} light={light} />
+      {copyable && (
+        <div className="copy-button">
+          <CopyButton text={code} />
+        </div>
+      )}
+      <style jsx>
+        {`
+          .window-controls {
+            margin-top: -24px;
+            position: relative;
+            top: ${theme === 'bw' ? 36 : 34}px;
+            margin-left: ${theme === 'bw' ? 16 : 14}px;
+            margin-right: ${theme === 'boxy' ? 16 : 0}px;
+            z-index: 2;
+            text-align: ${theme === 'boxy' ? 'right' : 'initial'};
+          }
 
           .copy-button {
             cursor: pointer;