1import { useState, useEffect } from 'react';
2import { loadFeaturedPatterns, loadPublicPatterns } from '@src/user_pattern_utils.mjs';
3import { MiniRepl } from '@src/docs/MiniRepl';
4import { PatternLabel } from '@src/repl/components/panel/PatternsTab';
5
6function PatternList({ patterns }) {
7  return (
8    <div className="space-y-4">
9      {/* <MiniRepl tunes={patterns.map((pat) => pat.code.trim())} /> */}
10      {patterns.map((pat) => (
11        <div key={pat.id}>
12          <div className="flex justify-between not-prose pb-2">
13            <h2 className="text-lg">
14              <a href={`/?${pat.hash}`} target="_blank" className="underline">
15                <PatternLabel pattern={pat} />
16              </a>
17            </h2>
18          </div>
19          <MiniRepl tune={pat.code.trim()} maxHeight={300} />
20        </div>
21      ))}
22    </div>
23  );
24}
25
26export function Oven() {
27  const [featuredPatterns, setFeaturedPatterns] = useState([]);
28  const [publicPatterns, setPublicPatterns] = useState([]);
29  useEffect(() => {
30    loadPublicPatterns().then(({ data: pats }) => {
31      console.log('pats', pats);
32      setPublicPatterns(pats);
33    });
34    loadFeaturedPatterns().then(({ data: pats }) => {
35      console.log('pats', pats);
36      setFeaturedPatterns(pats);
37    });
38  }, []);
39  return (
40    <div>
41      <h2 id="featured">Featured Patterns</h2>
42      <PatternList patterns={featuredPatterns} />
43      <h2 id="latest">Last Creations</h2>
44      <PatternList patterns={publicPatterns} />
45    </div>
46  );
47}