fix slider

mother-type · May 7, 2024 · bedc4ab · bedc4ab
1 parent 841a300
commit bedc4ab
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 5 deletions.
diff --git a/public/repos_metadata.json b/public/repos_metadata.json
@@ -126,5 +126,56 @@
       }
     },
     "url": "body-sans"
+  },
+  {
+    "name": "Oysters",
+    "metadata": {
+      "unified_font_repository_version": "0.3",
+      "unified_font_repository_url": "https://github.com/raphaelbastide/Unified_Font_Repository/",
+      "typeface_family": {
+        "name": "Oysters",
+        "desccription": "A decorative typeface inspired by oysters",
+        "tags": [
+          "sans-serif",
+          "pixel",
+          "monospace",
+          "incomplete",
+          "decorative"
+        ],
+        "repository_url": "https://github.com/mother_type/Oyster",
+        "project_url": "https://mother_type.de/oysters",
+        "tools": [
+          "Inkscape",
+          "Fontforge"
+        ],
+        "similar_fonts": [
+          "Helvetica",
+          "Neue Haas Grotesk"
+        ],
+        "designer": [
+          {
+            "name": "printer_scanner"
+          },
+          {
+            "url": "https://printerscanner.net"
+          }
+        ],
+        "writing_systems": [
+          "Latin"
+        ],
+        "published": [
+          2023
+        ],
+        "license": [
+          "SIL Open Font License, Version 1.1"
+        ],
+        "sample_text": [
+          {
+            "en_us": "The quick brown fox jumps over the lazy dog"
+          }
+        ]
+      }
+    },
+    "url": "oysters"
   }
 ]
diff --git a/src/components/FontDemo.jsx b/src/components/FontDemo.jsx
@@ -35,21 +35,27 @@ function FontDemo(props) {
         <button onClick={handleRefreshClick} className='button corner-button'>&#8635;</button>
         <Slider
           title="Size"
+          min={10}
+          max={500}
           value={fontSize}
           onChange={setFontSize}
           step={50}
         />
         <Slider
           title="Leading"
+          min={-15}
+          max={20}
           value={leading}
           onChange={setLeading}
-          step={0.1}
+          step={1}
         />
         <Slider
           title="Kerning"
+          min={-25}
+          max={50}
           value={kerning}
           onChange={setKerning}
-          step={1}
+          step={0.01}
         />
         <ColorPicker onColorChange={handleColorChange} text={"Color"} />
         <br />

diff --git a/src/components/Slider.jsx b/src/components/Slider.jsx
@@ -1,14 +1,14 @@
 import "../css/components/Slider.css";
 
 
-const Slider = ({ title, value, onChange, step }) => (
+const Slider = ({ title, value, onChange, step, min, max }) => (
   <div>
     <h4>{title}</h4>
     <div className='Slider__container'>
       <input
         type="range"
-        min={title === "Size" ? 16 : -100}
-        max={title === "Size" ? 600 : 100}
+        min={min}
+        max={max}
         value={value}
         step={step} // Adjust the step size here
         className='Slider'