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

integrate public patterns into patterns tab

Browse source
This commit is contained in:
Felix Roos 2024-01-13 23:53:46 +01:00
parent 1ede99f71e
commit 204c964050
4 changed files with 108 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,8 @@
import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
import { useMemo } from 'react';
import {
$featuredPatterns,
$publicPatterns,
clearUserPatterns,
deleteActivePattern,
duplicateActivePattern,
@ -14,6 +16,8 @@ import {
useSettings,
} from '../../settings.mjs';
import * as tunes from '../tunes.mjs';
import { PatternLabel } from '../../components/SharedPatterns';
import { useStore } from '@nanostores/react';
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
@ -22,6 +26,8 @@ function classNames(...classes) {
export function PatternsTab({ context }) {
const { userPatterns } = useSettings();
const activePattern = useActivePattern();
const featuredPatterns = useStore($featuredPatterns);
const publicPatterns = useStore($publicPatterns);
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">
@ -94,8 +100,52 @@ export function PatternsTab({ context }) {
</button>
</div>
</section>
{featuredPatterns && (
<section>
<h2 className="text-xl mb-2">Featured Patterns</h2>
<div className="font-mono text-sm">
{featuredPatterns.map((pattern) => (
<a
key={pattern.id}
className={classNames(
'mr-4 hover:opacity-50 cursor-pointer block',
pattern.hash === activePattern ? 'outline outline-1' : '',
)}
onClick={() => {
setActivePattern(pattern.hash);
context.handleUpdate(pattern.code, true);
}}
>
<PatternLabel pattern={pattern} />
</a>
))}
</div>
</section>
)}
{publicPatterns && (
<section>
<h2 className="text-xl mb-2">Last Creations</h2>
<div className="font-mono text-sm">
{publicPatterns.map((pattern) => (
<a
key={'public-' + pattern.id}
className={classNames(
'mr-4 hover:opacity-50 cursor-pointer block', // inline-block
pattern.hash === activePattern ? 'outline outline-1' : '',
)}
onClick={() => {
setActivePattern(pattern.hash);
context.handleUpdate(pattern.code, true);
}}
>
<PatternLabel pattern={pattern} />
</a>
))}
</div>
</section>
)}
<section>
<h2 className="text-xl mb-2">Examples</h2>
<h2 className="text-xl mb-2">Stock Examples</h2>
<div className="font-mono text-sm">
{Object.entries(tunes).map(([key, tune]) => (
<a

10
website/src/repl/util.mjs
View file

@ -11,7 +11,7 @@ import { writeText } from '@tauri-apps/api/clipboard';
import { createContext } from 'react';
// Create a single supabase client for interacting with your database
const supabase = createClient(
export const supabase = createClient(
'https://pidxdsxphlhzjnzmifth.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBpZHhkc3hwaGxoempuem1pZnRoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTYyMzA1NTYsImV4cCI6MTk3MTgwNjU1Nn0.bqlw7802fsWRnqU5BLYtmXk_k-D1VFmbkHMywWc15NM',
);
@ -150,3 +150,11 @@ export const setAudioDevice = async (id) => {
}
initializeAudioOutput();
};
export function loadPublicPatterns() {
return supabase.from('code').select().eq('public', true).limit(20).order('id', { ascending: false });
}
export function loadFeaturedPatterns() {
return supabase.from('code').select().eq('featured', true).limit(20).order('id', { ascending: false });
}