feat: icons for filters in drawer

package.json

@@ -29,6 +29,7 @@
     "@fontsource/rubik": "5.0.18",
     "@heroicons/react": "2.1.1",
     "@pixi/filter-adjustment": "5.1.1",
+    "@pixi/filter-pixelate": "5.1.1",
     "@pixi/react": "7.1.1",
     "clsx": "2.1.0",
     "immer": "10.0.3",

src/components/icons/filters/BlurIcon.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+
+export function BlurIcon(): ReactElement {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-3 .5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm15 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM14 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zm-11 10c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm0-17c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM10 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 5.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm8 .5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3 8.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM14 17c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-4-12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0 8.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4-4.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-4c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z" />
+    </svg>
+  );
+}

src/components/icons/filters/ContrastIcon.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+
+export function ContrastIcon(): ReactElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      enableBackground="new 0 0 24 24"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="currentColor"
+    >
+      <g>
+        <rect fill="none" height="24" width="24" />
+      </g>
+      <g>
+        <path d="M12,22c5.52,0,10-4.48,10-10S17.52,2,12,2S2,6.48,2,12S6.48,22,12,22z M13,4.07c3.94,0.49,7,3.85,7,7.93s-3.05,7.44-7,7.93 V4.07z" />
+      </g>
+    </svg>
+  );
+}

src/components/icons/filters/DropletIcon.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+
+export function DropletIcon(): ReactElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      enableBackground="new 0 0 24 24"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="currentColor"
+    >
+      <g>
+        <path d="M0,0h24v24H0V0z" fill="none" />
+      </g>
+      <g>
+        <path d="M12,4.81L12,19c-3.31,0-6-2.63-6-5.87c0-1.56,0.62-3.03,1.75-4.14L12,4.81 M6.35,7.56L6.35,7.56C4.9,8.99,4,10.96,4,13.13 C4,17.48,7.58,21,12,21c4.42,0,8-3.52,8-7.87c0-2.17-0.9-4.14-2.35-5.57l0,0L12,2L6.35,7.56z" />
+      </g>
+    </svg>
+  );
+}

src/components/icons/filters/PixelateIcon.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+
+export function PixelateIcon(): ReactElement {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M11 9h2v2h-2zm-2 2h2v2H9zm4 0h2v2h-2zm2-2h2v2h-2zM7 9h2v2H7zm12-6H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 18H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm2-7h-2v2h2v2h-2v-2h-2v2h-2v-2h-2v2H9v-2H7v2H5v-2h2v-2H5V5h14v6z" />
+    </svg>
+  );
+}

src/components/icons/filters/SunDimIcon.tsx

@@ -0,0 +1,28 @@
+import type { ReactElement } from "react";
+
+export function SunDimIcon(): ReactElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-sun-dim"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 4h.01" />
+      <path d="M20 12h.01" />
+      <path d="M12 20h.01" />
+      <path d="M4 12h.01" />
+      <path d="M17.657 6.343h.01" />
+      <path d="M17.657 17.657h.01" />
+      <path d="M6.343 17.657h.01" />
+      <path d="M6.343 6.343h.01" />
+    </svg>
+  );
+}

src/components/icons/filters/SunHighIcon.tsx

@@ -0,0 +1,28 @@
+import type { ReactElement } from "react";
+
+export function SunHighIcon(): ReactElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-sun"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  );
+}

src/components/layout/BasicLayout.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, ReactNode } from "react";
 import clsx from "clsx";
-import { GithubIcon } from "~/components/icons/GithubIcon";
-import { LinkedInIcon } from "~/components/icons/LinkedInIcon";
+import { GithubIcon } from "~/components/icons/social/GithubIcon";
+import { LinkedInIcon } from "~/components/icons/social/LinkedInIcon";
 
 export interface SocialLinkProps {
   onGithubClick?: () => void;

src/components/library/editor/atoms/filters/FilterAtoms.ts

@@ -5,6 +5,10 @@ export const blurFilterAtom = atom(0);
 export const brightnessFilterAtom = atom(1);
 export const contrastFilterAtom = atom(1);
 export const saturationFilterAtom = atom(1);
+export const pixelateFilterAtom = atom(0);
+export const redFilterAtom = atom(1);
+export const greenFilterAtom = atom(1);
+export const blueFilterAtom = atom(1);
 
 // Derived
 export const controlFilterAtom = atom(
@@ -13,12 +17,20 @@ export const controlFilterAtom = atom(
     const brightness = get(brightnessFilterAtom);
     const contrast = get(contrastFilterAtom);
     const saturation = get(saturationFilterAtom);
+    const pixelate = get(pixelateFilterAtom);
+    const red = get(redFilterAtom);
+    const green = get(greenFilterAtom);
+    const blue = get(blueFilterAtom);
 
     return {
       blur,
       brightness,
       contrast,
       saturation,
+      pixelate,
+      red,
+      green,
+      blue,
     };
   },
   (_get, set, update: Partial<StagedFilter>) => {
@@ -34,5 +46,17 @@ export const controlFilterAtom = atom(
     if (update.saturation !== undefined) {
       set(saturationFilterAtom, update.saturation);
     }
+    if (update.pixelate !== undefined) {
+      set(pixelateFilterAtom, update.pixelate);
+    }
+    if (update.red !== undefined) {
+      set(redFilterAtom, update.red);
+    }
+    if (update.green !== undefined) {
+      set(greenFilterAtom, update.green);
+    }
+    if (update.blue !== undefined) {
+      set(blueFilterAtom, update.blue);
+    }
   }
 );

src/components/library/editor/drawer/FilterDrawer.stories.tsx

@@ -17,6 +17,10 @@ const commonProps = {
   brightness: 1,
   contrast: 1,
   saturation: 1,
+  pixelate: 0,
+  red: 0,
+  green: 0,
+  blue: 0,
   onFilterChange: () => console.log("onFilterChange"),
   onClose: () => console.log("onClose"),
 } satisfies ComponentProps;