louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit,

Browse Source
This commit is contained in:
louiscklaw
2025-04-26 10:08:01 +08:00
parent 7d70b5826b
commit d0ea7e5452
473 changed files with 29989 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
002_source/ionic_mobile/src/components/QuizzesMainMenuContainer.tsx Normal file
View File

@@ -0,0 +1,95 @@
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;