Add blur filter

Author: Correct-Syntax

README.md

@@ -9,8 +9,8 @@ Launch the latest build of [Reference8](https://reference8.com) in your browser.
 - [x] Toggle fullscreen.
 - [x] Select photo or drag and drop to upload.
 - [x] Drag and drop to replace photo.
+- [x] Add other filters: blur, etc.
 - [ ] Menus should close without user needing to manually close them.
-- [ ] Add other filters: blur, etc.
 
 If you'd like to help out, please take a look at the Contributing section below.
 

public/blur.jpg

@@ -58,6 +58,10 @@ body {
   filter: contrast(140%);
 }
 
+.gaussian-blur {
+  filter: blur(5px);
+}
+
 .grid-overlay {
   max-height: calc(100vh - 48px);
 }

src/app/globals.css

@@ -43,6 +43,7 @@ const imageFiltersConst = [
   { id: 0, name: "Original", thumbnail: "/original.jpg", },
   { id: 1, name: "Grayscale", thumbnail: "/grayscale.jpg", },
   { id: 2, name: "High Contrast", thumbnail: "high-contrast.jpg", },
+  { id: 3, name: "Blur", thumbnail: "blur.jpg", },
 ];
 
 
@@ -54,7 +55,7 @@ export default function Home() {
   const [aboutMenuOpen, setAboutMenuOpen] = useState(false);
 
   const [gridMode, setGridMode] = useState(0);
-  const [imageFilters, setImageFilters] = useState([true, false, false]);
+  const [imageFilters, setImageFilters] = useState([true, false, false, false]);
 
   const [gridModeMenuOpen, setGridModeMenuOpen] = useState(false);
   const [imageFiltersMenuOpen, setImageFiltersMenuOpen] = useState(false);

src/app/page.js

@@ -12,6 +12,8 @@ function filterClassFromId(filterId) {
             return "grayscale";
         case 2:
             return "high-contrast";
+        case 3:
+            return "gaussian-blur";
     }
 }