fix: align 'Show more' button in Projects page-#1329

frontend/src/components/ShowMoreButton.tsx

@@ -0,0 +1,36 @@
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Button } from '@heroui/button'
+import { useState } from 'react'
+
+const ShowMoreButton = ({ onToggle }: { onToggle: () => void }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded)
+    onToggle()
+  }
+
+  return (
+    <div className="mt-4 flex justify-start">
+      <Button
+        type="button"
+        disableAnimation
+        onPress={handleToggle}
+        className="flex items-center bg-transparent px-0 text-blue-400"
+      >
+        {isExpanded ? (
+          <>
+            Show less <FontAwesomeIcon icon={faChevronUp} className="ml-2 text-sm" />
+          </>
+        ) : (
+          <>
+            Show more <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-sm" />
+          </>
+        )}
+      </Button>
+    </div>
+  )
+}
+
+export default ShowMoreButton

frontend/src/components/ToggleableList.tsx

@@ -1,9 +1,9 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Button } from '@heroui/button'
 import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
+import type React from 'react'
+import { useState } from 'react'
+import ShowMoreButton from 'components/ShowMoreButton'
 
 const ToggleableList = ({
   items,
@@ -44,23 +44,7 @@ const ToggleableList = ({
           </button>
         ))}
       </div>
-      {items.length > limit && (
-        <Button
-          disableAnimation
-          onPress={toggleShowAll}
-          className="mt-4 flex items-center bg-transparent text-blue-400 hover:underline"
-        >
-          {showAll ? (
-            <>
-              Show less <FontAwesomeIcon icon={faChevronUp} className="ml-1" />
-            </>
-          ) : (
-            <>
-              Show more <FontAwesomeIcon icon={faChevronDown} className="ml-1" />
-            </>
-          )}
-        </Button>
-      )}
+      {items.length > limit && <ShowMoreButton onToggle={toggleShowAll} />}
     </div>
   )
 }

frontend/src/components/TopContributorsList.tsx

@@ -1,7 +1,4 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Button } from '@heroui/button'
+import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useState } from 'react'
@@ -10,6 +7,7 @@ import { capitalize } from 'utils/capitalize'
 import { getMemberUrl } from 'utils/urlFormatter'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
+import ShowMoreButton from 'components/ShowMoreButton'
 
 const TopContributorsList = ({
   contributors,
@@ -66,23 +64,7 @@ const TopContributorsList = ({
           </div>
         ))}
       </div>
-      {contributors.length > maxInitialDisplay && (
-        <Button
-          disableAnimation
-          onPress={toggleContributors}
-          className="mt-4 flex items-center bg-transparent text-blue-400 hover:underline"
-        >
-          {showAllContributors ? (
-            <>
-              Show less <FontAwesomeIcon icon={faChevronUp} className="ml-1" />
-            </>
-          ) : (
-            <>
-              Show more <FontAwesomeIcon icon={faChevronDown} className="ml-1" />
-            </>
-          )}
-        </Button>
-      )}
+      {contributors.length > maxInitialDisplay && <ShowMoreButton onToggle={toggleContributors} />}
     </SecondaryCard>
   )
 }