Discover core (#1047)

onlydustxyz · Mar 5, 2025 · 9a383a7 · 9a383a7
1 parent ef86ee2
commit 9a383a7
Show file tree

Hide file tree

Showing 13 changed files with 299 additions and 152 deletions.
diff --git a/app/(saas)/discover/_components/issue-card/issue-card.tsx b/app/(saas)/discover/_components/issue-card/issue-card.tsx
@@ -1,47 +1,79 @@
+import { useCallback } from "react";
+
 import { bootstrap } from "@/core/bootstrap";
 
 import { ContributionBadge } from "@/design-system/molecules/contribution-badge";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/shared/ui/avatar";
 import { Badge } from "@/shared/ui/badge";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/ui/card";
-import { TypographyMuted } from "@/shared/ui/typography";
+import { Card, CardTitle } from "@/shared/ui/card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import { TypographyMuted, TypographySmall } from "@/shared/ui/typography";
 
 import { IssueCardProps } from "./issue-card.types";
 
 export function IssueCard({ title, project, languages, createdAt, labels, issue }: IssueCardProps) {
   const limitedLabels = labels?.slice(0, 2) ?? [];
 
   const dateKernelPort = bootstrap.getDateKernelPort();
+
+  const renderLanguages = useCallback(() => {
+    if (!languages?.length) return null;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="flex items-center gap-1">
+            {languages.slice(0, 2).map(language => (
+              <Avatar className="size-5" key={language.name}>
+                <AvatarImage src={language.logoUrl} />
+                <AvatarFallback className="rounded-xl">{language.name.charAt(0)}</AvatarFallback>
+              </Avatar>
+            ))}
+          </div>
+        </TooltipTrigger>
+
+        <TooltipContent side="bottom" align="end">
+          <ul className="flex flex-col gap-2">
+            {languages.map(language => (
+              <li key={language.name} className="flex items-center gap-1">
+                <Avatar className="size-5" key={language.name}>
+                  <AvatarImage src={language.logoUrl} />
+                  <AvatarFallback className="rounded-xl">{language.name.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <TypographySmall>{language.name}</TypographySmall>
+              </li>
+            ))}
+          </ul>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }, [languages]);
+
   return (
-    <Card>
-      <CardHeader className="pb-4">
+    <Card className="flex flex-col gap-4 p-4">
+      <header>
         <CardTitle className="flex w-full flex-row items-center justify-start gap-2">
           <ContributionBadge type="ISSUE" githubStatus={issue.githubStatus} number={issue.number} />
           <div className="line-clamp-1 flex-1">{title}</div>
         </CardTitle>
-      </CardHeader>
-      <CardContent className="pb-4">
-        <div className="flex flex-row items-center gap-1">
-          <Avatar className="size-5">
-            <AvatarImage src={project.logoUrl} />
-            <AvatarFallback>{project.name.charAt(0)}</AvatarFallback>
-          </Avatar>
-          <div className="flex w-full flex-row items-center justify-between gap-1">
-            <TypographyMuted>
-              {project.name}/{project.repo}
-            </TypographyMuted>
-            <div className="flex flex-row items-center justify-end gap-1">
-              {languages.map(language => (
-                <Avatar className="size-5">
-                  <AvatarImage src={language.logoUrl} />
-                </Avatar>
-              ))}
-            </div>
-          </div>
+      </header>
+
+      <div className="flex flex-row items-center gap-1">
+        <Avatar className="size-5">
+          <AvatarImage src={project.logoUrl} />
+          <AvatarFallback>{project.name.charAt(0)}</AvatarFallback>
+        </Avatar>
+        <div className="flex w-full flex-row items-center justify-between gap-4">
+          <TypographyMuted>
+            {project.name}/{project.repo}
+          </TypographyMuted>
+
+          {renderLanguages()}
         </div>
-      </CardContent>
-      <CardFooter className="flex flex-row items-center justify-between gap-1">
+      </div>
+
+      <footer className="flex flex-row items-center justify-between gap-1">
         <div className="flex flex-row items-center justify-end gap-1">
           {limitedLabels.map(label => (
             <Badge variant={"secondary"} key={label}>
@@ -50,7 +82,7 @@ export function IssueCard({ title, project, languages, createdAt, labels, issue
           ))}
         </div>
         <TypographyMuted>{dateKernelPort.formatDistanceToNow(new Date(createdAt))}</TypographyMuted>
-      </CardFooter>
+      </footer>
     </Card>
   );
 }
diff --git a/app/(saas)/discover/_components/issue-card/issue-card.types.ts b/app/(saas)/discover/_components/issue-card/issue-card.types.ts
@@ -3,6 +3,7 @@ import { ContributionGithubStatusUnion } from "@/core/domain/contribution/models
 export interface IssueCardProps {
   title: string;
   languages: {
+    name: string;
     logoUrl: string;
   }[];
   project: {

diff --git a/app/(saas)/discover/_components/new-project-card/new-project-card.tsx b/app/(saas)/discover/_components/new-project-card/new-project-card.tsx
@@ -1,14 +1,10 @@
 import { GitFork, Star, UserRound } from "lucide-react";
-import { ReactElement } from "react";
-
-import { bootstrap } from "@/core/bootstrap";
-
-import { Icon } from "@/design-system/atoms/icon";
-import { Typo } from "@/design-system/atoms/typo";
+import { useCallback } from "react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/shared/ui/avatar";
 import { Badge } from "@/shared/ui/badge";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/ui/card";
+import { Card, CardContent, CardFooter, CardTitle } from "@/shared/ui/card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 import { TypographyH4, TypographyMuted, TypographySmall } from "@/shared/ui/typography";
 import { cn } from "@/shared/utils";
 
@@ -49,40 +45,72 @@ export function NewProjectCard({
 }: NewProjectCardProps) {
   const limitedCategories = categories?.slice(0, 2) ?? [];
 
+  const renderLanguages = useCallback(() => {
+    if (!languages?.length) return null;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="flex items-center gap-1">
+            {languages.slice(0, 2).map(language => (
+              <Avatar className="size-5" key={language.name}>
+                <AvatarImage src={language.logoUrl} />
+                <AvatarFallback className="rounded-xl">{language.name.charAt(0)}</AvatarFallback>
+              </Avatar>
+            ))}
+          </div>
+        </TooltipTrigger>
+
+        <TooltipContent side="bottom" align="end">
+          <ul className="flex flex-col gap-2">
+            {languages?.map(language => (
+              <li key={language.name} className="flex items-center justify-between gap-10">
+                <div className="flex items-center gap-1">
+                  <Avatar className="size-5" key={language.name}>
+                    <AvatarImage src={language.logoUrl} />
+                    <AvatarFallback className="rounded-xl">{language.name.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  <TypographySmall>{language.name}</TypographySmall>
+                </div>
+
+                <TypographySmall>{language.percentage}%</TypographySmall>
+              </li>
+            ))}
+          </ul>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }, [languages]);
+
   return (
-    <Card className={cn("flex flex-col", className)}>
-      <CardHeader className="pb-4">
-        <CardTitle className="flex w-full flex-row items-center justify-start gap-2">
-          <Avatar className="size-12 rounded-xl">
-            <AvatarImage src={logoUrl} />
-            <AvatarFallback>{name.charAt(0)}</AvatarFallback>
-          </Avatar>
-          <div className="flex flex-col gap-1">
-            <div className="line-clamp-1 flex-1">
-              <TypographyH4>{name}</TypographyH4>
-            </div>
-            <Metrics stars={stars} forks={forks} contributors={contributors} />
+    <Card className={cn("flex flex-col gap-4 p-4", className)}>
+      <CardTitle className="flex w-full flex-row items-center justify-start gap-2">
+        <Avatar className="size-12 rounded-xl">
+          <AvatarImage src={logoUrl} />
+          <AvatarFallback className="rounded-xl">{name.charAt(0)}</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col gap-1">
+          <div className="line-clamp-1 flex-1">
+            <TypographyH4>{name}</TypographyH4>
           </div>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="flex-1 pb-4">
+          <Metrics stars={stars} forks={forks} contributors={contributors} />
+        </div>
+      </CardTitle>
+
+      <CardContent className="flex-1 p-0">
         <TypographyMuted className="line-clamp-3">{description}</TypographyMuted>
       </CardContent>
-      <CardFooter className="flex flex-row items-center justify-between gap-1">
+
+      <CardFooter className="flex flex-row items-center justify-between gap-4 p-0">
         <div className="flex flex-row items-center justify-end gap-1">
           {limitedCategories.map(label => (
             <Badge variant={"secondary"} key={label}>
               {label}
             </Badge>
           ))}
         </div>
-        <div className="flex flex-row items-center justify-end gap-1">
-          {languages.map(language => (
-            <Avatar className="size-5">
-              <AvatarImage src={language.logoUrl} />
-            </Avatar>
-          ))}
-        </div>
+
+        {renderLanguages()}
       </CardFooter>
     </Card>
   );

diff --git a/app/(saas)/discover/_components/new-project-card/new-project-card.types.ts b/app/(saas)/discover/_components/new-project-card/new-project-card.types.ts
@@ -4,7 +4,9 @@ export interface NewProjectCardProps {
   description: string;
   categories: string[];
   languages: {
+    name: string;
     logoUrl: string;
+    percentage: number;
   }[];
   stars: number;
   forks: number;