93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import * as tunes from '../tunes.mjs';
|
|
import {
|
|
useSettings,
|
|
clearUserPatterns,
|
|
newUserPattern,
|
|
setActivePattern,
|
|
deleteActivePattern,
|
|
duplicateActivePattern,
|
|
getUserPattern,
|
|
renameActivePattern,
|
|
} from '../../settings.mjs';
|
|
|
|
function classNames(...classes) {
|
|
return classes.filter(Boolean).join(' ');
|
|
}
|
|
|
|
export function PatternsTab({ context }) {
|
|
const { userPatterns, activePattern } = useSettings();
|
|
return (
|
|
<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={() => renameActivePattern()}>
|
|
rename
|
|
</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>
|
|
);
|
|
}
|
|
|
|
/*
|
|
selectable examples
|
|
if example selected
|
|
type character -> create new user pattern with exampleName_n
|
|
even if
|
|
clicking (+) opens the "new" example with same behavior as above
|
|
*/
|