Add "submit on Github" on project page

CHANGELOG.md

@@ -122,6 +122,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#207](https://github.com/alleslabs/celatone-frontend/pull/207) Add cta to submit public project in list page
 - [#204](https://github.com/alleslabs/celatone-frontend/pull/204) Change back button wording and adjust flow
 - [#191](https://github.com/alleslabs/celatone-frontend/pull/191) Add typeface (Poppins) and add new styling for command shortcut
 - [#190](https://github.com/alleslabs/celatone-frontend/pull/190) Setup sentry tunnel in next config

src/lib/pages/public-project/components/AllProject.tsx

@@ -1,4 +1,12 @@
-import { Box, SimpleGrid, Flex, Button, Icon } from "@chakra-ui/react";
+import {
+  Box,
+  SimpleGrid,
+  Flex,
+  Button,
+  Icon,
+  Link,
+  Text,
+} from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
@@ -8,6 +16,7 @@ import { TextInput } from "lib/components/forms";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state/EmptyState";
 import { usePublicProjectStore } from "lib/hooks";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { usePublicProjects } from "lib/services/publicProjectService";
 import type { PublicProjectInfo } from "lib/types";
 
@@ -43,17 +52,24 @@ export const AllProject = observer(() => {
   }, [publicProjectInfo, savedProjects, searchKeyword]);
 
   if (isLoading) return <Loading />;
-  if (!publicProjectInfo)
+  if (publicProjectInfo)
     return (
       <Flex flexDirection="column" alignItems="center">
         <EmptyState
           image="https://assets.alleslabs.dev/illustration/search-empty.svg"
           message="We are currently gathering public projects to feature here. If you would like to share your project with the community, please submit your request."
         />
-        <Button gap={2} mt={8}>
-          <Icon as={BsGithub} />
-          Submit on Github
-        </Button>
+        <Link
+          href="https://github.com/alleslabs/celatone-api"
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => AmpTrack(AmpEvent.USE_SUBMIT_PROJECT)}
+        >
+          <Button gap={2} mt={8}>
+            <Icon as={BsGithub} />
+            Submit on Github
+          </Button>
+        </Link>
       </Flex>
     );
 
@@ -74,7 +90,7 @@ export const AllProject = observer(() => {
           image="https://assets.alleslabs.dev/illustration/search-not-found.svg"
         />
       ) : (
-        <SimpleGrid columns={{ sm: 1, md: 3, xl: 4 }} spacing={4} w="full">
+        <SimpleGrid columns={{ sm: 1, md: 3 }} spacing={4} w="full">
           {filteredPublicProjects.map((item) => (
             <PublicProjectCard
               key={item.slug}
@@ -84,6 +100,19 @@ export const AllProject = observer(() => {
           ))}
         </SimpleGrid>
       )}
+      <Flex justifyContent="center" gap="2" w="100%" mt="64px">
+        <Text color="text.dark" variant="body2">
+          Want your project here?
+        </Text>
+        <Link
+          href="https://github.com/alleslabs/celatone-api"
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => AmpTrack(AmpEvent.USE_SUBMIT_PROJECT)}
+        >
+          Submit on Github
+        </Link>
+      </Flex>
     </Box>
   );
 });

src/lib/pages/public-project/components/SocialMedia.tsx

@@ -43,7 +43,13 @@ export const SocialMedia = ({ details }: SocialMediaProps) => {
           onClick={() => AmpTrackWebsite(details.website)}
         />
       )}
-      {details.github && <IconButton href={details.github} icon={FaGithub} />}
+      {details.github && (
+        <IconButton
+          href={details.github}
+          icon={FaGithub}
+          onClick={() => AmpTrackSocial(details.github)}
+        />
+      )}
       {details.socials.length &&
         details.socials.map(
           (social) =>

src/lib/services/amplitude.tsx

@@ -74,6 +74,7 @@ export enum AmpEvent {
   USE_QUICK_EDIT_CONTRACT = "Use Quick Edit Contract",
   USE_QUICK_EDIT_CODE = "Use Quick Edit Code",
   USE_OTHER_MODAL = "Use Other Modal",
+  USE_SUBMIT_PROJECT = "Use Submit Project",
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",