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

+ show active pattern at the top

Browse Source 
+ move active pattern functions to top
This commit is contained in:
Felix Roos 2023-12-08 22:22:07 +01:00
parent 0ca4c1de0f
commit c1b7476f43
1 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React from 'react';
import { useMemo } from 'react';
import * as tunes from '../tunes.mjs';
import {
useSettings,
@ -12,6 +12,7 @@ import {
addUserPattern,
} from '../../settings.mjs';
import { logger } from '@strudel.cycles/core';
import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
@ -19,10 +20,50 @@ function classNames(...classes) {
export function PatternsTab({ context }) {
const { userPatterns, activePattern } = useSettings();
const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
return (
<div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
<section>
<div className="px-4 space-x-4 border-b border-foreground mb-2 h-8">
{activePattern && (
<div className="flex items-center mb-2 space-x-2 overflow-auto">
<h1 className="text-xl">{activePattern}</h1>
<div className="space-x-4 flex w-min">
<button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
<DocumentDuplicateIcon className="w-5 h-5" />
</button>
{!isExample && (
<button className="hover:opacity-50" onClick={() => renameActivePattern()}>
<PencilSquareIcon className="w-5 h-5" />
{/* <PencilIcon className="w-5 h-5" /> */}
</button>
)}
{!isExample && (
<button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
<TrashIcon className="w-5 h-5" />
</button>
)}
</div>
</div>
)}
<div className="font-mono text-sm">
{Object.entries(userPatterns).map(([key, up]) => (
<a
key={key}
className={classNames(
'mr-4 hover:opacity-50 cursor-pointer inline-block',
key === activePattern ? 'outline outline-1' : '',
)}
onClick={() => {
const { code } = up;
setActivePattern(key);
context.handleUpdate(code, true);
}}
>
{key}
</a>
))}
</div>
<div className="pr-4 space-x-4 border-b border-foreground mb-2 h-8 flex overflow-auto max-w-full items-center">
<button
className="hover:opacity-50"
onClick={() => {
@ -33,15 +74,6 @@ export function PatternsTab({ context }) {
>
new
</button>
<button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
duplicate
</button>
<button className="hover:opacity-50" onClick={() => renameActivePattern()}>
rename
</button>
<button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
delete
</button>
<button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
clear
</button>
@ -66,24 +98,14 @@ export function PatternsTab({ context }) {
/>
import
</label>
</div>
<div className="font-mono text-sm">
{Object.entries(userPatterns).map(([key, up]) => (
<a
key={key}
className={classNames(
'mr-4 hover:opacity-50 cursor-pointer inline-block',
key === activePattern ? 'outline outline-1' : '',
)}
onClick={() => {
const { code } = up;
setActivePattern(key);
context.handleUpdate(code, true);
}}
>
{key}
</a>
))}
<button
className="hover:opacity-50"
onClick={() => {
console.log('export');
}}
>
export
</button>
</div>
</section>
<section>