|
1 | | -import { useState } from "react"; |
| 1 | +"use client"; |
2 | 2 |
|
3 | | -export function Playground() { |
4 | | - const [name, setName] = useState(""); |
5 | | - const [result, setResult] = useState(null); |
6 | | - const [loading, setLoading] = useState(false); |
7 | | - |
8 | | - const handleSubmit = (e) => { |
9 | | - e.preventDefault(); |
10 | | - setLoading(true); |
| 3 | +import { useEffect, useRef, useState } from "react"; |
11 | 4 |
|
12 | | - // Simulate API call |
13 | | - setTimeout(() => { |
14 | | - setResult({ success: true, data: { message: `Hello, ${name || "World"}!` } }); |
15 | | - setLoading(false); |
16 | | - }, 500); |
17 | | - }; |
| 5 | +export function Playground() { |
| 6 | + const [isVisible, setIsVisible] = useState(false); |
| 7 | + const containerRef = useRef<HTMLDivElement>(null); |
| 8 | + |
| 9 | + useEffect(() => { |
| 10 | + const observer = new IntersectionObserver( |
| 11 | + (entries) => { |
| 12 | + if (entries[0].isIntersecting) { |
| 13 | + setIsVisible(true); |
| 14 | + observer.disconnect(); |
| 15 | + } |
| 16 | + }, |
| 17 | + { threshold: 0.1 } |
| 18 | + ); |
| 19 | + |
| 20 | + if (containerRef.current) { |
| 21 | + observer.observe(containerRef.current); |
| 22 | + } |
| 23 | + |
| 24 | + return () => { |
| 25 | + observer.disconnect(); |
| 26 | + }; |
| 27 | + }, []); |
18 | 28 |
|
19 | 29 | return ( |
20 | | - <div className="px-5 md:px-10 py-20 bg-white dark:bg-zinc-950"> |
21 | | - <div className="mx-auto w-full max-w-5xl"> |
22 | | - <div className="text-center mb-12"> |
23 | | - <h2 className="text-2xl md:text-3xl font-bold mb-4">Try it out</h2> |
24 | | - <p className="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto"> |
25 | | - See how next-safe-action handles your server action in real time |
26 | | - </p> |
27 | | - </div> |
28 | | - |
29 | | - <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 bg-zinc-50 dark:bg-zinc-900 rounded-xl p-6 md:p-8 shadow-lg"> |
30 | | - <div className="space-y-6"> |
31 | | - <div className="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700"> |
32 | | - <div className="text-sm font-semibold mb-2 text-zinc-500 dark:text-zinc-400">Client Component</div> |
33 | | - <pre className="text-xs md:text-sm font-mono text-zinc-800 dark:text-zinc-200 overflow-auto"> |
34 | | - <code>{`'use client'; |
35 | | -
|
36 | | -import { useAction } from 'next-safe-action/hooks'; |
37 | | -import { greetAction } from '@/actions'; |
38 | | -
|
39 | | -export function GreetingForm() { |
40 | | - const { execute, result, status } = |
41 | | - useAction(greetAction); |
42 | | - |
43 | | - return ( |
44 | | - <form onSubmit={(e) => { |
45 | | - e.preventDefault(); |
46 | | - const formData = new FormData(e.target); |
47 | | - execute({ |
48 | | - name: formData.get('name') |
49 | | - }); |
50 | | - }}> |
51 | | - <input name="name" /> |
52 | | - <button type="submit"> |
53 | | - {status === 'executing' ? 'Loading...' : 'Submit'} |
54 | | - </button> |
55 | | - |
56 | | - {result?.data && ( |
57 | | - <div>{result.data.message}</div> |
58 | | - )} |
59 | | - </form> |
60 | | - ); |
61 | | -}`}</code> |
62 | | - </pre> |
63 | | - </div> |
64 | | - |
65 | | - <div className="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700"> |
66 | | - <div className="text-sm font-semibold mb-2 text-zinc-500 dark:text-zinc-400">Server Action</div> |
67 | | - <pre className="text-xs md:text-sm font-mono text-zinc-800 dark:text-zinc-200 overflow-auto"> |
68 | | - <code>{`import { z } from 'zod'; |
69 | | -import { createSafeAction } from 'next-safe-action'; |
70 | | -
|
71 | | -export const greetAction = createSafeAction({ |
72 | | - input: z.object({ |
73 | | - name: z.string().min(1) |
74 | | - }), |
75 | | - |
76 | | - handler: async ({ name }) => { |
77 | | - return { message: \`Hello, \${name}!\` }; |
78 | | - } |
79 | | -});`}</code> |
80 | | - </pre> |
81 | | - </div> |
82 | | - </div> |
83 | | - |
84 | | - <div className="flex flex-col justify-center space-y-8"> |
85 | | - <div className="bg-white dark:bg-zinc-800 rounded-lg p-6 border border-zinc-200 dark:border-zinc-700"> |
86 | | - <h3 className="font-medium text-lg mb-4">Live Demo</h3> |
87 | | - |
88 | | - <form onSubmit={handleSubmit} className="space-y-4"> |
89 | | - <div> |
90 | | - <label htmlFor="name" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1"> |
91 | | - Your name |
92 | | - </label> |
93 | | - <input |
94 | | - type="text" |
95 | | - id="name" |
96 | | - value={name} |
97 | | - onChange={(e) => setName(e.target.value)} |
98 | | - placeholder="Enter your name" |
99 | | - className="w-full px-3 py-2 bg-zinc-50 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent outline-none" |
100 | | - /> |
101 | | - </div> |
102 | | - |
103 | | - <button |
104 | | - type="submit" |
105 | | - disabled={loading} |
106 | | - className={`w-full py-2 px-4 rounded-md font-medium text-white ${loading ? "bg-blue-400 dark:bg-blue-600" : "bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"} transition-colors`} |
107 | | - > |
108 | | - {loading ? "Processing..." : "Submit"} |
109 | | - </button> |
110 | | - </form> |
111 | | - |
112 | | - {result && ( |
113 | | - <div className="mt-6 p-4 bg-zinc-100 dark:bg-zinc-900 rounded-md"> |
114 | | - <pre className="text-sm font-mono text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap"> |
115 | | - {JSON.stringify(result, null, 2)} |
116 | | - </pre> |
117 | | - </div> |
118 | | - )} |
119 | | - </div> |
120 | | - </div> |
121 | | - </div> |
| 30 | + <div className="mx-auto w-full max-w-7xl py-6" ref={containerRef}> |
| 31 | + <div className="mb-12 text-center"> |
| 32 | + <h2 className="mb-4 text-2xl font-bold md:text-3xl">Try it out</h2> |
| 33 | + <p className="mx-auto max-w-2xl text-zinc-600 dark:text-zinc-400"> |
| 34 | + See how next-safe-action lets you handle Server Actions in a type safe way. |
| 35 | + </p> |
122 | 36 | </div> |
| 37 | + {isVisible && ( |
| 38 | + <iframe |
| 39 | + loading="lazy" |
| 40 | + onError={() => {}} |
| 41 | + className="h-[40rem] w-full rounded-lg" |
| 42 | + src="https://stackblitz.com/edit/next-safe-action-playground?embed=1&file=src%2Flib%2Fsafe-action.ts&ctl=1" |
| 43 | + /> |
| 44 | + )} |
123 | 45 | </div> |
124 | 46 | ); |
125 | 47 | } |
0 commit comments