Added simple suggested matches template.

sports-matcher/src/App.js

@@ -1,22 +1,13 @@
-import logo from './logo.svg';
 import './App.css';
 import MatchInfo from './matchinfo';
-import { Stack } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
+import SuggestedMatches from './SuggestedMatches';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-      </header>
       <main>
-        <Stack sx={{ margin: 2 }} direction="row" spacing={2}>
+        <SuggestedMatches />
-          <MatchInfo>
-          </MatchInfo>
-          <MatchInfo>
-          </MatchInfo>
-          <MatchInfo>
-          </MatchInfo>
-        </Stack>
       </main>
     </div>
   );

sports-matcher/src/SuggestedMatches.js

@@ -0,0 +1,20 @@
+import { Stack, Typography } from "@mui/material";
+import MatchInfo from "./matchinfo";
+
+export default function SuggestedMatches() {
+    return (
+        <div style={{ padding: 25 }}>
+            <Typography variant="h4" component="div">
+                Suggested
+            </Typography>
+            <Stack sx={{ margin: 2 }} direction="row" spacing={2}>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+            </Stack >
+        </div>
+    );
+}