Oiva report and link icons

package-lock.json

@@ -15,6 +15,7 @@
         "next-seo": "^5.14.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-icons": "^4.6.0",
         "sass": "^1.55.0",
         "typescript": "4.8.4"
       }
@@ -579,6 +580,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1003,6 +1012,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "requires": {}
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "next-seo": "^5.14.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.6.0",
     "sass": "^1.55.0",
     "typescript": "4.8.4"
   }

pages/index.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { OpenHours } from '../components/OpenHours';
 import { ScrollToTop } from '../components/ScrollToTop';
 import { NextSeo } from 'next-seo';
+import { FiExternalLink } from 'react-icons/fi';
 
 export default function Index() {
   return (
@@ -82,7 +83,7 @@ export default function Index() {
               Velkuantie 988, 21180 Livonsaari
             </span>
             <a href='https://www.smartpost.fi/' className={styles.link}>
-              Lisätietoja
+              Lisätietoja <FiExternalLink />
             </a>
           </section>
 
@@ -107,6 +108,9 @@ export default function Index() {
                 <h1 className={styles.title}>Juomat</h1>
               </a>
             </div>
+            <a href='/oiva.pdf' className={styles.link + ' ' + styles.oivaLink}>
+              Oiva-raportti <FiExternalLink />
+            </a>
           </section>
 
           <span className={styles.separator} />

styles/Index.module.scss

@@ -92,9 +92,10 @@
 }
 
 .link {
-  color: #0274be;
+  color: #427da4;
   text-decoration: none;
   font-weight: bold;
+  margin-top: 1rem;
 }
 
 .link:hover {
@@ -128,6 +129,10 @@
   }
 }
 
+.oivaLink {
+  margin-top: 2rem;
+}
+
 .instagramLink {
   color: #686868;
   text-decoration: none;