initial commit

components/Tinted.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 xwra
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+interface TintedImageProps {
+  src: string;
+  colour: string;
+  [key: string]: any;
+}
+
+export default function TintedImage({
+  colour,
+  src,
+  ...props
+}: TintedImageProps) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      {...props}
+    >
+      <defs>
+        <filter
+          id="tint"
+          x="0%"
+          y="0%"
+          width="100%"
+          height="100%"
+          colorInterpolationFilters="sRGB"
+        >
+          <feColorMatrix
+            type="saturate"
+            values="0"
+            result="grayscale"
+          />
+          <feFlood flood-color={colour} result="tint" />
+          <feComposite
+            in="tint"
+            in2="grayscale"
+            operator="arithmetic"
+            k1="1"
+            k2="0"
+            k3="0"
+            k4="0"
+          />
+        </filter>
+      </defs>
+      <image
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        preserveAspectRatio="xMidYMid meet"
+        filter={`url(#tint)`}
+        href={src}
+      />
+    </svg>
+  );
+}