create title bar component

main
Mike Fix 2 years ago
parent 4f4a3837ce
commit eb8d709a75
No known key found for this signature in database
GPG Key ID: 1D85E862314CA79F

@ -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">
<input
aria-label="Image title"
type="text"
spellCheck="false"
value={titleBar || ''}
onChange={e => onTitleBarChange(e.target.value)}
/>
</div>
<TitleBar value={titleBar} onChange={onTitleBarChange} light={light} />
{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;

Loading…
Cancel
Save