Merge pull request #4 from danielq987/main

feat:Add search to picker and some small styling suggestions

src/App.css

@@ -53,6 +53,23 @@
   gap: 1rem;
 }
 
+.modal > .MuiPopover-paper {
+  overflow: hidden;
+}
+
+.picker-search {
+  margin: 0.5rem;
+}
+
+.image-grid-wrapper {
+  overflow: auto;
+}
+
+.image-grid {
+  margin: 0.5rem;
+  border-radius: 0.25rem;
+}
+
 .buttons {
   display: flex;
   align-items: center;
@@ -73,4 +90,15 @@
 
 .footer > a:hover {
   color: rgb(255, 255, 255);
-}
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: white;
+  border-radius: 1rem;
+  min-height: 2rem;
+}

src/App.jsx

@@ -162,7 +162,7 @@ ctx.drawImage(img, 0,0, img.width, img.height,centerShift_x,centerShift_y,img.wi
                 onChange={(e, v) => setRotate(v)}
                 min={-10}
                 max={10}
-                step={1}
+                step={0.2}
                 track={false}
                 color="secondary"
               />

src/components/Picker.jsx

@@ -1,12 +1,30 @@
-import ImageList from "@mui/material/ImageList";
+import {
-import ImageListItem from "@mui/material/ImageListItem";
+  ImageList,
-import Popover from "@mui/material/Popover";
+  ImageListItem,
-import Button from "@mui/material/Button";
+  Popover,
-import { useState } from "react";
+  Button,
-import characters from "../characters.json";
+  TextField,
+} from "@mui/material";
+import { useState, useEffect } from "react";
+import default_characters from "../characters.json";
 
 export default function Picker({ setCharacter }) {
   const [anchorEl, setAnchorEl] = useState(null);
+  const [search, setSearch] = useState("");
+  const [characters, setCharacters] = useState(default_characters);
+
+  useEffect(() => {
+    setCharacters(
+      default_characters.filter((char) => {
+        const s = search.toLowerCase();
+        return (
+          s === char.id ||
+          char.name.toLowerCase().includes(s) ||
+          char.character.toLowerCase().includes(s)
+        );
+      })
+    );
+  }, [search]);
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -38,41 +56,57 @@ export default function Picker({ setCharacter }) {
           vertical: "bottom",
           horizontal: "left",
         }}
+        className="modal"
       >
-        <ImageList
+        <div className="picker-search">
-          sx={{
+          <TextField
-            width: window.innerWidth < 600 ? 300 : 500,
+            label="Search"
-            height: 450,
+            size="small"
-          }}
+            color="secondary"
-          cols={window.innerWidth < 600 ? 3 : 4}
+            value={search}
-          rowHeight={140}
+            multiline={true}
-        >
+            fullWidth
-          {characters.map((c, index) => (
+            onChange={(e) => setSearch(e.target.value)}
-            <ImageListItem
+          />
-              key={index}
+        </div>
-              onClick={() => {
+        <div className="image-grid-wrapper">
-                handleClose();
+          <ImageList
-                setCharacter(index);
+            sx={{
-              }}
+              width: window.innerWidth < 600 ? 300 : 500,
-              sx={{
+              height: 450,
-                cursor: "pointer",
+              overflow: "visible",
-                "&:hover": {
+            }}
-                  opacity: 0.5,
+            cols={window.innerWidth < 600 ? 3 : 4}
-                },
+            rowHeight={140}
-                "&:active": {
+            className="image-grid"
-                  opacity: 0.8,
+          >
-                },
+            {characters.map((c, index) => (
-              }}
+              <ImageListItem
-            >
+                key={index}
-              <img
+                onClick={() => {
-                src={`/img/${c.img}`}
+                  handleClose();
-                srcSet={`/img/${c.img}`}
+                  setCharacter(index);
-                alt={c.name}
+                }}
-                loading="lazy"
+                sx={{
-              />
+                  cursor: "pointer",
-            </ImageListItem>
+                  "&:hover": {
-          ))}
+                    opacity: 0.5,
-        </ImageList>
+                  },
+                  "&:active": {
+                    opacity: 0.8,
+                  },
+                }}
+              >
+                <img
+                  src={`/img/${c.img}`}
+                  srcSet={`/img/${c.img}`}
+                  alt={c.name}
+                  loading="lazy"
+                />
+              </ImageListItem>
+            ))}
+          </ImageList>
+        </div>
       </Popover>
     </div>
   );