copied tesing folder to the main site

site/testing/features/Matching.tsx

@@ -0,0 +1,52 @@
+import { Grid, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import type {tTasks} from "../quizData"
+import SortableList from '../features/SortableList';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addList,mixUp } from './quizSlice';
+interface ComponentProps {
+    tasks: tTasks;
+    index: number;
+  }
+
+function Matching({tasks,index}: ComponentProps) {
+  const dispatch = useDispatch();
+  
+  // Добавляем список ответов очередного задания в хранилище
+  useEffect(() => {
+     dispatch(addList({ index, items: answers }));
+  }, []);
+
+  useEffect(() => {
+     dispatch(mixUp());
+  }, []);
+  
+
+  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 index={index} answers={answers}/>
+      </Grid>
+    </Grid> 
+  );
+}
+
+export default Matching