Untitled

SearchForAdmin.jsx

import React, { useState, useEffect } from 'react';
import { useFormik } from 'formik';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
import './searchh.css'
const Search = () => {
  const formik = useFormik({
    initialValues: {
      searchQuery: '',
    },
    onSubmit: (values) => {
      fetchTitles(values.searchQuery);
    },
  });
 
  const [blogTitles, setBlogTitles] = useState([]);
  const [displayedBlogTitles, setDisplayedBlogTitles] = useState([]);
  const navigate = useNavigate(); 
 
  useEffect(() => {
    fetchBlogTitles();
  }, []);
 
  const fetchBlogTitles = async () => {
    try {
const response = await axios.get('http://localhost:5221/api/Blog/GetTitles');
      const data = response.data;
      setBlogTitles(data);
      setDisplayedBlogTitles(data);
    } catch (error) {
      console.error('Error fetching blog titles:', error);
    }
  };
 
  const fetchTitles = async (searchQuery) => {
    try {
const response = await axios.get(`http://localhost:5221/api/Blog/SearchByTitle?title=${searchQuery}`);
      const data = response.data;
 
      if (searchQuery) {
        setDisplayedBlogTitles(data);
        console.log('Searched:', data);
      } else {
        setDisplayedBlogTitles(blogTitles);
        console.log('Not able to search');
      }
    } catch (error) {
      console.error('Error in searching:', error);
    }
  };
 
  const handleBlogTitleClick = (title) => {
    navigate(`/blog/${encodeURIComponent(title)}`);
  };

  
 
  return (
    <div className="Full">
      <div className="search-container">
       <form onSubmit={formik.handleSubmit}>
        <div className="search-bar-container">
          <input
            type="text"
            id="searchQuery"
            name="searchQuery"
            placeholder="Search..."
            onChange={formik.handleChange}
            value={formik.values.searchQuery}
          />
          <div className="button-container">
            <button type="submit">Search</button>
          </div>
        </div>
      </form>
 
      <div className="blog-titles-container">
        <h2>{formik.values.searchQuery ? 'Search Results' : 'All Blogs'}</h2>
        <div className="blog-titles">
          {displayedBlogTitles.map((title, index) => (
            <div key={index} className="blog-title" onClick={() => handleBlogTitleClick(title)}>
              {title}
            </div>
          ))}
        </div>
      </div>
    </div>
    </div>
    
  );
};
 
export default Search;


searchh.css

.Full {
  background-image: linear-gradient(#283149, #f4d35e);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
}
 
.search-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #283149;
  border-radius: 15px;
  color: #dbe2ef;
  min-height: 400px;
}
 
.search-bar-container {
  text-align: center;
}
 
input[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  width: 70%; 
  border: none;
  border-radius: 10px;
  background-color: #404b69;
  color: #dbe2ef;
}
 
.button-container {
  text-align: center;
}
 
.button-container button {
  padding: 15px 30px;
  background-color: #fc7753;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 15px;
  font-size: 1em;
  transition: background-color 0.3s ease;
}
 
.button-container button:hover {
  background-color: #ff614e;
}
 
.blog-titles-container {
  text-align: center;
  margin-top: 20px;
}
 
.blog-titles h2 {
  margin-bottom: 15px;
  font-size: 1.5em;
  color: #61dafb;
}
 
.blog-titles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
 
.blog-title {
  cursor: pointer;
  padding: 20px;
  background-color: #61dafb;
  color: #283149;
  border: 1px solid #61dafb;
  border-radius: 15px;
  font-size: 1.2em;
  transition: background-color 0.3s ease, color 0.3s ease;
}
 
.blog-title:hover {
  background-color: #4fa3cc;
  color: #fff;
}
 

@media screen and (max-width: 600px) {
  .search-container {
    padding: 10px;
  }
 
  input[type="text"] {
    width: 100%;
  }
 
  .button-container button {
    padding: 10px 20px;
  }
 
  .blog-title {
    padding: 15px;
  }
}