Image error resolve
This commit is contained in:
@ -183,12 +183,13 @@ const BlogListing: React.FC = () => {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Filters Section */}
|
{/* Filters Section */}
|
||||||
<div className="flex justify-end items-center gap-4 max-w-7xl mx-auto px-4 py-8" style={{ backgroundColor: '#fff' }}>
|
<div className="flex flex-col sm:flex-row sm:justify-end items-start sm:items-center gap-4 max-w-7xl mx-auto px-4 py-8 bg-white">
|
||||||
<div className="relative">
|
{/* Category Select */}
|
||||||
|
<div className="relative w-full sm:w-auto">
|
||||||
<select
|
<select
|
||||||
value={selectedCategory}
|
value={selectedCategory}
|
||||||
onChange={handleCategoryChange}
|
onChange={handleCategoryChange}
|
||||||
className="appearance-none bg-gray-100 text-sm border border-blue-900 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:border-blue-900"
|
className="w-full sm:w-auto appearance-none bg-gray-100 text-sm border border-blue-900 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:border-blue-900"
|
||||||
style={{ color: '#333' }}
|
style={{ color: '#333' }}
|
||||||
>
|
>
|
||||||
{categories.map((category, index) => (
|
{categories.map((category, index) => (
|
||||||
@ -204,13 +205,15 @@ const BlogListing: React.FC = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative">
|
|
||||||
|
{/* Search Input */}
|
||||||
|
<div className="relative w-full sm:w-64">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
placeholder="Search blogs..."
|
placeholder="Search blogs..."
|
||||||
className="border border-blue-900 rounded-lg px-4 py-2 pl-4 pr-10 text-sm focus:outline-none focus:border-blue-900 w-64 text-gray-700"
|
className="w-full sm:w-64 border border-blue-900 rounded-lg px-4 py-2 pl-4 pr-10 text-sm focus:outline-none focus:border-blue-900 text-gray-700"
|
||||||
/>
|
/>
|
||||||
<button className="absolute inset-y-0 right-0 flex items-center px-3 bg-blue-900 rounded-r-lg">
|
<button className="absolute inset-y-0 right-0 flex items-center px-3 bg-blue-900 rounded-r-lg">
|
||||||
<svg className="w-4 h-4 text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-4 h-4 text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
@ -220,6 +223,7 @@ const BlogListing: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* Results Info */}
|
{/* Results Info */}
|
||||||
{(selectedCategory !== 'All Categories' || searchQuery.trim()) && (
|
{(selectedCategory !== 'All Categories' || searchQuery.trim()) && (
|
||||||
<div className="max-w-7xl mx-auto px-4 pb-4">
|
<div className="max-w-7xl mx-auto px-4 pb-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user