Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i have solved responsive issue custom news component #70

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
final responsive issue solve
rafietrana committed Oct 29, 2024
commit cf0776ff9452fa9330ad983e1e1d14186ab10f57
130 changes: 66 additions & 64 deletions src/Components/NewsPersonal/NewsPersonal.jsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import axios from "axios";
const NewsPersonal = () => {
const { user } = useAuth();
const userEmails = user?.email;
const [storeSelecetedCategory, setStoreSelectedCategory] = useState([]);
const [storeSelectedCategory, setStoreSelectedCategory] = useState([]);
const [newsData, setNewsData] = useState([]);
const [filteredNews, setFilteredNews] = useState([]);
const [activeCategory, setActiveCategory] = useState("");
@@ -29,11 +29,11 @@ const NewsPersonal = () => {

// Fetch news data for all selected categories
useEffect(() => {
if (storeSelecetedCategory.length > 0) {
if (storeSelectedCategory.length > 0) {
const getDataByCategory = async () => {
try {
const allNewsData = await Promise.all(
storeSelecetedCategory.map(async (category) => {
storeSelectedCategory.map(async (category) => {
const res = await axios.get(
`https://newsdata.io/api/1/news?apikey=pub_56209614b257f56b188a4ebf87ce263055c0c&q=${category}`
);
@@ -53,14 +53,14 @@ const NewsPersonal = () => {
};
getDataByCategory();
}
}, [storeSelecetedCategory]);
}, [storeSelectedCategory]);

// Handle category button click
const handleCategoryClick = (category) => {
setActiveCategory(category);
// Filter news by selected category
const filtered = newsData.filter((newsItem) =>
newsItem?.category?.toLowerCase() === category.toLowerCase()
const filtered = newsData.filter(
(newsItem) => newsItem?.category?.toLowerCase() === category.toLowerCase()
);
setFilteredNews(filtered);
};
@@ -80,75 +80,77 @@ const NewsPersonal = () => {
};

return (
<div className="w-10/12 mx-auto ">
<p>Alhamdulillah This is News Personal Component</p>
<div>
<div className="w-10/12 mx-auto ">


{/* Category Filter Buttons */}
<div className="flex flex-wrap gap-4 my-4">
<button
onClick={handleAllClick}
className={`px-4 py-2 rounded ${
activeCategory === "" ? "bg-blue-500 text-white" : "bg-gray-300"
}`}
>
All
</button>
{storeSelecetedCategory.map((category, index) => (
{/* Category Filter Buttons */}
<div className="flex flex-wrap justify-center my-4 space-x-4 py-10">
<button
key={index}
onClick={() => handleCategoryClick(category)}
className={`px-4 py-2 rounded ${
activeCategory === category ? "bg-blue-500 text-white" : "bg-gray-300"
onClick={handleAllClick}
className={`px-4 py-2 rounded transition-all duration-300 ${
activeCategory === "" ? "bg-blue-500 text-white" : "bg-gray-300"
}`}
>
{category}
All
</button>
))}
</div>
{storeSelectedCategory.map((category, index) => (
<button
key={index}
onClick={() => handleCategoryClick(category)}
className={`px-4 py-2 my-2 rounded transition-all duration-300 ${
activeCategory === category ? "bg-blue-500 text-white" : "bg-gray-300"
}`}
>
{category}
</button>
))}
</div>

{/* News Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{filteredNews.length > 0 ? (
filteredNews.map((newsItem, index) => (
<div key={index} className="bg-white shadow-lg rounded-lg overflow-hidden">
{/* Show Image */}
<img
src={newsItem.image_url || "https://i.ibb.co/Vgggtfd/images-1.png"} // Placeholder image if no image
alt={newsItem.title}
className="w-full h-48 object-cover"
/>
{/* News Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{filteredNews.length > 0 ? (
filteredNews.map((newsItem, index) => (
<div key={index} className="bg-white shadow-lg rounded-lg overflow-hidden">
{/* Show Image */}
<img
src={newsItem.image_url || "https://i.ibb.co.com/Vgggtfd/images-1.png"} // Placeholder image if no image
alt={newsItem.title}
className="w-full h-48 object-cover"
/>

<div className="p-4">
{/* Show Category */}
<p className="text-blue-500 font-semibold mb-2">{newsItem.category}</p>
<div className="p-4">
{/* Show Category */}
<p className="text-blue-500 font-semibold mb-2">{newsItem.category}</p>

{/* Show Title (truncated) */}
<h2 className="text-lg font-bold mb-2">
{truncateText(newsItem.title, 50)} {/* Limit title length */}
</h2>
{/* Show Title (truncated) */}
<h2 className="text-lg font-bold mb-2">
{truncateText(newsItem.title, 50)} {/* Limit title length */}
</h2>

{/* Show Description (truncated) */}
<p className="text-gray-700 mb-4">
{newsItem.description
? truncateText(newsItem.description, 100) // Limit description length
: "No description available."}
</p>
{/* Show Description (truncated) */}
<p className="text-gray-700 mb-4">
{newsItem.description
? truncateText(newsItem.description, 100) // Limit description length
: "No description available."}
</p>

{/* Link to full article */}
<a
href={newsItem.link}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500"
>
Read more
</a>
{/* Link to full article */}
<a
href={newsItem.link}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500"
>
Read more
</a>
</div>
</div>
</div>
))
) : (
<p>No news available for the selected category.</p>
)}
))
) : (
<p>No news available for the selected category.</p>
)}
</div>
</div>
</div>
);