keyword images and add keyword filtering

src/components/KeywordsPicker.js

@@ -0,0 +1,37 @@
+import classNames from "classnames";
+import * as React from "react";
+
+const KeywordsPicker = ({ keywords, value, onChange }) => {
+  return (
+    <div>
+      <span className="text-xs text-[#A2A2A2]">Filter by...</span>
+      <ul className="flex gap-1 flex-wrap mt-1 mb-2">
+        {keywords.map((keyword) => {
+          const selected = value === keyword;
+          const disabled = value && !selected;
+          // if (value && !selected) {
+          //   return;
+          // }
+          return (
+            <li key={keyword}>
+              <button
+                className={classNames(
+                  "py-[5px] px-2 rounded-full text-[#C8C8C8] hover:bg-gray-700 bg-[#1A1A1A] border border-[#494949]                  ",
+                  selected && "bg-blue-600 hover:bg-blue-800",
+                  disabled && "text-[#777777] cursor-default hover:bg-[#1A1A1A]"
+                )}
+                disabled={disabled}
+                onClick={() => (selected ? onChange(null) : onChange(keyword))}
+                type="button"
+              >
+                {keyword}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default KeywordsPicker;

src/components/MasonryGallery.js

@@ -103,7 +103,7 @@ const MasonryGallery = ({
         const ar = getAspectRatio(image);
         let width;
         let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`;
-        if (rowAspectRatioSum < targetAspect / 2) {
+        if (rowAspectRatioSum < targetAspect * 0.66) {
           // incomplete row, render stuff at "ideal" sizes instead of filling width
           width = `calc(100vw / ${targetAspect / ar})`;
           height = "unset";