Skip to content

Commit 328b2bc

Browse files
KurtGokhanKurtGokhan
committed
update example styles
1 parent 143485b commit 328b2bc

File tree

8 files changed

+604
-182
lines changed

8 files changed

+604
-182
lines changed

‎examples/vite/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@
1515
"@tanstack/react-query-devtools": "^5.69.0",
1616
"react": "^19.0.0",
1717
"react-dom": "^19.0.0",
18+
"tailwindcss": "^4.0.15",
1819
"tanstack-query-builder": "^0.9.2",
1920
"tanstack-query-builder-example-mocks": "^0.9.2"
2021
},
2122
"devDependencies": {
23+
"@tailwindcss/vite": "^4.0.15",
2224
"@types/react": "^19.0.12",
2325
"@types/react-dom": "^19.0.4",
2426
"@vitejs/plugin-react": "^4.3.4",

‎examples/vite/src/App.css‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎examples/vite/src/App.tsx‎

Lines changed: 81 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { CommentData, PostData, baseUrl, getMockHandlers } from 'tanstack-query-
55
import { setupMSW } from 'tanstack-query-builder-example-mocks/setup-msw';
66
import { HttpQueryBuilder } from 'tanstack-query-builder/http';
77
import { queryClient } from './client';
8-
import './App.css';
98
import './index.css';
109

1110
await setupMSW(...getMockHandlers()).start({ onUnhandledRequest: 'bypass', quiet: true, waitUntilReady: true });
@@ -96,46 +95,63 @@ function AppCore() {
9695

9796
return (
9897
<>
99-
<button onClick={reload} disabled={posts.isFetching}>
100-
Reload
101-
</button>
102-
103-
<button onClick={() => reset.mutateAsync({})} disabled={reset.isPending}>
104-
Reset
105-
</button>
106-
107-
<label>
108-
<input type="checkbox" onChange={(e) => setEnablePrefetch(e.target.checked)} checked={enablePrefetch} />
109-
Enable prefetch
110-
</label>
111-
112-
{posts.isLoading
113-
? 'Loading...'
114-
: posts.isError
115-
? posts.error.message
116-
: posts.data?.pages?.flat().map((post) => (
117-
<div key={post.id}>
118-
<a>
119-
<h2 onClick={() => setPostId(post.id)} onMouseOver={() => enablePrefetch && postQuery.client.prefetch({ id: post.id })}>
120-
{post.id} - {post.title}
121-
</h2>
122-
</a>
123-
124-
<button
125-
onClick={() => deletePostMutation.client.mutate({ params: { id: post.id } }).catch(() => {})}
126-
disabled={deletePostMutation.client.isMutating({ params: { id: post.id } }) > 0}
98+
<div className="p-4">
99+
<button onClick={reload} disabled={posts.isFetching} className="btn btn-primary mr-2">
100+
Reload
101+
</button>
102+
103+
<button onClick={() => reset.mutateAsync({})} disabled={reset.isPending} className="btn btn-secondary mr-2">
104+
Reset
105+
</button>
106+
107+
<label className="flex items-center">
108+
<input type="checkbox" onChange={(e) => setEnablePrefetch(e.target.checked)} checked={enablePrefetch} className="mr-2" />
109+
Enable prefetch on hover
110+
</label>
111+
</div>
112+
113+
{posts.isLoading ? (
114+
<div className="text-center">Loading...</div>
115+
) : posts.isError ? (
116+
<div className="text-red-500">{posts.error.message}</div>
117+
) : (
118+
posts.data?.pages?.flat().map((post) => (
119+
<div key={post.id} className="p-4 border-b flex flex-row">
120+
<div className="flex flex-col grow">
121+
<a>
122+
<h2
123+
onClick={() => setPostId(post.id)}
124+
onMouseOver={() => {
125+
if (!enablePrefetch) return;
126+
postQuery.client.prefetch({ id: post.id });
127+
commentsQuery.client.prefetch({ search: { postId: post.id } });
128+
}}
129+
className="text-xl font-bold cursor-pointer text-blue-800 hover:underline"
127130
>
128-
Delete
129-
</button>
131+
{post.id} - {post.title}
132+
</h2>
133+
</a>
130134

131-
{deleteErrors.includes(post.id) && <span style={{ color: 'red' }}>Error deleting post</span>}
135+
<p className="mt-2 whitespace-pre-wrap">{post.body}</p>
136+
</div>
132137

133-
<p>{post.body}</p>
134-
</div>
135-
))}
138+
<div className="flex flex-col items-end">
139+
<button
140+
onClick={() => deletePostMutation.client.mutate({ params: { id: post.id } }).catch(() => {})}
141+
disabled={deletePostMutation.client.isMutating({ params: { id: post.id } }) > 0}
142+
className="btn btn-danger mt-2"
143+
>
144+
Delete
145+
</button>
146+
147+
{deleteErrors.includes(post.id) && <span className="text-red-500 ml-4">Error deleting post</span>}
148+
</div>
149+
</div>
150+
))
151+
)}
136152

137153
{posts.hasNextPage && (
138-
<button onClick={() => posts.fetchNextPage()} disabled={posts.isFetchingNextPage}>
154+
<button onClick={() => posts.fetchNextPage()} disabled={posts.isFetchingNextPage} className="btn btn-primary mt-4">
139155
Load next page
140156
</button>
141157
)}
@@ -157,27 +173,29 @@ function PostPage({ postId, onBack }: { postId: number; onBack: () => void }) {
157173
{!showEdit ? (
158174
<>
159175
{post.isLoading ? (
160-
'Loading...'
176+
<div className="text-center">Loading...</div>
161177
) : post.isError ? (
162-
post.error.message
178+
<div className="text-red-500">{post.error.message}</div>
163179
) : (
164-
<div>
165-
<h2>{post.data?.titleUppercase}</h2>
166-
<p>{post.data?.body}</p>
167-
<button onClick={onBack}>Back</button>
168-
<button onClick={() => setShowEdit(true)} disabled={editPost.isPending}>
180+
<div className="p-4">
181+
<h2 className="text-2xl font-bold">{post.data?.titleUppercase}</h2>
182+
<p className="mt-2 whitespace-pre-wrap">{post.data?.body}</p>
183+
<button onClick={onBack} className="btn btn-secondary mt-4 mr-2">
184+
Back
185+
</button>
186+
<button onClick={() => setShowEdit(true)} disabled={editPost.isPending} className="btn btn-primary mt-4">
169187
Edit post
170188
</button>
171189
</div>
172190
)}
173191
</>
174192
) : (
175-
<>
176-
<h2>Edit post</h2>
193+
<div className="p-4">
194+
<h2 className="text-2xl font-bold">Edit post</h2>
177195

178-
<input ref={titleRef} defaultValue={post.data?.title} style={{ display: 'block' }} />
196+
<input ref={titleRef} defaultValue={post.data?.title} className="block w-full mt-2 p-2 border rounded" />
179197

180-
<textarea ref={bodyRef} defaultValue={post.data?.body} style={{ display: 'block', width: 400 }} />
198+
<textarea ref={bodyRef} defaultValue={post.data?.body} className="block w-full mt-2 p-2 border rounded" />
181199

182200
<button
183201
onClick={() => {
@@ -193,24 +211,27 @@ function PostPage({ postId, onBack }: { postId: number; onBack: () => void }) {
193211
setShowEdit(false);
194212
}}
195213
disabled={editPost.isPending}
214+
className="btn btn-primary mt-4"
196215
>
197216
Save
198217
</button>
199-
</>
218+
</div>
200219
)}
201220

202-
<h3>Comments</h3>
203-
204-
{comments.isLoading
205-
? 'Loading comments...'
206-
: comments.isError
207-
? comments.error.message
208-
: comments.data?.map((comment) => (
209-
<div key={comment.id}>
210-
<h5>{comment.name}</h5>
211-
<p>{comment.body}</p>
212-
</div>
213-
))}
221+
<h3 className="text-xl font-bold m-4">Comments</h3>
222+
223+
{comments.isLoading ? (
224+
<div className="text-center">Loading comments...</div>
225+
) : comments.isError ? (
226+
<div className="text-red-500">{comments.error.message}</div>
227+
) : (
228+
comments.data?.map((comment) => (
229+
<div key={comment.id} className="p-4 border-b">
230+
<h5 className="text-lg font-bold">{comment.name}</h5>
231+
<p className="mt-2">{comment.body}</p>
232+
</div>
233+
))
234+
)}
214235
</>
215236
);
216237
}

‎examples/vite/src/index.css‎

Lines changed: 9 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,17 @@
1-
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
1+
@import "tailwindcss";
52

6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
-webkit-text-size-adjust: 100%;
15-
}
16-
17-
a {
18-
font-weight: 500;
19-
color: #646cff;
20-
text-decoration: inherit;
21-
}
22-
a:hover {
23-
color: #535bf2;
24-
}
25-
26-
body {
27-
margin: 0;
28-
display: flex;
29-
place-items: start;
30-
min-width: 320px;
31-
min-height: 100vh;
32-
}
33-
34-
h1 {
35-
font-size: 3.2em;
36-
line-height: 1.1;
3+
.btn {
4+
@apply px-4 py-2 rounded;
375
}
386

39-
a {
40-
cursor: pointer;
7+
.btn-primary {
8+
@apply bg-blue-500 text-white hover:bg-blue-700;
419
}
4210

43-
button {
44-
border-radius: 8px;
45-
border: 1px solid transparent;
46-
padding: 0.6em 1.2em;
47-
font-size: 1em;
48-
font-weight: 500;
49-
font-family: inherit;
50-
background-color: #1a1a1a;
51-
cursor: pointer;
52-
transition: border-color 0.25s;
53-
}
54-
button:hover {
55-
border-color: #646cff;
56-
}
57-
button:focus,
58-
button:focus-visible {
59-
outline: 4px auto -webkit-focus-ring-color;
11+
.btn-secondary {
12+
@apply bg-gray-500 text-white hover:bg-gray-700;
6013
}
6114

62-
@media (prefers-color-scheme: light) {
63-
:root {
64-
color: #213547;
65-
background-color: #ffffff;
66-
}
67-
a:hover {
68-
color: #747bff;
69-
}
70-
button {
71-
background-color: #f9f9f9;
72-
}
15+
.btn-danger {
16+
@apply bg-red-500 text-white hover:bg-red-700;
7317
}

‎examples/vite/vite.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
/// <reference types="vitest" />
22

3+
import tailwindcss from '@tailwindcss/vite';
34
import react from '@vitejs/plugin-react';
45
import { defineConfig } from 'vite';
56

67
const isStackblitz = process.env.SHELL === '/bin/jsh';
78

89
// https://vitejs.dev/config/
910
export default defineConfig({
10-
plugins: [react()],
11+
plugins: [react(), tailwindcss()],
1112
optimizeDeps: { exclude: ['tanstack-query-builder'] },
1213
server: { port: 3000 },
1314
resolve: {

0 commit comments

Comments
 (0)