From 2d0d342253bb92d2fc3955d3c59c5a19ae9dc1b7 Mon Sep 17 00:00:00 2001 From: Simon G Date: Sun, 17 Jan 2021 16:49:51 +0100 Subject: [PATCH] feat(credits): add credits page --- src/App.tsx | 6 + .../CreditsMemberItem/CreditsMemberItem.tsx | 22 +++ src/components/CreditsMemberItem/index.tsx | 1 + .../CreditsTeams/CreditsTeamMentor.tsx | 32 +++ .../CreditsTeams/CreditsTeamMmh.tsx | 32 +++ .../CreditsTeams/CreditsTeamProject.tsx | 35 ++++ src/components/CreditsTeams/index.tsx | 3 + src/data/credits/credits.tsx | 187 ++++++++++++++++++ src/index.css | 12 ++ src/pages/CreditsPage/CreditsPage.tsx | 53 +++++ src/pages/CreditsPage/index.tsx | 1 + 11 files changed, 384 insertions(+) create mode 100644 src/components/CreditsMemberItem/CreditsMemberItem.tsx create mode 100644 src/components/CreditsMemberItem/index.tsx create mode 100644 src/components/CreditsTeams/CreditsTeamMentor.tsx create mode 100644 src/components/CreditsTeams/CreditsTeamMmh.tsx create mode 100644 src/components/CreditsTeams/CreditsTeamProject.tsx create mode 100644 src/components/CreditsTeams/index.tsx create mode 100644 src/data/credits/credits.tsx create mode 100644 src/pages/CreditsPage/CreditsPage.tsx create mode 100644 src/pages/CreditsPage/index.tsx diff --git a/src/App.tsx b/src/App.tsx index d2b397a..5245322 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,6 +30,7 @@ import { SearchPage } from './pages/Search'; import { SettingsPage } from './pages/Settings'; // import Tutorial from './pages/Tutorial'; import { THEMES } from './utils/theme'; +import { CreditsPage } from './pages/CreditsPage'; const App: React.FC = () => { const currentTheme = useSelector(selectCurrentTheme); @@ -64,6 +65,11 @@ const App: React.FC = () => { render={() => } exact={true} /> + } + exact={true} + /> } diff --git a/src/components/CreditsMemberItem/CreditsMemberItem.tsx b/src/components/CreditsMemberItem/CreditsMemberItem.tsx new file mode 100644 index 0000000..9433fbb --- /dev/null +++ b/src/components/CreditsMemberItem/CreditsMemberItem.tsx @@ -0,0 +1,22 @@ +import { IonItem, IonLabel, IonText } from '@ionic/react'; +import React from 'react'; + +type ComponentProps = { + name: string; + position: string; +}; + +export const CreditsMemberItem: React.FC = (props) => { + const { name, position } = props; + + return ( + + + + {name} +

{position}

