idtext

src/components/headings.tsx

+import { stringToSlug } from "../utils";
 
 export function Hhopp({text}:{text: string}){
     const arr = []; 
@@ -25,9 +26,16 @@ export function Hsmoke({text}:{text: string}){
     )
 }
 
-export function H1({text}:{text: string}){
+export function H1({text, id}:{text: string, id?: string}){
+    var idtext: string; 
+    if (id) {
+        idtext = id; 
+    }
+    else{
+        idtext = stringToSlug(text); 
+    }
     return(
-    <div className="row hone">
+    <div id={idtext} className="row hone">
         <svg width="100%" height="100%">
         <text x="0%" y="60%">
         {text}
@@ -38,20 +46,34 @@ export function H1({text}:{text: string}){
 }
 
 
-export function H2({text, id}:{text: string, id: string}){
+export function H2({text, id}:{text: string, id?: string}){
+    var idtext: string; 
+    if (id) {
+        idtext = id; 
+    }
+    else{
+        idtext = stringToSlug(text); 
+    }
     return(
         <div>
-            <h2 id={id}>{text}</h2>
+            <h2 id={idtext}>{text}</h2>
             <hr/>
         </div>
         
     )
 }
 
-export function H3({text, id}:{text: string, id: string}){
+export function H3({text, id}:{text: string, id?: string}){
+    var idtext: string; 
+    if (id) {
+        idtext = id; 
+    }
+    else{
+        idtext = stringToSlug(text); 
+    }
     return(
         <div>
-            <h3 id={id}>{text}</h3>  
+            <h3 id={idtext}>{text}</h3>  
         </div>
         
     )