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

more style + set reset flag

Browse Source
This commit is contained in:
Felix Roos 2023-12-08 09:18:55 +01:00
parent cec8553fb5
commit 10d86ff835
1 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
website/src/repl/panel/PatternsTab.jsx
View File

@ -9,7 +9,9 @@ import {
duplicateActivePattern, duplicateActivePattern,
getUserPattern, getUserPattern,
renameActivePattern, renameActivePattern,
addUserPattern,
} from '../../settings.mjs'; } from '../../settings.mjs';
import { logger } from '@strudel.cycles/core';
function classNames(...classes) { function classNames(...classes) {
return classes.filter(Boolean).join(' '); return classes.filter(Boolean).join(' ');
@ -18,16 +20,16 @@ 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 space-y-4"> <div className="px-4 w-full dark:text-white text-stone-900 space-y-4">
<section> <section>
<h2 className="text-xl mb-2">Pattern Collection</h2> <h2 className="text-xl mb-2">Pattern Collection</h2>
<div className="space-x-4 border-b border-foreground mb-1"> <div className="space-x-4 border-b border-foreground mb-2 pb-1">
<button <button
className="hover:opacity-50" className="hover:opacity-50"
onClick={() => { onClick={() => {
const name = newUserPattern(); const name = newUserPattern();
const { code } = getUserPattern(name); const { code } = getUserPattern(name);
context.handleUpdate(code); context.handleUpdate(code, true);
}} }}
> >
new new
@ -48,51 +50,62 @@ export function PatternsTab({ context }) {
<input <input
style={{ display: 'none' }} style={{ display: 'none' }}
type="file" type="file"
directory=""
webkitdirectory=""
multiple multiple
accept="audio/*" accept="text/plain"
onChange={(e) => { onChange={async (e) => {
console.log('change', e.target.files); const files = Array.from(e.target.files);
await Promise.all(
files.map(async (file, i) => {
const code = await file.text();
const name = file.name.replace(/\.[^/.]+$/, '');
console.log(i, name, code);
addUserPattern(name, { code });
}),
);
logger(`import done!`);
}} }}
/> />
import import
</label> </label>
</div> </div>
{Object.entries(userPatterns).map(([key, up]) => ( <div className="font-mono text-sm">
<a {Object.entries(userPatterns).map(([key, up]) => (
key={key} <a
className={classNames( key={key}
'mr-4 hover:opacity-50 cursor-pointer inline-block', className={classNames(
key === activePattern ? 'underline' : '', 'mr-4 hover:opacity-50 cursor-pointer inline-block',
)} key === activePattern ? 'outline outline-1' : '',
onClick={() => { )}
const { code } = up; onClick={() => {
setActivePattern(key); const { code } = up;
context.handleUpdate(code); setActivePattern(key);
}} context.handleUpdate(code, true);
> }}
{key} >
</a> {key}
))} </a>
))}
</div>
</section> </section>
<section> <section>
<h2 className="text-xl mb-2">Examples</h2> <h2 className="text-xl mb-2">Examples</h2>
{Object.entries(tunes).map(([key, tune]) => ( <div className="font-mono text-sm">
<a {Object.entries(tunes).map(([key, tune]) => (
key={key} <a
className={classNames( key={key}
'mr-4 hover:opacity-50 cursor-pointer inline-block', className={classNames(
key === activePattern ? 'underline' : '', 'mr-4 hover:opacity-50 cursor-pointer inline-block',
)} key === activePattern ? 'outline outline-1' : '',
onClick={() => { )}
setActivePattern(key); onClick={() => {
context.handleUpdate(tune); setActivePattern(key);
}} context.handleUpdate(tune, true);
> }}
{key} >
</a> {key}
))} </a>
))}
</div>
</section> </section>
</div> </div>
); );