😁 adds emojis and other stuff

components/Cards/BigNumberCard.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+interface PropType {
+  className: string;
+  bigNumber: number;
+  text: string;
+}
+
+const BigNumberCard: FC<PropType> = ({ className, bigNumber, text }) => {
+  return <div></div>;
+};
+
+export default BigNumberCard;

components/Cards/FavoriteEmoji.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+import { FC, useEffect, useState } from 'react';
+import Twemoji from 'react-twemoji';
+
+import styles from '../../styles/Cards/FavoriteEmojis.module.scss';
+
+interface PropType {
+  className: string;
+  emojis: string[];
+}
+
+const FavoriteEmoji: FC<PropType> = ({ className, emojis }) => {
+  const [current, setCurrent] = useState(emojis.length - 1);
+
+  useEffect(() => {
+    if (current !== 0) {
+      setTimeout(() => {
+        setCurrent((current) => current - 1);
+      }, 250 - current * 3);
+    }
+  }, [current]);
+
+  return (
+    <div className={className}>
+      <div
+        className={clsx(styles.emojiContainer, current === 0 && styles.moveUp)}
+      >
+        <Twemoji>{emojis[current]}</Twemoji>
+      </div>
+      <p className={clsx(styles.emojiText, current === 0 && styles.fadeIn)}>
+        presenting to you
+      </p>
+      <p className={clsx(styles.emojiText, current === 0 && styles.fadeIn)}>
+        your favorite/most used emoji
+      </p>
+    </div>
+  );
+};
+
+export default FavoriteEmoji;

components/Cards/HelloCard.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import Image from 'next/image';
+import { UserV2 } from 'twitter-api-v2';
+
+import styles from '../../styles/Cards/HelloCard.module.scss';
+
+interface PropType {
+  userData: UserV2;
+  className: string;
+}
+
+const HelloCard: FC<PropType> = ({ userData, className }) => {
+  return (
+    <div className={className + ' ' + styles.container}>
+      <div className={styles.profileImageWrapper}>
+        <Image
+          src={userData.profile_image_url?.replace('_normal', '') || ''}
+          layout='fill'
+          quality={100}
+          className={styles.profileImage}
+          priority
+        />
+      </div>
+      <h3>
+        hey <span>@{userData.username}</span>
+      </h3>
+    </div>
+  );
+};
+
+export default HelloCard;

components/Cards/TextCard.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+interface PropType {
+  className: string;
+  text: string;
+}
+
+const TextCard: FC<PropType> = ({ className, text }) => {
+  return (
+    <div className={className}>
+      <p>{text}</p>
+    </div>
+  );
+};
+
+export default TextCard;

components/Wrapper.tsx

@@ -1,10 +1,38 @@
+import Image from 'next/image';
 import { FC } from 'react';
+import { UserV2 } from 'twitter-api-v2';
 import styles from '../styles/Wrapper.module.scss';
+import FavoriteEmoji from './Cards/FavoriteEmoji';
+import HelloCard from './Cards/HelloCard';
+import TextCard from './Cards/TextCard';
+
+interface PropType {
+  results: any;
+}
+
+const Wrapper: FC<PropType> = ({ results }) => {
+  const { user, topEmojis } = results;
+  const userData = user.data as UserV2;
+
+  console.log(userData);
 
-const Wrapper: FC = () => {
   return (
     <div className={styles.border}>
-      <div className={styles.container}></div>
+      <div className={styles.container}>
+        <FavoriteEmoji className={styles.card} emojis={topEmojis} />
+        <HelloCard className={styles.card} userData={userData} />
+        <TextCard
+          className={styles.card}
+          text={
+            "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+          }
+        />
+        <div className={styles.card}></div>
+        <div className={styles.card}></div>
+        <div className={styles.card}></div>
+        <div className={styles.card}></div>
+        <div className={styles.card}></div>
+      </div>
     </div>
   );
 };

next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+  images: {
+    domains: ['pbs.twimg.com'],
+  },
+};

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@types/react-lottie": "^1.2.6",
+    "clsx": "^1.1.1",
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-lottie": "^1.2.3",
+    "react-twemoji": "^0.3.0",
     "sass": "^1.45.0",
     "twitter-api-v2": "^1.8.0"
   },

pages/api/letsgowrapped.ts

@@ -99,9 +99,9 @@ export default async function handler(
       .sort((a, b) => favPeopleObj[b] - favPeopleObj[a])
       .slice(0, 6);
 
-    const topEmojis = Object.keys(emojiObject)
-      .sort((a, b) => emojiObject[b] - emojiObject[a])
-      .slice(0, 30);
+    const topEmojis = Object.keys(emojiObject).sort(
+      (a, b) => emojiObject[b] - emojiObject[a]
+    );
 
     const topFollowersProfile = await twitterClient.v2.usersByUsernames(
       favObj,
@@ -113,6 +113,7 @@ export default async function handler(
     const results = {
       user,
       topEmojis,
+      emojiObject,
       overallStats,
       mostLikedTweet,
       topFollowersProfile,