feat(credits): add credits page

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={() => <SettingsPage />}
                 exact={true}
               />
+              <Route
+                path="/credits"
+                render={() => <CreditsPage />}
+                exact={true}
+              />
               <Route
                 path="/"
                 render={() => <Redirect to="/page/home" />}

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<ComponentProps> = (props) => {
+  const { name, position } = props;
+
+  return (
+    <IonItem>
+      <IonLabel>
+        <IonText>
+          {name}
+          <p>{position}</p>
+        </IonText>
+      </IonLabel>
+    </IonItem>
+  );
+};

src/components/CreditsMemberItem/index.tsx

@@ -0,0 +1 @@
+export { CreditsMemberItem } from './CreditsMemberItem';

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 (
+    <IonList>
+      <IonListHeader>
+        <IonLabel>{t('CREDITS.TEAM.MENTOR')}</IonLabel>
+      </IonListHeader>
+      {CREDITS_TEAM_MENTOR.map((team, teamIndex) => {
+        return (
+          <React.Fragment key={teamIndex}>
+            {team.members.map((member, memberIndex) => {
+              return (
+                <CreditsMemberItem
+                  key={memberIndex}
+                  name={t(member.name)}
+                  position={t(member.position)}
+                />
+              );
+            })}
+          </React.Fragment>
+        );
+      })}
+    </IonList>
+  );
+};

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 (
+    <IonList>
+      <IonListHeader>
+        <IonLabel>{t('CREDITS.TEAM.MMH')}</IonLabel>
+      </IonListHeader>
+      {CREDITS_TEAM_MMH.map((team, teamIndex) => {
+        return (
+          <React.Fragment key={teamIndex}>
+            {team.members.map((member, memberIndex) => {
+              return (
+                <CreditsMemberItem
+                  key={memberIndex}
+                  name={t(member.name)}
+                  position={t(member.position)}
+                />
+              );
+            })}
+          </React.Fragment>
+        );
+      })}
+    </IonList>
+  );
+};

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 (
+    <IonList>
+      <IonListHeader>
+        <IonLabel>{t('CREDITS.TEAM.PROJECT')}</IonLabel>
+      </IonListHeader>
+      {CREDITS_TEAM_PROJECT.map((team, teamIndex) => {
+        return (
+          <React.Fragment key={teamIndex}>
+            <IonItemDivider class="ion-padding-top">
+              <IonLabel>{t(team.title)}</IonLabel>
+            </IonItemDivider>
+            {team.members.map((member, memberIndex) => {
+              return (
+                <CreditsMemberItem
+                  key={memberIndex}
+                  name={t(member.name)}
+                  position={t(member.position)}
+                />
+              );
+            })}
+          </React.Fragment>
+        );
+      })}
+    </IonList>
+  );
+};

src/components/CreditsTeams/index.tsx

@@ -0,0 +1,3 @@
+export { CreditsTeamMentor } from './CreditsTeamMentor';
+export { CreditsTeamMmh } from './CreditsTeamMmh';
+export { CreditsTeamProject } from './CreditsTeamProject';

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,
+  },
+];

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;