single component routes

caneveryoneusetemp · Mar 17, 2024 · 1ebde84 · 1ebde84
1 parent 9d46631
commit 1ebde84
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/partials/component.jsx b/src/partials/component.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import { Link, useParams } from "react-router-dom";
 
 const Component = (props) => {
 
-    const { component } = props;
+    const { selectedComponent } = props;
+    const { framework, component } = useParams();
 
     const calculateErrors = (component) => {
 
@@ -21,7 +23,7 @@ const Component = (props) => {
         return count;
     }
 
-    const errorCountTotal = calculateErrors(component);
+    const errorCountTotal = calculateErrors(selectedComponent);
 
     const retrieveBgColor = (count) => {
         if (count > 3) return 'bg-danger';
@@ -30,18 +32,22 @@ const Component = (props) => {
 
     return(
         <div className={`component-card ${retrieveBgColor(errorCountTotal)}`}>
-            <div className="component-card-header">{component.name}</div>
+            <div className="component-card-header">{selectedComponent.name}</div>
             <div className="component-card-body">
                 <h5 className="component-card-title">
                     <b>{errorCountTotal > 0 ? errorCountTotal : 'OK'}</b>
                     {errorCountTotal > 0 &&
-                        <a href={component.preview_link} target="_blank" rel="noreferrer" aria-label="view errors"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#fa2c2c" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></a>
+                        <a href={selectedComponent.preview_link} target="_blank" rel="noreferrer" aria-label="view errors"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#fa2c2c" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></a>
                     }
                 </h5>
 
-                <div className="component-card-footer">
-                    {component.preview_link && component.preview_link.length > 0 &&
-                        <a href={component.preview_link} target="_blank" rel="noreferrer" aria-label="open component example"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round"><g fill="none" fill-rule="evenodd"><path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"/></g></svg></a>
+                <div className="component-card-footer d-flex flex-column">
+                    {selectedComponent.preview_link && selectedComponent.preview_link.length > 0 &&
+                        <a href={selectedComponent.preview_link} target="_blank" rel="noreferrer" aria-label="open component example">Preview <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round"><g fill="none" fill-rule="evenodd"><path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"/></g></svg></a>
+                    }
+
+                    { framework && !component &&
+                        <Link to={`/${framework}/${selectedComponent.slug}/`} className="btn btn-secondary">Check errors</Link>
                     }
                 </div>
             </div>

diff --git a/src/partials/single-framework.jsx b/src/partials/single-framework.jsx
@@ -39,14 +39,14 @@ const SingleFramework = (props) => {
                 { selectedFramework.components && selectedFramework.components.length > 0 &&
                     <>
                         { selectedComponent && Object.keys(selectedComponent).length !== 0 &&
-                            <Component component={selectedComponent} type="detailed" />
+                            <Component selectedComponent={selectedComponent} type="detailed" />
                         }
 
                         { (!selectedComponent || ( selectedComponent && Object.keys(selectedComponent).length === 0)) &&
                             <>
                                 {selectedFramework.components.map( (comp, i ) => {
                                     return (
-                                        <Component component={comp} key={i} type="sum" />
+                                        <Component selectedComponent={comp} key={i} type="sum" />
                                     )
                                 })}
                             </>