show 10 cards at a time

apps/www/components/Sections/TwitterSocialProof.tsx

@@ -9,7 +9,27 @@ function TwitterSocialProof() {
   // base path for images
   const { basePath } = useRouter()
 
-  const [showAll, setShowAll] = useState(false)
+  const [tweets, setTweets] = useState(Tweets.slice(0, 10))
+  const [showButton, setShowButton] = useState(true)
+
+  const handleShowMore = () => {
+    setTweets((prevTweets) => [
+      ...prevTweets,
+      ...Tweets.slice(prevTweets.length, prevTweets.length + 10),
+    ])
+
+    if (tweets.length >= Tweets.length) {
+      setShowButton(false)
+    }
+
+    const container = document.querySelector('.tweet-container')
+    // @ts-ignore
+    container.style.height = `${container.clientHeight + 400}px`
+
+    const button = document.querySelector('.show-button')
+    // @ts-ignore
+    button.style.marginBottom = `${parseInt(button.style.marginBottom) + 20}px`
+  }
 
   return (
     <>
@@ -38,9 +58,13 @@ function TwitterSocialProof() {
         </div>
       </div>
       <div className="lg:-mx-10 xl:-mx-18 mt-6">
-        <div className={`columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4 overflow-hidden relative h-[${!showAll ? 800 : 2500}px]`}>
-          {!showAll && (
-            <div className={`absolute bottom-0 left-0 z-10 w-full h-[50%] bg-gradient-to-t from-[#1c1c1c] via-[#1c1c1c]`} />
+        <div
+          className={`tweet-container columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4 overflow-hidden relative h-[1000px]`}
+        >
+          {showButton && (
+            <div
+              className={`absolute bottom-0 left-0 z-10 w-full h-[25%] bg-gradient-to-t from-[#1c1c1c] via-[#1c1c1c]`}
+            />
           )}
           {Tweets.map((tweet: any, i: number) => (
             <div className="mb-4 z-0 break-inside-avoid-column" key={i}>
@@ -55,10 +79,13 @@ function TwitterSocialProof() {
               </Link>
             </div>
           ))}
-          {!showAll && (
-            <div className="absolute bottom-[10%] left-1/2 transform -translate-x-1/2 z-20">
-              <Button type="default" size="small" onClick={() => setShowAll(true)}>
-                Show All
+          {showButton && (
+            <div
+              className="show-button absolute bottom-[2.5%] left-1/2 transform -translate-x-1/2 z-20"
+              style={{ marginBottom: '20px' }}
+            >
+              <Button type="default" size="small" onClick={() => handleShowMore()}>
+                Show More
               </Button>
             </div>
           )}

apps/www/components/TweetCard.tsx

@@ -31,9 +31,7 @@ function TweetCard(props: TweetCard) {
           ) : (
             <div className="w-6" />
           )}
-          <p className='text-scale-1200 text-sm font-medium'>
-            {props.handle}
-          </p>
+          <p className="text-scale-1200 text-sm font-medium">{props.handle}</p>
           <div
             className="absolute -left-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full"
             style={{ background: '#00acee' }}