+ + + + ); +}; diff --git a/src/components/CreditsMemberItem/index.tsx b/src/components/CreditsMemberItem/index.tsx new file mode 100644 index 0000000..f83bafe --- /dev/null +++ b/src/components/CreditsMemberItem/index.tsx @@ -0,0 +1 @@ +export { CreditsMemberItem } from './CreditsMemberItem'; diff --git a/src/components/CreditsTeams/CreditsTeamMentor.tsx b/src/components/CreditsTeams/CreditsTeamMentor.tsx new file mode 100644 index 0000000..c74806a --- /dev/null +++ b/src/components/CreditsTeams/CreditsTeamMentor.tsx @@ -0,0 +1,32 @@ +import { IonLabel, IonList, IonListHeader } from '@ionic/react'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { CREDITS_TEAM_MENTOR } from '../../data/credits/credits'; +import { CreditsMemberItem } from '../CreditsMemberItem'; + +export const CreditsTeamMentor: React.FC = () => { + const { t } = useTranslation(); + + return ( + + + {t('CREDITS.TEAM.MENTOR')} + + {CREDITS_TEAM_MENTOR.map((team, teamIndex) => { + return ( + + {team.members.map((member, memberIndex) => { + return ( + + ); + })} + + ); + })} + + ); +}; diff --git a/src/components/CreditsTeams/CreditsTeamMmh.tsx b/src/components/CreditsTeams/CreditsTeamMmh.tsx new file mode 100644 index 0000000..e86459c --- /dev/null +++ b/src/components/CreditsTeams/CreditsTeamMmh.tsx @@ -0,0 +1,32 @@ +import { IonLabel, IonList, IonListHeader } from '@ionic/react'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { CREDITS_TEAM_MMH } from '../../data/credits/credits'; +import { CreditsMemberItem } from '../CreditsMemberItem'; + +export const CreditsTeamMmh: React.FC = () => { + const { t } = useTranslation(); + + return ( + + + {t('CREDITS.TEAM.MMH')} + + {CREDITS_TEAM_MMH.map((team, teamIndex) => { + return ( + + {team.members.map((member, memberIndex) => { + return ( + + ); + })} + + ); + })} + + ); +}; diff --git a/src/components/CreditsTeams/CreditsTeamProject.tsx b/src/components/CreditsTeams/CreditsTeamProject.tsx new file mode 100644 index 0000000..0a3366a --- /dev/null +++ b/src/components/CreditsTeams/CreditsTeamProject.tsx @@ -0,0 +1,35 @@ +import { IonItemDivider, IonLabel, IonList, IonListHeader } from '@ionic/react'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { CREDITS_TEAM_PROJECT } from '../../data/credits/credits'; +import { CreditsMemberItem } from '../CreditsMemberItem'; + +export const CreditsTeamProject: React.FC = () => { + const { t } = useTranslation(); + + return ( + + + {t('CREDITS.TEAM.PROJECT')} + + {CREDITS_TEAM_PROJECT.map((team, teamIndex) => { + return ( + + + {t(team.title)} + + {team.members.map((member, memberIndex) => { + return ( + + ); + })} + + ); + })} + + ); +}; diff --git a/src/components/CreditsTeams/index.tsx b/src/components/CreditsTeams/index.tsx new file mode 100644 index 0000000..46d58a3 --- /dev/null +++ b/src/components/CreditsTeams/index.tsx @@ -0,0 +1,3 @@ +export { CreditsTeamMentor } from './CreditsTeamMentor'; +export { CreditsTeamMmh } from './CreditsTeamMmh'; +export { CreditsTeamProject } from './CreditsTeamProject'; diff --git a/src/data/credits/credits.tsx b/src/data/credits/credits.tsx new file mode 100644 index 0000000..14c1d58 --- /dev/null +++ b/src/data/credits/credits.tsx @@ -0,0 +1,187 @@ +export const CREDITS_CULTURE_MEMBERS = [ + { + name: 'CREDITS.GROUP.CULTURE.MEMBER.01.NAME', + position: 'CREDITS.GROUP.CULTURE.MEMBER.01.POSITION', + }, + { + name: 'CREDITS.GROUP.CULTURE.MEMBER.02.NAME', + position: 'CREDITS.GROUP.CULTURE.MEMBER.02.POSITION', + }, + { + name: 'CREDITS.GROUP.CULTURE.MEMBER.03.NAME', + position: 'CREDITS.GROUP.CULTURE.MEMBER.03.POSITION', + }, +]; + +export const CREDITS_DRAWING_MEMBERS = [ + { + name: 'CREDITS.GROUP.DRAWING.MEMBER.01.NAME', + position: 'CREDITS.GROUP.DRAWING.MEMBER.01.POSITION', + }, +]; + +export const CREDITS_IT_MEMBERS = [ + { + name: 'CREDITS.GROUP.IT.MEMBER.01.NAME', + position: 'CREDITS.GROUP.IT.MEMBER.01.POSITION', + }, + { + name: 'CREDITS.GROUP.IT.MEMBER.02.NAME', + position: 'CREDITS.GROUP.IT.MEMBER.02.POSITION', + }, +]; + +export const CREDITS_MENTOR_MEMBERS = [ + { + name: 'CREDITS.GROUP.MENTOR.MEMBER.01.NAME', + position: 'CREDITS.GROUP.MENTOR.MEMBER.01.POSITION', + }, +]; + +export const CREDITS_MMH_MEMBERS = [ + { + name: 'CREDITS.GROUP.MMH.MEMBER.01.NAME', + position: 'CREDITS.GROUP.MMH.MEMBER.01.POSITION', + }, + { + name: 'CREDITS.GROUP.MMH.MEMBER.02.NAME', + position: 'CREDITS.GROUP.MMH.MEMBER.02.POSITION', + }, + { + name: 'CREDITS.GROUP.MMH.MEMBER.03.NAME', + position: 'CREDITS.GROUP.MMH.MEMBER.03.POSITION', + }, + { + name: 'CREDITS.GROUP.MMH.MEMBER.04.NAME', + position: 'CREDITS.GROUP.MMH.MEMBER.04.POSITION', + }, +]; + +export const CREDITS_SUPPORT_MEMBERS = [ + { + name: 'CREDITS.GROUP.SUPPORT.MEMBER.01.NAME', + position: 'CREDITS.GROUP.SUPPORT.MEMBER.01.POSITION', + }, + { + name: 'CREDITS.GROUP.SUPPORT.MEMBER.02.NAME', + position: 'CREDITS.GROUP.SUPPORT.MEMBER.02.POSITION', + }, + { + name: 'CREDITS.GROUP.SUPPORT.MEMBER.03.NAME', + position: 'CREDITS.GROUP.SUPPORT.MEMBER.03.POSITION', + }, + { + name: 'CREDITS.GROUP.SUPPORT.MEMBER.04.NAME', + position: 'CREDITS.GROUP.SUPPORT.MEMBER.04.POSITION', + }, + { + name: 'CREDITS.GROUP.SUPPORT.MEMBER.05.NAME', + position: 'CREDITS.GROUP.SUPPORT.MEMBER.05.POSITION', + }, + { + name: 'CREDITS.GROUP.SUPPORT.MEMBER.06.NAME', + position: 'CREDITS.GROUP.SUPPORT.MEMBER.06.POSITION', + }, + { + name: 'CREDITS.GROUP.SUPPORT.MEMBER.07.NAME', + position: 'CREDITS.GROUP.SUPPORT.MEMBER.07.POSITION', + }, +]; + +export const CREDITS_TRANSLATOR_MEMBERS = [ + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.01.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.01.POSITION', + }, + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.02.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.02.POSITION', + }, + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.03.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.03.POSITION', + }, + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.04.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.04.POSITION', + }, + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.05.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.05.POSITION', + }, + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.06.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.06.POSITION', + }, + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.07.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.07.POSITION', + }, + { + name: 'CREDITS.GROUP.TRANSLATOR.MEMBER.08.NAME', + position: 'CREDITS.GROUP.TRANSLATOR.MEMBER.08.POSITION', + }, +]; + +export const CREDITS_VETERINARIAN_MEMBERS = [ + { + name: 'CREDITS.GROUP.VETERINARIAN.MEMBER.01.NAME', + position: 'CREDITS.GROUP.VETERINARIAN.MEMBER.01.POSITION', + }, + { + name: 'CREDITS.GROUP.VETERINARIAN.MEMBER.02.NAME', + position: 'CREDITS.GROUP.VETERINARIAN.MEMBER.02.POSITION', + }, + { + name: 'CREDITS.GROUP.VETERINARIAN.MEMBER.03.NAME', + position: 'CREDITS.GROUP.VETERINARIAN.MEMBER.03.POSITION', + }, + { + name: 'CREDITS.GROUP.VETERINARIAN.MEMBER.04.NAME', + position: 'CREDITS.GROUP.VETERINARIAN.MEMBER.04.POSITION', + }, + { + name: 'CREDITS.GROUP.VETERINARIAN.MEMBER.05.NAME', + position: 'CREDITS.GROUP.VETERINARIAN.MEMBER.05.POSITION', + }, + { + name: 'CREDITS.GROUP.VETERINARIAN.MEMBER.06.NAME', + position: 'CREDITS.GROUP.VETERINARIAN.MEMBER.06.POSITION', + }, +]; + +export const CREDITS_TEAM_PROJECT = [ + { + title: 'CREDITS.GROUP.VETERINARIAN.TITLE', + members: CREDITS_VETERINARIAN_MEMBERS, + }, + { + title: 'CREDITS.GROUP.TRANSLATOR.TITLE', + members: CREDITS_TRANSLATOR_MEMBERS, + }, + { + title: 'CREDITS.GROUP.IT.TITLE', + members: CREDITS_IT_MEMBERS, + }, + { + title: 'CREDITS.GROUP.SUPPORT.TITLE', + members: CREDITS_SUPPORT_MEMBERS, + }, + { + title: 'CREDITS.GROUP.DRAWING.TITLE', + members: CREDITS_DRAWING_MEMBERS, + }, +]; + +export const CREDITS_TEAM_MENTOR = [ + { + title: 'CREDITS.GROUP.MENTOR.TITLE', + members: CREDITS_MENTOR_MEMBERS, + }, +]; +export const CREDITS_TEAM_MMH = [ + { + title: 'CREDITS.GROUP.MMH.TITLE', + members: CREDITS_MMH_MEMBERS, + }, +]; diff --git a/src/index.css b/src/index.css index 9f1cace..521606b 100644 --- a/src/index.css +++ b/src/index.css @@ -26,6 +26,18 @@ https://allexperts16.blogspot.com/2018/06/allow-users-to-select-and-copy-text-in width: 100%; } +.drop-shadow { + filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.1)); +} + +.width-15rem { + max-width: 15rem; +} + +.margin-auto { + margin: auto; +} + .image-text { display: block; font-size: small; diff --git a/src/pages/CreditsPage/CreditsPage.tsx b/src/pages/CreditsPage/CreditsPage.tsx new file mode 100644 index 0000000..683b33f --- /dev/null +++ b/src/pages/CreditsPage/CreditsPage.tsx @@ -0,0 +1,53 @@ +import { + IonButtons, + IonContent, + IonHeader, + IonImg, + IonItem, + IonMenuButton, + IonPage, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { + CreditsTeamMentor, + CreditsTeamMmh, + CreditsTeamProject, +} from '../../components/CreditsTeams'; + +export const CreditsPage: React.FC = () => { + const { t } = useTranslation(); + + return ( + + + + + + + {t('CREDITS.TITLE')} + + + + + + + {t('CREDITS.TITLE')} + + + + + + + + + + + ); +}; diff --git a/src/pages/CreditsPage/index.tsx b/src/pages/CreditsPage/index.tsx new file mode 100644 index 0000000..72733d0 --- /dev/null +++ b/src/pages/CreditsPage/index.tsx @@ -0,0 +1 @@ +export { CreditsPage } from './CreditsPage';