elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-12 22:28:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: minirepl styles for package

Browse Source
This commit is contained in:
Felix Roos 2023-02-28 22:40:18 +01:00
parent 7e1351507a
commit 18c7e02609
2 changed files with 20 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/react/src/components/MiniRepl.jsx
View File

@ -7,7 +7,6 @@ import useHighlighting from '../hooks/useHighlighting.mjs';
import useStrudel from '../hooks/useStrudel.mjs';
import CodeMirror6, { flash } from './CodeMirror6';
import { Icon } from './Icon';
import styles from './MiniRepl.module.css';
import './style.css';
import { logger } from '@strudel.cycles/core';
import useEvent from '../hooks/useEvent.mjs';
@ -129,19 +128,32 @@ export function MiniRepl({
);
return (
<div className={styles.container} ref={ref}>
<div className={styles.header}>
<div className={styles.buttons}>
<button className={cx(styles.button, started ? 'animate-pulse' : '')} onClick={() => togglePlay()}>
<div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight" ref={ref}>
<div className="flex justify-between bg-lineHighlight">
<div className="flex">
<button
className={cx(
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
started ? 'animate-pulse' : '',
)}
onClick={() => togglePlay()}
>
<Icon type={started ? 'stop' : 'play'} />
</button>
<button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
<button
className={cx(
isDirty
? 'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
: 'w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight',
)}
onClick={() => activateCode()}
>
<Icon type="refresh" />
</button>
</div>
{error && <div className={styles.error}>{error.message}</div>}
{error && <div className="text-right p-1 text-sm text-red-200">{error.message}</div>}
</div>
<div className={styles.body}>
<div className="overflow-auto relative">
{show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />}
</div>
{drawTime && (

27
packages/react/src/components/MiniRepl.module.css
View File

@ -1,27 +0,0 @@
.container {
@apply overflow-hidden;
}
.header {
@apply flex justify-between bg-lineHighlight border-t border-l border-r border-lineHighlight rounded-t-md overflow-hidden;
}
.buttons {
@apply flex;
}
.button {
@apply cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground hover:bg-background;
}
.buttonDisabled {
@apply w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight;
}
.error {
@apply text-right p-1 text-sm text-red-200;
}
.body {
@apply overflow-auto relative;
}