This repository has no description
fix resources styling
author
damedotblog
date
(Mar 3, 2025, 12:22 PM -0500)
commit
4c82ffd9
4c82ffd9da649fedc225c4fb2e959c7b78fc3346
parent
4536f214
4536f21444cc8cd903f50433542c261b1ac92a5a
+7
-11
-3
src/components/Resources/Resources.css
-3
src/components/Resources/Resources.css
···
168
168
.random-resources-section {
169
169
background-color: rgba(var(--button-bg-rgb), 0.05);
170
170
border-radius: 10px;
171
-
padding: 20px;
172
171
margin-top: 20px;
173
172
margin-bottom: 30px;
174
173
border: 2px solid rgba(var(--button-bg-rgb), 0.1);
···
601
600
/* Improved search input */
602
601
.search-container {
603
602
position: relative;
604
-
flex-grow: 1;
605
-
max-width: 500px;
606
603
}
607
604
608
605
.search-icon {
+7
-8
src/components/Resources/Resources.js
+7
-8
src/components/Resources/Resources.js
···
14
14
const [isLoading, setIsLoading] = useState(true);
15
15
// Add a new state to store category emojis from database
16
16
const [categoryEmojis, setCategoryEmojis] = useState({
17
-
'All': '🔍' // Default emoji for 'All'
17
+
'All': '🗃️' // Default emoji for 'All'
18
18
});
19
19
// New state for random resources
20
20
const [randomResources, setRandomResources] = useState([]);
···
84
84
}
85
85
86
86
// Build category emojis mapping
87
-
const emojisMap = { 'All': '🔍' }; // Default for 'All'
87
+
const emojisMap = { 'All': '🗃️' }; // Default for 'All'
88
88
allCategories.forEach(category => {
89
-
emojisMap[category.name] = category.emoji || '🔹'; // Fallback emoji if none in DB
89
+
emojisMap[category.name] = category.emoji || '❓'; // Fallback emoji if none in DB
90
90
});
91
91
setCategoryEmojis(emojisMap);
92
92
···
111
111
categoriesByResource[item.resource_id].push({
112
112
id: item.category.id,
113
113
name: item.category.name,
114
-
emoji: item.category.emoji || '🔹' // Fallback emoji if none in DB
114
+
emoji: item.category.emoji || '❓' // Fallback emoji if none in DB
115
115
});
116
116
});
117
117
···
400
400
401
401
<div className="search-filters-container">
402
402
<div className="search-container">
403
-
<span className="search-icon">🔎</span>
404
403
<input
405
404
type="text"
406
405
placeholder="Search resources..."
···
507
506
{/* Random Resources Section */}
508
507
{showRandomResources && randomResources.length > 0 && (
509
508
<div id="random-resources-section" className="random-resources-section">
510
-
<h2>Try These {randomResources.length} Resources</h2>
509
+
<h2>Check out these {randomResources.length} resources</h2>
511
510
<div className="resources-grid">
512
511
{randomResources.map((resource, index) => (
513
512
<ResourceCard
···
547
546
{Object.keys(resourcesByCategory).sort().map(category => (
548
547
<div key={category} className="category-section">
549
548
<h3 className="category-header">
550
-
{categoryEmojis[category] || '🔹'} {category} ({resourcesByCategory[category].length})
549
+
{categoryEmojis[category] || '❓'} {category} ({resourcesByCategory[category].length})
551
550
</h3>
552
551
<div className="resources-grid">
553
552
{resourcesByCategory[category].map((resource, index) => (
···
565
564
) : (
566
565
// When a specific category is selected
567
566
<div className="all-resources-section">
568
-
<h2>{categoryEmojis[activeCategory] || '🔹'} {activeCategory} Resources ({filteredResources.length})</h2>
567
+
<h2>{categoryEmojis[activeCategory] || '❓'} {activeCategory} Resources ({filteredResources.length})</h2>
569
568
{filteredResources.length > 0 ? (
570
569
<div className="resources-grid">
571
570
{randomizedFilteredResources.map((resource, index) => (