elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-17 16:48:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

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