Files
lettersoup-online/002_source/ionic_mobile/src/components/SettingContainer/index.tsx
2025-04-26 10:08:01 +08:00

51 lines
1.2 KiB
TypeScript

import { IonButton, IonIcon, useIonRouter } from '@ionic/react';
import { arrowBack } from 'ionicons/icons';
import { LESSON_LINK, VERSIONS } from '../../constants';
import SettingSvg from './image.svg';
interface ContainerProps {
name: string;
}
const SettingContainer: React.FC<ContainerProps> = ({ name }) => {
const router = useIonRouter();
return (
<div
style={{
width: '100%',
height: '85%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div
style={{
backgroundImage: `url(${SettingSvg})`,
height: '33vh',
width: '33vh',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
}}
></div>
<div>
<p>T.B.A.</p>
</div>
<div>{VERSIONS}</div>
<IonButton
onClick={() => {
router.push(LESSON_LINK, undefined, 'replace');
}}
style={{ marginTop: '1rem' }}
>
<IonIcon slot="start" icon={arrowBack}></IonIcon>
Back
</IonButton>
</div>
);
};
export default SettingContainer;