Preact front page quick look (#702)

* Preact front page quick look

* lol

Author: theVedanta

src/components/landing/QueryLanding.tsx

@@ -53,6 +53,24 @@ function Todos() {
   return <ul>{todos.data?.map((t) => <li>{t.title}</li>)}</ul>
 }
 
+export default Todos`,
+    },
+    preact: {
+      lang: 'tsx',
+      code: `import { useQuery } from '@tanstack/preact-query'
+
+function Todos() {
+  const { data, isPending, error } = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  })
+
+  if (isPending) return <span>Loading...</span>
+  if (error) return <span>Oops!</span>
+
+  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>
+}
+
 export default Todos`,
     },
     vue: {