Merge branch '6-create-list-of-solutions-component' into 'main'

Resolve "Create list of solutions component"

Closes #6

See merge request !2

src/App.tsx

 import React, { useState, useEffect } from 'react';
-import logo from './logo.svg';
+import PotentialSolutionList, { PotentialSolutionListProps } from './components/potential-solution-list/PotentialSolutionList';
 import './App.css';
+import Spinner from './components/spinner/Spinner';
 
-interface AppProps {}
+interface AppProps { }
+
+function App({ }: AppProps) {
+
+  const solution = { link: "http://example.com", description: "What is your bankaccountnumer?" };
+  const givenSolutions: PotentialSolutionListProps = {
+    intro: "Here are some of the most common examples of administrative issues:",
+    solutions: [solution]
+  };
 
-function App({}: AppProps) {
-  // Return the App component.
   return (
-    <div>learn react</div>
+    <>
+      <PotentialSolutionList {...givenSolutions} />
+      <Spinner big={false} loading={true}/>
+    </>
   );
 }
 

src/components/potential-solution-list/PotentialSolutionList.test.tsx

+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import PotentialSolutionList, { PotentialSolutionListProps } from './PotentialSolutionList';
+
+describe('<PotentialSolutionList>', () => {
+    it('renders a list of links', () => {
+        const solution = { link: "http://example.com", description: "What is your bankaccountnumer?" };
+        const givenSolutions: PotentialSolutionListProps = {
+            intro: "Here are some of the most common examples of administrative issues:",
+            solutions: [solution]
+        };
+        const { getByText, } = render(<PotentialSolutionList {...givenSolutions} />);
+        const solutionIntro = getByText(/examples of administrative issues:/i);
+        expect(document.body.contains(solutionIntro));
+        const theSolutionLink = screen.getByRole("link");
+        expect(theSolutionLink).toHaveTextContent(solution.description)
+        expect(theSolutionLink).toHaveAttribute("href", solution.link)
+    });
+});
\ No newline at end of file

src/components/potential-solution-list/PotentialSolutionList.tsx

+import React from 'react';
+
+type Solution = { link: string, description: string };
+export interface PotentialSolutionListProps {
+    intro: string;
+    solutions: Solution[];
+}
+
+function PotentialSolutionList({ solutions, intro }: PotentialSolutionListProps) {
+
+    return (
+        <div className="solutions">
+            <p>{intro}</p>
+            <ul>
+                {
+                    solutions.map((solution, i) =>
+                        <li key={i}><a href={solution.link}>{solution.description}</a></li>
+                    )
+                }
+            </ul>
+        </div>
+    );
+}
+
+export default PotentialSolutionList;
+