About page

package.json

@@ -54,6 +54,7 @@
     "sharp": "^0.29.3",
     "simple-xml-to-json": "^1.0.8",
     "ts-node": "^10.4.0",
+    "use-count-up": "^3.0.1",
     "validator": "^13.7.0",
     "web3": "^1.6.1",
     "web3.storage": "3.5.2",

src/pages/about.tsx

@@ -1,11 +1,35 @@
 import { H1, H2 } from '@components/Text/headings';
 import Link from '@components/Text/link';
 import { db } from '@utils/prisma';
-import React from 'react';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import { CountUp } from 'use-count-up';
 
 import { Layout } from '../components/Layout';
 
-const About = (props: { clipCount: number; version: string }): JSX.Element => {
+const About = (props: {
+  clipCount: number;
+  userCount: number;
+  version: string;
+}): JSX.Element => {
+  const [contributorsCount, setContributorsCount] = useState(0);
+
+  useEffect(() => {
+    fetch('https://api.github.com/repos/interclip/interclip-next/contributors')
+      .then((res) => res.json())
+      .then((res) => {
+        setContributorsCount(
+          res.filter(
+            (user: { login: string; id: number }) =>
+              !user.login.includes('bot'),
+          ).length,
+        );
+      })
+      .catch(() => {
+        console.error('There was an error when fetching from github api');
+      });
+  }, []);
+
   return (
     <Layout titlePrefix="About">
       <section className="flex flex-col items-center w-full">
@@ -36,6 +60,11 @@ const About = (props: { clipCount: number; version: string }): JSX.Element => {
             we use to make it easier upon ourselves.
           </p>
           <H2>Facts about Interclip</H2>
+          <p className="flex justify-around w-full py-2 mb-2 border-gray-300 border-y dark:border-gray-700">
+            <Fact title="Total clips made" value={props.clipCount} />
+            <Fact title="Users" value={props.userCount} />
+            <Fact title="Contributors" value={contributorsCount} />
+          </p>
           <ul className="facts">
             <li>
               Release: {props.version}{' '}
@@ -45,20 +74,59 @@ const About = (props: { clipCount: number; version: string }): JSX.Element => {
                 (changelog)
               </Link>
             </li>
-            <li>Total clips made: {props.clipCount}</li>
           </ul>
+          <H2>Mobile app</H2>
+          <div>
+            <Link href="https://apps.apple.com/cz/app/interclip/id1546777494">
+              <Image
+                alt="Apple app store"
+                src="/images/appstore.png"
+                width={184}
+                height={64}
+                objectPosition="left"
+              />
+            </Link>
+          </div>
+          <div>
+            <Link href="https://play.google.com/store/apps/details?id=com.filiptronicek.iclip">
+              <Image
+                alt="Google play"
+                src="/images/googleplay.webp"
+                width={217}
+                height={64}
+                objectPosition="left"
+              />
+            </Link>
+          </div>
         </div>
       </section>
     </Layout>
   );
 };
 
+type FactProps = {
+  title: string;
+  value: number;
+};
+
+const Fact: React.FC<FactProps> = ({ title, value }) => {
+  return (
+    <div className="text-center">
+      <div className="font-sans text-3xl font-semibold">
+        <CountUp isCounting end={value} duration={1.4} />
+      </div>
+      <span>{title}</span>
+    </div>
+  );
+};
+
 export async function getServerSideProps() {
   try {
     const clipCount = await db.clip.count();
+    const userCount = await db.user.count();
     const packageJSON = require('../../package.json');
     const { version } = packageJSON;
-    return { props: { clipCount, version } };
+    return { props: { clipCount, userCount, version } };
   } catch (e) {
     console.error(e);
     return {

yarn.lock

@@ -9797,6 +9797,17 @@ [email protected]:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-count-up@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/use-count-up/-/use-count-up-3.0.1.tgz#315edf4e4be91ead94e6dd34444349d9b8c2c6c3"
+  integrity sha512-jlVsXJYje6jh+xwQaCEYrwHoB+nRyillNEmr21bhe9kw7tpRzyrSq9jQs9UOlo+8hCFkuOmjUihL3IjEK/piVg==
+  dependencies:
+    use-elapsed-time "3.0.2"
+
+[email protected]:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/use-elapsed-time/-/use-elapsed-time-3.0.2.tgz#ef22bf520e60f9873fd102925a2d5cbc5d4faaf5"
+  integrity sha512-2EY9lJ5DWbAvT8wWiEp6Ztnl46DjXz2j78uhWbXaz/bg3OfpbgVucCAlcN8Bih6hTJfFTdVYX9L6ySMn5py/wQ==
 ursa-optional@^0.10.1:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/ursa-optional/-/ursa-optional-0.10.2.tgz#bd74e7d60289c22ac2a69a3c8dea5eb2817f9681"