Add Grain project on index, add bannerSettings.quality for grain banner

src/components/ItemCard.tsx

@@ -10,6 +10,7 @@ import {type LinkIcon, LinkIcons} from "../utils/types";
 
 type ItemCardProps = {
     banner: string;
+    bannerSettings?: { quality: number};
     bannerBlur: string;
     title: string;
     description: string;
@@ -17,7 +18,7 @@ type ItemCardProps = {
     location: string;
 }
 
-const ItemCard = ({banner, bannerBlur, title, description, links, location}: ItemCardProps) => {
+const ItemCard = ({banner, bannerBlur, title, description, links, location, bannerSettings}: ItemCardProps) => {
     const itemRef = useRef<HTMLDivElement>(null);
     const mobileButtonRef = useRef<HTMLAnchorElement>(null);
     const [active, toggleActive, setActive] = useToggle()
@@ -41,7 +42,9 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
         <div ref={itemRef}
              className={classNames("item [&:not(:first-child)]:mt-3", active ? "active" : null)}
              onClick={navigate}>
-            <DependentImage fill src={banner} blurDataURL={bannerBlur}
+            <DependentImage fill src={banner}
+                            quality={bannerSettings?.quality ?? 75}
+                            blurDataURL={bannerBlur}
                             className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
                             placeholder="blur"
                             alt={`Banner for ${title}`}

src/pages/index.tsx

@@ -63,6 +63,24 @@ export async function getStaticProps() {
                     location: "https://github.com/Xevion/Paths",
                 }
             ]
+        },
+        {
+            title: "Grain",
+            banner: "/grain.jpeg",
+            bannerSettings: {quality: 100},
+            location: "/grain",
+            shortDescription: "An experimental React app to generate beautiful backgrounds with noise filters.",
+            longDescription: "Quickly generate beautiful backgrounds with noise filters. Built with React, hosted on Vercel, and rendered using simple SVG noise filters (just HTML & CSS).",
+            links: [
+                {
+                    icon: 'external',
+                    location: "https://grain.xevion.dev"
+                },
+                {
+                    icon: "github",
+                    location: "https://github.com/Xevion/grain"
+                }
+            ]
         }
     ];
 

src/utils/types.ts

@@ -1,10 +1,11 @@
-import {IconType} from "react-icons";
+import type {IconType} from "react-icons";
 import {AiFillGithub, AiOutlineLink} from "react-icons/ai";
 import {RxOpenInNewWindow} from "react-icons/rx";
 
 export type Project = {
     title: string;
     banner: string;
+    bannerSettings?: {quality: number;}
     longDescription: string;
     shortDescription: string;
     links?: LinkIcon[];