p6/7 started (Freezing due to no experience in redux)

labs/lab8/src/testing/features/Matching.tsx

@@ -0,0 +1,36 @@
+import { Grid, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import type {tTasks} from "../quizData"
+import SortableList from '../features/SortableList';
+interface ComponentProps {
+    tasks: tTasks;
+  }
+
+function Matching({tasks}: ComponentProps) {
+  const answers: string[] = tasks.map((item) => item.answer);
+  return (
+    <Grid container spacing={2}>
+      <Grid size={6}>
+        <List>
+          {tasks.map((item, index) => (
+          <ListItem key={index}>
+            <ListItemButton 
+              sx={{
+                border: '1px solid gray',
+                borderRadius: '5px',
+                textAlign: 'right',
+            }}>
+              <ListItemText primary={item.question} />
+           </ListItemButton>
+          </ListItem> 
+          ))}
+        </List>
+      </Grid>
+
+      <Grid size={6}>
+       <SortableList answers={answers} />
+      </Grid>
+    </Grid> 
+  );
+}
+
+export default Matching