feat: responsiveness

client/src/App.tsx

@@ -1,15 +1,15 @@
 import { BrowserRouter } from 'react-router-dom'
-import { AppRouter } from '@/components'
+import { AppRouter, Navbar } from '@/components'
 import { ThemeProvider } from '@/providers'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import Navbar from './components/Navbar'
 
 const ReactQueryDemoApp = () => {
 	return (
 		<BrowserRouter>
 			<Navbar />
 			<AppRouter />
+			<ReactQueryDevtools initialIsOpen={false} />
 		</BrowserRouter>
 	)
 }
@@ -21,7 +21,6 @@ const App = () => {
 			<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
 				<ReactQueryDemoApp />
 			</ThemeProvider>
-			<ReactQueryDevtools initialIsOpen={false} />
 		</QueryClientProvider>
 	)
 }

client/src/components/CreatePost.tsx

@@ -58,6 +58,7 @@ const CreatePost = () => {
 		})
 		handleReset()
 	}
+
 	const handleReset = () => {
 		setPost(initialData)
 		if (fileInputRef.current) {
@@ -66,7 +67,7 @@ const CreatePost = () => {
 	}
 
 	return (
-		<Card className="shadow-lg">
+		<Card className="border-0 shadow-lg sm:border">
 			<CardHeader>
 				<CardTitle>Create New Post</CardTitle>
 				<CardDescription className="text-destructive h-5 text-center">{error}</CardDescription>

client/src/components/Navbar.tsx

@@ -61,7 +61,7 @@ const Navbar = () => {
 
 	return (
 		<nav className="bg-background/80 sticky top-0 z-50 w-full border border-b backdrop-blur-md">
-			<div className="container mx-auto">
+			<div className="container mx-auto px-4">
 				<div className="flex h-16 items-center justify-between">
 					<div className="flex items-center">
 						<Link to="/" className="text-foreground flex items-center text-xl font-bold">
@@ -70,7 +70,7 @@ const Navbar = () => {
 								alt="Brand"
 								className="mr-2 size-7 animate-spin [animation-duration:10s]"
 							/>
-							<span>React Query Demo</span>
+							<span className="hidden sm:block">React Query Demo</span>
 						</Link>
 					</div>
 

client/src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as AppRouter } from './AppRouter'
 export { default as Post } from './Post'
 export { default as CreatePost } from './CreatePost'
+export { default as Navbar } from './Navbar'

client/src/pages/Posts.tsx

@@ -25,11 +25,11 @@ const PostsCard = () => {
 	}, [inView, hasNextPage, query, fetchNextPage])
 
 	return (
-		<Card className="shadow-lg">
+		<Card className="border-0 shadow-lg sm:border">
 			<CardHeader className="bg-primary text-primary-foreground">
-				<div className="flex flex-col items-center justify-between xl:flex-row">
+				<div className="flex flex-col items-center justify-between gap-2 xl:flex-row">
 					<div>
-						<CardTitle className="text-2xl font-bold">Posts</CardTitle>
+						<CardTitle className="text-center text-2xl font-bold">Posts</CardTitle>
 						<Badge variant="secondary" title="Posts loaded">
 							{allPosts.length} posts
 						</Badge>