Merge pull request #331 from Sawan-Kushwah/align/searchText

Fixed input text #331

client/src/component/Blog.jsx

@@ -13,11 +13,13 @@ import img4 from "../assets/blogs/4.jpeg";
 import img5 from "../assets/blogs/5.jpeg";
 import img6 from "../assets/blogs/6.png";
 
+
 
 // import { Link } from 'react-router-dom';
 import "../css/Home.css";
 
 // Dummy blog data
+
 const blogPosts = [
   {
     id: 1,
@@ -93,7 +95,7 @@ const blogPosts = [
   },
 ];
 
-
+ 
 const images = [
   { src: img1, category: "Web Development" },
   { src: img2, category: "Mobile Development" },
@@ -102,7 +104,6 @@ const images = [
   { src: img4, category: "AI" },
   { src: img3, category: "Cybersecurity" },
 ];
-
 export default function BlogPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("All");
@@ -177,12 +178,14 @@ export default function BlogPage() {
             <input
               type="text"
               placeholder="Search articles..."
-              className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700"
+              className="w-full pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700"
               value={searchTerm}
+              style={{ paddingLeft: '40px' }}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
-            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
           </div>
+
           <div className="flex gap-2 overflow-x-auto pb-2">
             {categories.map((category) => (
               <button
@@ -239,14 +242,15 @@ export default function BlogPage() {
                     dangerouslySetInnerHTML={{ __html: post.content }}
                   />
 
+
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
                       <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700"></div>
                       <div>
                         <p className="text-sm font-medium text-black dark:text-white">
                           {post.author}
                         </p>
-
+ 
                         <p className="text-xs text-gray-500 dark:text-gray-400">
                           {formatDate(post.date)}
                         </p>