setMeme(temps)}
- // 1. Add aria-label to the clickable container
aria-label={`Select meme template: ${temps.name}`}
- role="button" // Indicates it is an interactive element
+ role="button"
>
{memesMeta[temps.name]?.captions?.join(", ")}
diff --git a/src/components/Favorites.jsx b/src/components/Favorites.jsx
new file mode 100644
index 00000000..2f84bd01
--- /dev/null
+++ b/src/components/Favorites.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { useFavorites } from '../hooks/useFavorites';
+
+const Favorites = ({ setMeme }) => {
+ const { favorites, toggleFavorite } = useFavorites();
+
+ if (favorites.length === 0) {
+ return (
+
+
+
Your Favorite Templates
+
+
+
❤️
+
No Favorites Yet
+
+ Heart your favorite meme templates to see them here
+
+
+ Browse Templates
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
Your Favorite Templates
+
+
+ {favorites.length} favorite template{favorites.length !== 1 ? 's' : ''}
+
+
+
+ {favorites.map((template) => (
+
setMeme(template)}
+ >
+
+
+
+
+
+ {/* Heart button */}
+
+
+ {/* Play icon on hover */}
+
+
+
+
+
{template.name}
+
+ 📝 {template.box_count} texts
+
+
+
+ ))}
+
+
+
+ );
+};
+
+export default Favorites;
\ No newline at end of file
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index c4aa2fe5..6a3e16d7 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -7,28 +7,68 @@ import Footer from "./Footer";
import "../style.css";
import "../index.css";
+
const Home = () => {
const [temp, setTemp] = useState([]);
const [meme, setMeme] = useState(null);
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
+ const [selectedCategory, setSelectedCategory] = useState('all');
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [isDark, setIsDark] = useState(() => {
+ const saved = localStorage.getItem('theme');
+ return saved ? saved === 'dark' : true;
+ });
+
+ const toggleTheme = () => {
+ const newTheme = !isDark;
+ setIsDark(newTheme);
+ localStorage.setItem('theme', newTheme ? 'dark' : 'light');
+ };
const [itemsPerPage] = useState(18); // Fixed 18 items per page
useEffect(() => {
+ setIsLoading(true);
fetch("https://api.imgflip.com/get_memes")
- .then((res) => res.json())
+ .then((res) => {
+ if (!res.ok) throw new Error('Failed to load memes');
+ return res.json();
+ })
.then((data) => {
setTemp(data.data.memes);
+ setIsLoading(false);
+ })
+ .catch((err) => {
+ setError(err.message);
+ setIsLoading(false);
});
}, []);
- // Function to filter memes based on the search query
- const filteredMemes = temp.filter((meme) =>
- meme.name.toLowerCase().includes(searchQuery.toLowerCase())
- );
+ // Enhanced filtering with categories
+ const filteredMemes = temp.filter((meme) => {
+ const matchesSearch = meme.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+ if (selectedCategory === 'all') return matchesSearch;
+
+ const categoryKeywords = {
+ reaction: ['surprised', 'pikachu', 'yelling', 'woman', 'cat'],
+ funny: ['spongebob', 'mocking', 'fine', 'dog'],
+ choice: ['drake', 'buttons', 'two buttons', 'exit'],
+ success: ['cheers', 'dicaprio', 'handshake'],
+ programming: ['debugging', 'brain', 'expanding']
+ };
+
+ const keywords = categoryKeywords[selectedCategory] || [];
+ const matchesCategory = keywords.some(keyword =>
+ meme.name.toLowerCase().includes(keyword)
+ );
+
+ return matchesSearch && matchesCategory;
+ });
// Calculate the index of the last and first item on the current page
const indexOfLastItem = currentPage * itemsPerPage;
@@ -87,20 +127,109 @@ const Home = () => {
};
return (
-
+
+
-
+
{meme === null ? (
<>
-
-
+ {/* Categories */}
+
+
+ {[
+ { id: 'all', name: 'All', icon: '🎭' },
+ { id: 'reaction', name: 'Reaction', icon: '😱' },
+ { id: 'funny', name: 'Funny', icon: '😂' },
+ { id: 'choice', name: 'Choice', icon: '🤔' },
+ { id: 'success', name: 'Success', icon: '🎉' },
+ { id: 'programming', name: 'Code', icon: '💻' }
+ ].map(category => (
+
+ ))}
+
+
+ {filteredMemes.length} memes found
+ {selectedCategory !== 'all' && ` in ${selectedCategory}`}
+
+
+
+ {/* Error Message */}
+ {error && (
+
+
+
⚠️
+
+
{error}
+
+
+
+
+ )}
+
+ {/* Loading State */}
+ {isLoading ? (
+
+ {[...Array(18)].map((_, i) => (
+
+ ))}
+
+ ) : filteredMemes.length === 0 ? (
+
+
😅
+
No memes found
+
+ {searchQuery ? `No results for "${searchQuery}"` : 'No memes in this category'}
+
+
+
+ ) : (
+
+ )}
+ {/* Pagination - Only show if has results */}
+ {!isLoading && filteredMemes.length > 0 && (
+
+
+
+
+
+ {[...Array(8)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+
Your Meme History
+ {history.length > 0 && (
+
+ )}
+
+
+ {history.length === 0 ? (
+
+ ) : (
+ <>
+
+ {history.length} meme{history.length !== 1 ? 's' : ''} in your history
+
+
+
+ {history.map((meme) => (
+
+
+
+
+
+ {/* Action buttons */}
+
+
+
+
+
+
+
+
+ {meme.template_name}
+
+
+ {new Date(meme.created_at).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric'
+ })}
+
+
+ {/* Show meme texts */}
+ {meme.texts && meme.texts.length > 0 && (
+
+ {meme.texts.slice(0, 2).map((text, i) => (
+
"{text}"
+ ))}
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+