feat(socials): add project public view for socials (#1032)

Author: rhodinemma

src/Router.tsx

@@ -10,6 +10,7 @@ import HealthCheck from "./components/HealthCheck";
 import ClustersPage from "./pages/admin/ClustersPage";
 import ClusterSettingsPage from "./pages/admin/cluster/ClusterSettingsPage";
 import ProfileViewPage from "./pages/Users/ProfileViewPage";
+import ProjectViewPage from "./pages/Projects/ProjectViewPage";
 
 // import { HomePage } from "./pages/Home.page";
 const AppsListPage = React.lazy(() => import("./pages/Apps/AppsListPage"));
@@ -82,6 +83,7 @@ export const DashboardRoutes = [
  { path: "/", element: <LandingPage /> },
  { path: "/explore", element: <ExplorePage /> },
  { path: "/tags/:tagName", element: <TagDetailsPage /> },
+ { path: "/explore/:project_id", element: <ProjectViewPage /> },
  { path: "/profile/:user_id", element: <UserProfilePage /> },
  { path: "/users/profile/settings", element: <UserProfileSettingsPage /> },
  { path: "/:username", element: <ProfileViewPage /> },

src/components/Cards/ProjectExploreCard.tsx

@@ -86,7 +86,6 @@ const ProjectExploreCard = ({ project }: ProjectExploreCardProps) => {
  radius="lg"
  style={{
  flex: "1 1 350px",
- maxWidth: "380px",
  display: "flex",
  flexDirection: "column",
  }}
@@ -97,7 +96,7 @@ const ProjectExploreCard = ({ project }: ProjectExploreCardProps) => {
  <div>
  <Anchor
  component={Link}
- to={project.link || "#"}
+ to={`/explore/${project?.id}`}
  fw={600}
  style={{ textDecoration: "none" }}
  >

src/components/Cards/ProjectSocialsCard.tsx

@@ -360,6 +360,7 @@ export default function ProjectSocialsCard({
  bottom: "15px",
  right: "8px",
  }}
+ tt="capitalize"
  >
  {isPublicProject ? "Public" : "Private"}
  </Badge>

src/components/Header.tsx

@@ -35,7 +35,7 @@ import { Logo, UserDropDown } from "./Common";
 import { Link, useNavigate } from "react-router-dom";
 import Search from "./Elements/Search";
 import { useAuth } from "@/utils/AuthContext";
-import { IoAirplaneOutline } from "react-icons/io5";
+import { DOCS_URL } from "@/config";
 
 interface HeaderProps {
  opened: boolean;
@@ -71,12 +71,18 @@ export const DashboardHeader = ({ opened, toggle }: HeaderProps) => {
  >
  <Group gap={5}>
  <Text fw={700}>Explore</Text>
- <IoAirplaneOutline
- size={18}
- style={{ transform: "rotate(315deg)" }}
- />
  </Group>
  </Link>
+ <a
+ href={`${DOCS_URL}`}
+ target="_blank"
+ rel="noopener noreferrer"
+ style={{ textDecoration: "none", paddingLeft: "10px" }}
+ >
+ <Group gap={5}>
+ <Text fw={700}>Docs</Text>
+ </Group>
+ </a>
  </Group>
  <Group>
  <Search />

src/components/Trending/TrendingProjects.tsx

@@ -59,7 +59,7 @@ export default function TrendingProjects({
  <Group align="flex-start" gap={12} mt={2}>
  <div style={{ flex: 1 }}>
  <Anchor
- href={`/projects/${project.id}`}
+ href={`/explore/${project.id}`}
  size="sm"
  fw={500}
  style={{
@@ -110,7 +110,7 @@ export default function TrendingProjects({
 
  <Group gap={2} mt={6}>
  <FiUsers size={10} color="#6c757d" />
- <Text size="xs" c="dimmed" fw={500} ml={2}>
+ <Text size="sm" c="dimmed" fw={500} ml={2}>
  {project.followers_count || 0} followers
  </Text>
  </Group>

src/pages/ExplorePage.tsx

@@ -12,7 +12,6 @@ import {
  Select,
  SimpleGrid,
  ThemeIcon,
- Flex,
  Center,
  Box,
  Loader,
@@ -282,37 +281,29 @@ const ExplorePage = () => {
  </Tabs.Panel>
 
  <Tabs.Panel value="projects">
- <Grid>
- <Grid.Col span={12}>
- <Flex wrap="wrap" gap="lg" justify="flex-start">
- {searching ? (
- <Center w="100%" h="300px">
- <Loader size="xl" type="oval" />
- </Center>
- ) : selectedCategory === "projects" ? (
- searchQuery !== "" ? (
- searchResponse?.data?.projects?.length > 0 ? (
- searchResponse.data.projects.map((project: any) => (
- <ProjectExploreCard
- key={project.id}
- project={project}
- />
- ))
- ) : (
- <EmptyState message="No projects found" />
- )
- ) : (
- projectsResponse?.data?.projects?.map((project: any) => (
- <ProjectExploreCard
- key={project.id}
- project={project}
- />
- ))
- )
- ) : null}
- </Flex>
- </Grid.Col>
- </Grid>
+ <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="md">
+ {searching ? (
+ <div style={{ gridColumn: "1 / -1" }}>
+ <Center w="100%" h="300px">
+ <Loader size="xl" type="oval" />
+ </Center>
+ </div>
+ ) : selectedCategory === "projects" ? (
+ searchQuery !== "" ? (
+ searchResponse?.data?.projects?.length > 0 ? (
+ searchResponse.data.projects.map((project: any) => (
+ <ProjectExploreCard key={project.id} project={project} />
+ ))
+ ) : (
+ <EmptyState message="No projects found" />
+ )
+ ) : (
+ projectsResponse?.data?.projects?.map((project: any) => (
+ <ProjectExploreCard key={project.id} project={project} />
+ ))
+ )
+ ) : null}
+ </SimpleGrid>
  </Tabs.Panel>
 
  <Tabs.Panel value="users">
@@ -545,7 +536,7 @@ interface EmptyStateProps {
  message?: string;
 }
 
-const EmptyState = ({ message = "No data found" }: EmptyStateProps) => {
+export const EmptyState = ({ message = "No data found" }: EmptyStateProps) => {
  return (
  <Center w="100%" h="200px">
  <Box