Makes components itteratable

src/components/Results/Lighthouse.tsx

@@ -12,44 +12,6 @@ const processScore = (percentile: number) => {
 
 const Outer = styled(Card)``;
 
-const Row = styled.div`
-  details summary {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.25rem;
-    cursor: pointer;
-  }
-  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
-  span.lbl {
-    font-weight: bold;
-    text-transform: capitalize;
-  }
-  span.val {
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
-const ScoreRow = styled.li`
-  list-style: none;
-  margin: 0;
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.25rem 0;
-  justify-content: space-between;
-  span { min-width: 5rem; max-width: 8rem; }
-  border-bottom: 1px dashed ${colors.primaryTransparent};
-`;
-
-const ScoreList = styled.ul`
-  margin: 0;
-  padding: 0.25rem;
-  border-top: 1px solid ${colors.primary};
-  background: ${colors.primaryTransparent};
-`;
-
 interface Audit {
   id: string,
   score?: number | string,
@@ -59,26 +21,6 @@ interface Audit {
   displayValue?: string,
 };
 
-const ScoreItem = (props: { scoreId: any, audits: Audit[] }) => {
-  const { scoreId, audits } = props;
-  const audit = audits[scoreId];
-  if (!audit.score) return null;
-
-  let score = audit.score;
-  if (audit.displayValue) {
-    score = audit.displayValue;
-  } else if (audit.scoreDisplayMode) {
-    score = audit.score === 1 ? '✅ Pass' : '❌ Fail'; 
-  }
-
-  return (
-    <ScoreRow title={audit.description}>
-      <b>{ audit.title }</b>
-      <span>{score}</span>
-    </ScoreRow>
-  );
-};
-
 const makeValue = (audit: Audit) => {
   let score = audit.score;
   if (audit.displayValue) {
@@ -89,9 +31,9 @@ const makeValue = (audit: Audit) => {
   return score;
 };
 
-const LighthouseCard = (props: { lighthouse: any }): JSX.Element => {
-  const categories = props.lighthouse?.categories || {};
-  const audits = props.lighthouse?.audits || [];
+const LighthouseCard = (lighthouse: any): JSX.Element => {
+  const categories = lighthouse?.categories || {};
+  const audits = lighthouse?.audits || [];
 
   return (
     <Outer>