first

2026-02-16 19:34:35 +00:00
commit 9ab0940ca4
784 changed files with 41710 additions and 0 deletions
@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { useClient } from 'hooks/useClient';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from '../Layout';
+
+export const Plans = () => {
+  const client = useClient();
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
+
+  const { data: plans = [] } = useQuery<string[]>({
+    queryKey: ['plans'],
+    queryFn: () => client.get<string[]>('/plans'),
+  });
+
+  useEffect(() => {
+    if (plans.length > 0 && !selectedPlan) {
+      setSelectedPlan(plans[0]!);
+    }
+  }, [plans, selectedPlan]);
+
+  const { data: content = '' } = useQuery<string>({
+    queryKey: ['plans', selectedPlan],
+    queryFn: () => client.getText(`/plans/${selectedPlan}`),
+    enabled: !!selectedPlan,
+  });
+
+  return (
+    <DashboardLayout>
+      <div className="flex flex-col h-full p-4">
+        <Card className="flex-1 overflow-hidden">
+          {/* Header with plan selector */}
+          <div className="shrink-0 flex items-center gap-3 px-4 py-2 border-b border-duck-dark/10 bg-white/60">
+            <span className="text-sm font-medium text-duck-dark/70">Plans</span>
+            {plans.length > 1 && (
+              <select
+                value={selectedPlan ?? ''}
+                onChange={(ev) => setSelectedPlan(ev.target.value)}
+                className="text-xs border border-duck-dark/20 rounded px-2 py-1 bg-white/80"
+              >
+                {plans.map((p) => (
+                  <option key={p} value={p}>
+                    {p}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+
+          {/* Markdown content */}
+          <div className="overflow-y-auto h-full p-6">
+            <div className="prose prose-sm max-w-none prose-headings:text-duck-dark prose-a:text-duck-teal prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none prose-td:text-sm prose-th:text-sm">
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                {content}
+              </ReactMarkdown>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};