Fix framework splitter

xoidlabs · May 7, 2024 · 91c035f · 91c035f
1 parent a38df97
commit 91c035f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/demo-section.js b/src/components/demo-section.js
@@ -21,6 +21,11 @@ import 'prismjs/components/prism-jsx';
 //   }
 // })
 
+const getKey = (line) =>
+  line
+    .trim()
+    .replace(/^(export )?const /, '')
+    .substring(0, 7);
 
 export default () => {
   const [state, setState] = useState(defaultOptions)
@@ -116,10 +121,19 @@ export default () => {
         <CodeAnimate 
           value={codeText}     
           checkSpecialLine={(line) => ['---'].includes(line)}
-          renderSpecialLine={() => <hr />}
+          renderSpecialLine={() => <Splitter framework={state.framework} key={'---'} />}
+          getKey={getKey}
         />
       </div>
     </div>
   </Section>
   )
+}
+
+function Splitter(props) {
+  return <div className='splitter'>
+    <div className='filename'>
+      Counter.{props.framework}
+    </div>
+  </div>;
 }
diff --git a/src/css/demo.scss b/src/css/demo.scss
@@ -85,6 +85,7 @@
   height: 2.5px;
   display: block;
   margin-left: -26px;
+  margin-bottom: 10px;
   position: relative;
   background-image: radial-gradient(
     farthest-corner at 0px 0px,