96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import { IonButton, useIonRouter } from '@ionic/react';
|
|
import './QuizzesMainMenuContainer.css';
|
|
import { COLOR_TEXT, CONNECTIVE_REVISION_LINK, LISTENING_PRACTICE_LINK, MATCHING_FRENZY_LINK } from '../constants';
|
|
|
|
interface ContainerProps {
|
|
name: string;
|
|
}
|
|
|
|
const QuizzesMainMenuContainer: React.FC<ContainerProps> = ({ name }) => {
|
|
const router = useIonRouter();
|
|
|
|
return (
|
|
<div
|
|
className="quizzes_main_menu_container"
|
|
style={{
|
|
display: 'column',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<div style={{ margin: '1rem 1rem' }}>
|
|
<IonButton
|
|
expand="block"
|
|
// href={LISTENING_PRACTICE_LINK}
|
|
onClick={() => {
|
|
router.push(LISTENING_PRACTICE_LINK, undefined, 'replace');
|
|
}}
|
|
fill="clear"
|
|
>
|
|
<div style={{ padding: '1rem' }}>
|
|
<div
|
|
style={{
|
|
width: '60vw',
|
|
height: '30vw',
|
|
backgroundImage: `url('/data/Lesson/images/quiz_listening_practice.jpg')`,
|
|
backgroundSize: 'cover',
|
|
borderRadius: '1rem',
|
|
}}
|
|
></div>
|
|
<div style={{ marginTop: '2rem', color: COLOR_TEXT }}>Listening Practice</div>
|
|
</div>
|
|
</IonButton>
|
|
</div>
|
|
<div style={{ margin: '1rem 1rem' }}>
|
|
<IonButton
|
|
expand="block"
|
|
// href={MATCHING_FRENZY_LINK}
|
|
onClick={() => {
|
|
router.push(MATCHING_FRENZY_LINK, undefined, 'replace');
|
|
}}
|
|
fill="clear"
|
|
>
|
|
<div style={{ padding: '1rem' }}>
|
|
<div
|
|
style={{
|
|
width: '60vw',
|
|
height: '30vw',
|
|
backgroundImage: `url('/data/Lesson/images/quiz_matching_frenzy.jpg')`,
|
|
backgroundSize: 'cover',
|
|
borderRadius: '1rem',
|
|
}}
|
|
></div>
|
|
<div style={{ marginTop: '0.5rem', color: COLOR_TEXT }}>Matching Frenzy</div>
|
|
</div>
|
|
</IonButton>
|
|
</div>
|
|
<div style={{ margin: '1rem 1rem' }}>
|
|
<IonButton
|
|
expand="block"
|
|
// href={CONNECTIVE_REVISION_LINK}
|
|
onClick={() => {
|
|
router.push(CONNECTIVE_REVISION_LINK, undefined, 'replace');
|
|
}}
|
|
fill="clear"
|
|
>
|
|
<div style={{ padding: '1rem' }}>
|
|
<div
|
|
style={{
|
|
width: '60vw',
|
|
height: '30vw',
|
|
backgroundImage: `url('/data/Lesson/images/quiz_connectives_revision.jpg')`,
|
|
backgroundSize: 'cover',
|
|
borderRadius: '1rem',
|
|
}}
|
|
></div>
|
|
<div style={{ marginTop: '0.5rem', color: COLOR_TEXT }}>Connectives Revision</div>
|
|
</div>
|
|
</IonButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuizzesMainMenuContainer;
|