-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
396 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,261 @@ | ||
| import { FC, useMemo, useRef } from "react"; | ||
| import { UserV2 } from "twitter-api-v2"; | ||
| import styles from "../styles/Wrapper.module.scss"; | ||
| import BigNumberCard from "./Cards/BigNumberCard"; | ||
| import FavoritePeople from "./Cards/FavoritePeople"; | ||
| import TextCard from "./Cards/TextCard"; | ||
| import Twemoji from "./Twemoji"; | ||
|
|
||
| const ParaTextWithEmoji = ({ | ||
| text, | ||
| emoji, | ||
| }: { | ||
| text: string; | ||
| emoji: string; | ||
| }) => { | ||
| return ( | ||
| <p key={0}> | ||
| {text} | ||
| <span | ||
| style={{ | ||
| verticalAlign: "middle", | ||
| display: "inline-flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| marginLeft: "4px", | ||
| }} | ||
| > | ||
| <Twemoji emoji={emoji} width={20} height={20} /> | ||
| </span> | ||
| </p> | ||
| ); | ||
| }; | ||
|
|
||
| const favPeople: UserV2[] = [ | ||
| { | ||
| id: "nitro", | ||
| name: "Nirupama Singh", | ||
| username: "nitropumaa", | ||
| }, | ||
| { | ||
| id: "adi", | ||
| name: "Aditya Oberai", | ||
| username: "adityaoberai1", | ||
| }, | ||
| { | ||
| id: "raghav", | ||
| name: "Raghav Agarwal", | ||
| username: "raghav1687", | ||
| }, | ||
| { | ||
| id: "ranjit", | ||
| name: "Ranjit", | ||
| username: "ranjitzade", | ||
| }, | ||
| { | ||
| id: "harsh", | ||
| name: "Harsh Suryan", | ||
| username: "hksuryan", | ||
| }, | ||
| { | ||
| id: "mitra", | ||
| name: "Haimantika Mitra", | ||
| username: "HaimantikaM", | ||
| }, | ||
| { | ||
| id: "Shlokzz", | ||
| name: "Shloka", | ||
| username: "shlokasspam", | ||
| }, | ||
| ]; | ||
|
|
||
| const favPeople2: UserV2[] = [ | ||
| { | ||
| id: "darshan", | ||
| name: "Darshan", | ||
| username: "SirusTweets", | ||
| }, | ||
| { | ||
| id: "Shrankhla", | ||
| name: "Shrankhla Srivastava", | ||
| username: "shrankhla3", | ||
| }, | ||
| { | ||
| id: "sree", | ||
| name: "Sreekaran", | ||
| username: "skxrxn", | ||
| }, | ||
| { | ||
| id: "otc", | ||
| name: "Our Tech Community", | ||
| username: "OurTechComm", | ||
| }, | ||
| ]; | ||
|
|
||
| const TwitterWrappedWrapped: FC = () => { | ||
| // TODO: remove swipe gesture, make it tap gesture instead | ||
| // TODO: add instagram story sort of indicator | ||
|
|
||
| const array = useMemo( | ||
| () => [ | ||
| <TextCard | ||
| key={1} | ||
| className={styles.card} | ||
| text={[ | ||
| <ParaTextWithEmoji | ||
| key={1} | ||
| text="Last couple of days were fun and nerve wracking at the same time. It was one hell of a ride for me & twitter wrapped." | ||
| emoji="🫣" | ||
| />, | ||
| ]} | ||
| />, | ||
| <TextCard | ||
| key={2} | ||
| className={styles.card} | ||
| text={[ | ||
| <ParaTextWithEmoji | ||
| key={1} | ||
| text="And with this this ride comes to an end so, how about one last wrapped?" | ||
| emoji="😍" | ||
| />, | ||
| ]} | ||
| />, | ||
| <BigNumberCard | ||
| key={3} | ||
| className={styles.card} | ||
| data={[ | ||
| { | ||
| bigNumber: "20K", | ||
| text: ( | ||
| <ParaTextWithEmoji | ||
| text={`the number of times twitter wrapped was opened in first 24 hours.`} | ||
| emoji="🤩" | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| />, | ||
| <BigNumberCard | ||
| key={4} | ||
| className={styles.card} | ||
| data={[ | ||
| { | ||
| bigNumber: "100K", | ||
| text: ( | ||
| <ParaTextWithEmoji | ||
| text={`the number of hits we completed in first 48 hours of the project.`} | ||
| emoji="😍" | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| />, | ||
| <BigNumberCard | ||
| key={5} | ||
| className={styles.card} | ||
| data={[ | ||
| { | ||
| bigNumber: "227K", | ||
| text: ( | ||
| <ParaTextWithEmoji | ||
| text={`the number of hits we completed in first 60 hours of the project. STONKS`} | ||
| emoji="💯" | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| />, | ||
| <BigNumberCard | ||
| key={6} | ||
| className={styles.card} | ||
| data={[ | ||
| { | ||
| bigNumber: ">150K", | ||
| text: ( | ||
| <ParaTextWithEmoji | ||
| text={`that's how many times the wrapped api successfully delivered the twitter wrapped.`} | ||
| emoji="🥵" | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| />, | ||
| <BigNumberCard | ||
| key={7} | ||
| className={styles.card} | ||
| data={[ | ||
| { | ||
| bigNumber: "23K", | ||
| text: ( | ||
| <ParaTextWithEmoji | ||
| text={`the number of times the wrapped API errored out in last 60 hours`} | ||
| emoji="💀" | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| />, | ||
| <BigNumberCard | ||
| key={8} | ||
| className={styles.card} | ||
| data={[ | ||
| { | ||
| bigNumber: ">10,000,000", | ||
| text: ( | ||
| <ParaTextWithEmoji | ||
| text={`that's the number of tweets that were fetched during the 60 hour run of twitter wrapped.`} | ||
| emoji="🤯" | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| />, | ||
| <TextCard | ||
| key={99} | ||
| className={styles.card} | ||
| text={[ | ||
| <ParaTextWithEmoji | ||
| key={0} | ||
| text="but you all know how some people are always way more special than others right?" | ||
| emoji="🥰" | ||
| />, | ||
| ]} | ||
| />, | ||
| <FavoritePeople key={4} className={styles.card} favPeople={favPeople} />, | ||
| <FavoritePeople key={4} className={styles.card} favPeople={favPeople2} />, | ||
| <TextCard | ||
| key={108} | ||
| className={styles.card} | ||
| text={[ | ||
| "Thank you all for your love & support <3", | ||
| <ParaTextWithEmoji | ||
| key={0} | ||
| text="And well that's all for this time around, see you next year? " | ||
| emoji="🫣" | ||
| />, | ||
| ]} | ||
| />, | ||
| ], | ||
| [] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={styles.border}> | ||
| <div className={styles.container}>{array}</div> | ||
| </div> | ||
| <div className={styles.keepSwiping}> | ||
| <h3>keep swiping to continue...</h3> | ||
| </div> | ||
| <div | ||
| className="sign" | ||
| style={{ marginTop: "2rem", marginBottom: "0.75rem" }} | ||
| > | ||
| crafted with ❤️ by{" "} | ||
| <a href="https://twitter.com/0xSaurabh">@0xSaurabh</a> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default TwitterWrappedWrapped; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
b69278bThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
twitter-wrapped – ./
twitter-wrapped-sksuryan.vercel.app
twitter-wrapped-git-main-sksuryan.vercel.app
twitter-wrapped-mu.vercel.app