From 42affdc79f9bd7737755c675a0f39e738b31b7bf Mon Sep 17 00:00:00 2001
From: bananu7 <bananu7@o2.pl>
Date: Thu, 4 Apr 2024 23:33:22 +0200
Subject: [PATCH] Added fader background level label

---
 public/fader.svg         | 65 ++++++++++++++++++++++++++++++++++++++++
 src/components/Fader.css |  3 ++
 src/components/Fader.tsx |  1 +
 3 files changed, 69 insertions(+)
 create mode 100644 public/fader.svg
 create mode 100644 src/components/Fader.css

diff --git a/public/fader.svg b/public/fader.svg
new file mode 100644
index 0000000..dee7a82
--- /dev/null
+++ b/public/fader.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="65"
+   height="300"
+   viewBox="0 0 17.197916 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g id="layer1">
+    <g transform="translate(-2.5 1)">
+      <text
+        style="font-size:3.175px;text-align:end;white-space:pre;shape-inside:url(#rect580-0-5-3-7);display:inline;fill:#cccccc"
+        x="0"
+        y="13">+10</text>
+      <text
+        style="font-size:3.175px;text-align:end;white-space:pre;shape-inside:url(#rect580-0-5-3-8);display:inline;fill:#cccccc"
+        x="0.5"
+        y="28">0</text>
+      <text
+        style="font-size:3.175px;text-align:end;white-space:pre;shape-inside:url(#rect580-0-5-3-2);display:inline;fill:#cccccc"
+        x="0.5"
+        y="43">-10</text>
+      <text
+         style="font-size:3.175px;text-align:end;white-space:pre;shape-inside:url(#rect580-0-5-3-5);display:inline;fill:#cccccc"
+         x="0.5"
+         y="57">-20</text>
+      <text
+        style="font-size:3.175px;text-align:end;white-space:pre;shape-inside:url(#rect580-0-5-3-6);display:inline;fill:#cccccc"
+        x="0.5"
+        y="86">-40</text>
+    </g>
+
+    <rect
+       style="fill:#cccccc"
+       width="12"
+       height="0.3"
+       x="5"
+       y="13" />
+    <rect
+       style="fill:#cccccc"
+       width="12"
+       height="0.3"
+       x="5"
+       y="28" />
+    <rect
+       style="fill:#cccccc"
+       width="12"
+       height="0.3"
+       x="5"
+       y="43" />
+    <rect
+       style="fill:#cccccc"
+       width="12"
+       height="0.3"
+       x="5"
+       y="57" />
+    <rect
+       style="fill:#cccccc"
+       width="12"
+       height="0.3"
+       x="5"
+       y="86" />
+  </g>
+</svg>
diff --git a/src/components/Fader.css b/src/components/Fader.css
new file mode 100644
index 0000000..d4d780f
--- /dev/null
+++ b/src/components/Fader.css
@@ -0,0 +1,3 @@
+.fader {
+    background-image: url("fader.svg");
+}
\ No newline at end of file
diff --git a/src/components/Fader.tsx b/src/components/Fader.tsx
index 992d454..b13afe1 100644
--- a/src/components/Fader.tsx
+++ b/src/components/Fader.tsx
@@ -1,4 +1,5 @@
 import { useCallback, ChangeEvent, WheelEvent } from 'react'
+import './Fader.css'
 
 export type FaderProps = {
     value: number,