basic browse page

website/src/components/SharedPatterns.tsx

@@ -0,0 +1,54 @@
+import { createClient } from '@supabase/supabase-js';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Database, Tables } from '../../database.types';
+import { getMetadata } from '../metadata_parser';
+
+function PatternLink({ pattern }: { pattern: Tables<'code'> }) {
+  const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
+  // console.log('meta', meta);
+  return (
+    <a href={`/?${pattern.hash}`} target="_blank">
+      {meta.title || pattern.hash} by {meta.by.join(',') || 'Anonymous'}
+    </a>
+  );
+}
+
+export function SharedPatterns() {
+  const [publicPatterns, setPublicPatterns] = useState<Tables<'code'>[] | null>([]);
+  const [featuredPatterns, setFeaturedPatterns] = useState<Tables<'code'>[] | null>([]);
+  const init = useCallback(async () => {
+    const supabase = createClient<Database>(
+      'https://pidxdsxphlhzjnzmifth.supabase.co',
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBpZHhkc3hwaGxoempuem1pZnRoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTYyMzA1NTYsImV4cCI6MTk3MTgwNjU1Nn0.bqlw7802fsWRnqU5BLYtmXk_k-D1VFmbkHMywWc15NM',
+    );
+    const { data: _publicPatterns } = await supabase.from('code').select().eq('public', true).limit(20);
+    const { data: _featuredPatterns } = await supabase.from('code').select().eq('featured', true).limit(20);
+    setPublicPatterns(_publicPatterns);
+    setFeaturedPatterns(_featuredPatterns);
+    /* console.log('public', publicPatterns);
+    console.log('featured', featuredPatterns); */
+  }, []);
+  useEffect(() => {
+    init();
+  }, [useCallback]);
+  return (
+    <div>
+      <h2 className="">Featured</h2>
+      <section>
+        {featuredPatterns?.map((pattern, i) => (
+          <div key={i}>
+            <PatternLink pattern={pattern} />
+          </div>
+        ))}
+      </section>
+      <h2>Last Creations</h2>
+      <section>
+        {publicPatterns?.map((pattern, i) => (
+          <div key={i}>
+            <PatternLink pattern={pattern} />
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}

website/src/pages/browse.astro

@@ -0,0 +1,14 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import { SharedPatterns } from '../components/SharedPatterns';
+---
+
+<head>
+  <HeadCommon />
+</head>
+<body class="bg-slate-800">
+  <div class="prose dark:prose-invert max-w-full pb-8 p-4">
+    <h1>Browse</h1>
+    <SharedPatterns client:only />
+  </div>
+</body>