hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: slight layout improvement

Browse source
This commit is contained in:
Felix Roos 2023-11-17 20:55:04 +01:00
parent 34c1f3c7de
commit e5f9467329
1 changed files with 59 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

115
website/src/repl/panel/PatternsTab.jsx
View file

@ -17,62 +17,65 @@ function classNames(...classes) {
export function PatternsTab({ context }) { export function PatternsTab({ context }) {
const { userPatterns, activePattern } = useSettings(); const { userPatterns, activePattern } = useSettings();
return ( return (
<div className="px-4 w-full text-foreground"> <div className="px-4 w-full text-foreground space-y-4">
<h2 className="text-xl mb-2">My Patterns</h2> <section>
<div className="space-x-1"> <h2 className="text-xl mb-2">My Patterns</h2>
<button <div className="space-x-1">
className="underline" <button
onClick={() => { className="underline"
const name = newUserPattern(); onClick={() => {
const { code } = getUserPattern(name); const name = newUserPattern();
console.log('code', code); const { code } = getUserPattern(name);
context.handleUpdate(code); context.handleUpdate(code);
}} }}
> >
new new
</button> </button>
<button className="underline" onClick={() => duplicateActivePattern()}> <button className="underline" onClick={() => duplicateActivePattern()}>
duplicate duplicate
</button> </button>
<button className="underline" onClick={() => deleteActivePattern()}> <button className="underline" onClick={() => deleteActivePattern()}>
delete delete
</button> </button>
<button className="underline" onClick={() => clearUserPatterns()}> <button className="underline" onClick={() => clearUserPatterns()}>
clear clear
</button> </button>
</div> </div>
{Object.entries(userPatterns).map(([key, up]) => ( {Object.entries(userPatterns).map(([key, up]) => (
<a <a
key={key} key={key}
className={classNames( className={classNames(
'mr-4 hover:opacity-50 cursor-pointer inline-block', 'mr-4 hover:opacity-50 cursor-pointer inline-block',
key === activePattern ? 'underline' : '', key === activePattern ? 'underline' : '',
)} )}
onClick={() => { onClick={() => {
const { code } = up; const { code } = up;
context.handleUpdate(code); setActivePattern(key);
setActivePattern(key); context.handleUpdate(code);
}} }}
> >
{key} {key}
</a> </a>
))} ))}
<h2 className="text-xl mb-2">Examples</h2> </section>
{Object.entries(tunes).map(([key, tune]) => ( <section>
<a <h2 className="text-xl mb-2">Examples</h2>
key={key} {Object.entries(tunes).map(([key, tune]) => (
className={classNames( <a
'mr-4 hover:opacity-50 cursor-pointer inline-block', key={key}
key === activePattern ? 'underline' : '', className={classNames(
)} 'mr-4 hover:opacity-50 cursor-pointer inline-block',
onClick={() => { key === activePattern ? 'underline' : '',
setActivePattern(key); )}
context.handleUpdate(tune); onClick={() => {
}} setActivePattern(key);
> context.handleUpdate(tune);
{key} }}
</a> >
))} {key}
</a>
))}
</section>
</div> </div>
); );
} }