feat: 🎸 add ios, android in contact us

README.md

@@ -52,7 +52,7 @@ $ yarn run format
 $ yarn run deploy-firebase
 ```
 
-open localhost:5000
+open localhost:5100
 
 ## Docker
 

package.json

@@ -74,7 +74,7 @@
     "typescript": "^4.1.2"
   },
   "scripts": {
-    "dev": "PORT=5000 react-scripts start",
+    "dev": "PORT=5100 react-scripts start",
     "production": "yarn run build && yarn run start",
     "start": "serve -s build",
     "build": "react-scripts build",

src/components/contact/Contact.tsx

@@ -4,6 +4,8 @@ import Paper from '@material-ui/core/Paper';
 import Tooltip from '@material-ui/core/Tooltip';
 import EmailIcon from '@material-ui/icons/Email';
 import GitHubIcon from '@material-ui/icons/GitHub';
+import AppleIcon from '@material-ui/icons/Apple';
+import AndroidIcon from '@material-ui/icons/Android';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormControl from '@material-ui/core/FormControl';
 import Radio from '@material-ui/core/Radio';
@@ -39,6 +41,14 @@ function Contact(): JSX.Element {
     window.open('https://github.com/yeukfei02');
   };
 
+  const handleAppleIconClick = () => {
+    window.open('https://apps.apple.com/us/app/lunchpickerlite/id1509385881');
+  };
+
+  const handleAndroidIconClick = () => {
+    window.open('https://play.google.com/store/apps/details?id=com.donaldwu.lunchpickerlite');
+  };
+
   const handleDonate = () => {
     window.open('https://donorbox.org/donate-for-lunch-picker-better-features-and-development');
   };
@@ -97,6 +107,17 @@ function Contact(): JSX.Element {
           </Tooltip>
         </Paper>
       </div>
+      <div className="mt-5 d-flex justify-content-center">
+        <Paper className={`${classes.root} mx-4 w-75 text-center`}>
+          <h5>{t('lunchPickerApp')}</h5>
+          <Tooltip title="ios" placement="bottom">
+            <AppleIcon style={{ cursor: 'pointer' }} className="mr-3" fontSize="large" onClick={handleAppleIconClick} />
+          </Tooltip>
+          <Tooltip title="android" placement="bottom">
+            <AndroidIcon style={{ cursor: 'pointer' }} fontSize="large" onClick={handleAndroidIconClick} />
+          </Tooltip>
+        </Paper>
+      </div>
       <div className="my-5 d-flex justify-content-center">
         <Paper className={`${classes.root} mx-4 w-75`}>
           <h5 className="text-center">{t('donateTitle')}</h5>

src/translations/common.json

@@ -38,6 +38,7 @@
       "chinese": "Chinese",
 
       "contactTitle": "Contact us via email or visit our github repo",
+      "lunchPickerApp": "Lunch Picker App",
       "donateTitle": "Donate for lunch picker better features and development",
       "donate": "Donate",
       "buyMeACoffee": "Buy me a coffee",
@@ -90,6 +91,7 @@
       "chinese": "中文",
 
       "contactTitle": "通過電子郵件聯繫我們或訪問我們的github",
+      "lunchPickerApp": "Lunch Picker 應用程序",
       "donateTitle": "為lunch picker捐贈 將來有更好的功能和發展",
       "donate": "捐贈",
       "buyMeACoffee": "給我買杯咖啡",