Add realtime / react hooks examples snippet (#1770)

* Added realtime / react hooks examples snippet and added it to all the relevant pages

* Fix link

Author: D-K-P

docs/frontend/react-hooks/overview.mdx

@@ -4,6 +4,8 @@ sidebarTitle: Overview
 description: Using the Trigger.dev v3 API from your React application.
 ---
 
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
 Our react hooks package provides a set of hooks that make it easy to interact with the Trigger.dev API from your React application, using our [frontend API](/frontend/overview). You can use these hooks to fetch runs, and subscribe to real-time updates, and trigger tasks from your frontend application.
 
 ## Installation
@@ -331,3 +333,5 @@ See our [Realtime hooks documentation](/frontend/react-hooks/realtime) for more
 ## Trigger Hooks
 
 See our [Trigger hooks documentation](/frontend/react-hooks/triggering) for more information.
+
+<RealtimeExamplesCards />

docs/frontend/react-hooks/realtime.mdx

@@ -4,6 +4,8 @@ sidebarTitle: Realtime
 description: Get live updates from the Trigger.dev API in your frontend application.
 ---
 
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
 These hooks allow you to subscribe to runs, batches, and streams using [Trigger.dev realtime](/realtime). Before reading this guide:
 
 - Read our [Realtime documentation](/realtime) to understand how the Trigger.dev realtime API works.
@@ -414,3 +416,5 @@ export function MyComponent({
   );
 }
 ```
+
+<RealtimeExamplesCards />

docs/frontend/react-hooks/triggering.mdx

@@ -4,6 +4,8 @@ sidebarTitle: Triggering
 description: Triggering tasks from your frontend application.
 ---
 
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
 We provide a set of hooks that can be used to trigger tasks from your frontend application.
 
 ## Demo
@@ -248,3 +250,5 @@ export function MyComponent({ publicAccessToken }: { publicAccessToken: string }
   );
 }
 ```
+
+<RealtimeExamplesCards />

docs/realtime/overview.mdx

@@ -4,6 +4,8 @@ sidebarTitle: Overview
 description: Using the Trigger.dev v3 realtime API
 ---
 
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
 Trigger.dev Realtime is a set of APIs that allow you to subscribe to runs and get real-time updates on the run status. This is useful for monitoring runs, updating UIs, and building realtime dashboards.
 
 ## How it works
@@ -17,9 +19,9 @@ The Realtime API is built on top of [Electric SQL](https://electric-sql.com/), a
   height="315"
   src="https://www.youtube.com/embed/RhJAbSGkS88?si=4Z72SfygeklNI3As"
   title="YouTube video player"
-    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    referrerPolicy="strict-origin-when-cross-origin"
-    allowFullScreen
+  allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  referrerPolicy="strict-origin-when-cross-origin"
+  allowFullScreen
 />
 
 ## Usage
@@ -266,3 +268,5 @@ The Realtime API in the Trigger.dev Cloud limits the number of concurrent subscr
 ## Known issues
 
 There is currently a known issue where the realtime API does not work if subscribing to a run that has a large payload or large output and are stored in object store instead of the database. We are working on a fix for this issue: https://github.com/triggerdotdev/trigger.dev/issues/1451. As a workaround you'll need to keep payloads and outputs below 128KB when using the realtime API.
+
+<RealtimeExamplesCards />

docs/realtime/streams.mdx

@@ -4,6 +4,8 @@ sidebarTitle: Streams
 description: Stream data in realtime from inside your tasks
 ---
 
+import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
+
 The world is going realtime, and so should your tasks. With the Streams API, you can stream data from your tasks to the outside world in realtime. This is useful for a variety of use cases, including AI.
 
 ## How it works
@@ -449,3 +451,5 @@ export const aiStreamingWithTools = schemaTask({
   },
 });
 ```
+
+<RealtimeExamplesCards />

docs/snippets/realtime-examples-cards.mdx

@@ -0,0 +1,54 @@
+## Examples
+
+<CardGroup cols={2}>
+  <Card
+    title="Image Generation with fal.ai"
+    icon="image"
+    href="/guides/example-projects/realtime-fal-ai"
+  >
+    A Next.js app that uses the Realtime API and react hooks to create on-demand image generation
+    through fal.ai's services.
+  </Card>
+  <Card
+    title="Realtime CSV Importer"
+    icon="file-csv"
+    href="/guides/example-projects/realtime-csv-importer"
+  >
+    Upload CSV files and view the progress of the task being processed on the frontend live using
+    the Realtime API.
+  </Card>
+  <Card
+    title="Batch LLM Evaluator"
+    icon="sparkles"
+    href="/guides/example-projects/batch-llm-evaluator"
+  >
+    A Next.js app that uses the Realtime API and react hooks to evaluate language model responses on
+    the frontend in real-time.
+  </Card>
+  <Card
+    title="Claude Thinking Chatbot"
+    icon="messages"
+    href="/guides/example-projects/claude-thinking-chatbot"
+  >
+    A chatbot that demonstrates Claude 3.7's thinking capabilities through the Realtime API and
+    react hooks.
+  </Card>
+
+</CardGroup>
+
+### Learn more
+
+<CardGroup cols={2}>
+  <Card title="View all our guides & examples" icon="books" href="/guides">
+    Guides, example projects and example tasks. Copy any of the code and use it in your own
+    projects.
+  </Card>
+  <Card
+    title="Example projects repo"
+    icon="github"
+    href="https://github.com/triggerdotdev/examples"
+  >
+    Star/Fork our examples repo to learn more about how to use Trigger.dev in full stack
+    applications.
+  </Card>
+</CardGroup>