created a Chip component

frontend/src/components/Chip.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function Chip(props) {
+  const { label } = props;
+
+  return (
+    <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
+      {label}
+    </span>
+  );
+}
+
+Chip.propTypes = {
+  label: PropTypes.string.isRequired,
+};

frontend/src/components/Package.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import Chip from './Chip';
 
 export default function Package(props) {
   const { data, showRequest } = props;
@@ -29,30 +30,22 @@ export default function Package(props) {
           </span>
         </div>
       </div>
-      {showRequest ? (
+      {
         <div className="flex items-center px-6 py-4 justify-end">
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
-            {data.quantityAvailable ?? '0'}
-            {' available'}
-          </span>
-          <Link to={`request/${data._id}`}>
-            <button
-              type="button"
-              className="bg-primary hover:bg-accent-blue text-black font-bold py-2 px-4 rounded"
-            >
-              {/* TODO: Disable button if quantityAvailable < 1 */}
-              Request
-            </button>
-          </Link>
-        </div>
-      ) : (
-        <div className="flex items-center px-6 py-4 justify-end">
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
-            {data.requests ? data.requests.length : '0'}
-            {' requested'}
-          </span>
+          <Chip label={`${data.quantityAvailable ?? '0'} available`} />
+          {showRequest && (
+            <Link to={`request/${data._id}`}>
+              <button
+                type="button"
+                className="bg-primary hover:bg-accent-blue text-black font-bold py-2 px-4 rounded"
+              >
+                {/* TODO: Disable button if quantityAvailable < 1 */}
+                Request
+              </button>
+            </Link>
+          )}
         </div>
-      )}
+      }
     </div>
   );
 }

frontend/src/components/PackageGenerator.jsx

@@ -32,6 +32,7 @@ export default function PackageGenerator(props) {
           ...item,
           key: index,
         }));
+        dataWithKey.filter((item) => item.fulfilled === 0);
         setRequestData(dataWithKey);
       });
   }, []);