From 14a4e6d7e5f1e92e15dd97e0fdd05eefeb8ca3d5 Mon Sep 17 00:00:00 2001
From: warmachine028 <75939390+warmachine028@users.noreply.github.com>
Date: Sat, 26 Oct 2024 03:05:33 +0530
Subject: [PATCH] feat: responsiveness

---
 client/src/App.tsx                   | 5 ++---
 client/src/components/CreatePost.tsx | 3 ++-
 client/src/components/Navbar.tsx     | 4 ++--
 client/src/components/index.ts       | 1 +
 client/src/pages/Posts.tsx           | 6 +++---
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 08cc20f..149817b 100644
--- a/client/src/App.tsx
+++ b/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>
 	)
 }
diff --git a/client/src/components/CreatePost.tsx b/client/src/components/CreatePost.tsx
index b6c23f3..06729ff 100644
--- a/client/src/components/CreatePost.tsx
+++ b/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>
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 85efe5f..fc01551 100644
--- a/client/src/components/Navbar.tsx
+++ b/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>
 
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index a01b7d2..eb7d65f 100644
--- a/client/src/components/index.ts
+++ b/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'
diff --git a/client/src/pages/Posts.tsx b/client/src/pages/Posts.tsx
index 4ee2da4..6981e2d 100644
--- a/client/src/pages/Posts.tsx
+++ b/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>