Merge pull request #10 from SRN-SE-Fall24/filtertags

Added tags as button to filter recipes

Code/frontend/src/App.js

@@ -67,4 +67,4 @@ const AppWithProvider = () => (
   </AuthProvider>
 );
 
-export default AppWithProvider;
+export default AppWithProvider;

Code/frontend/src/components/TagFilter.js

@@ -0,0 +1,26 @@
+// TagFilter.js
+import React from "react";
+import { Button, Box, Wrap, WrapItem } from "@chakra-ui/react";
+
+const TagFilter = ({ tags, filterRecipesByTag }) => {
+    return (
+        <Box my={4}>
+            <Wrap spacing={2}>
+                {tags.map((tag, index) => (
+                    <WrapItem key={index}>
+                        <Button
+                            colorScheme="green"
+                            size="sm"
+                            borderRadius="full"
+                            onClick={() => filterRecipesByTag(tag)}
+                        >
+                            {tag}
+                        </Button>
+                    </WrapItem>
+                ))}
+            </Wrap>
+        </Box>
+    );
+};
+
+export default TagFilter;