astar added

kudos-ink · Oct 21, 2024 · 3dea047 · 3dea047
1 parent da98a56
commit 3dea047
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 64 deletions.
diff --git a/app/projects/[slug]/_components/ProjectHeader.tsx b/app/projects/[slug]/_components/ProjectHeader.tsx
@@ -19,34 +19,40 @@ const ProjectHeader = ({
   links,
   name,
   slug,
-}: IProjectHeaderProps) => (
-  <div className="flex flex-col space-y-unit-1">
-    <div className="flex gap-4 items-center mb-2">
-      {avatar && (
-        <MyImage
-          className="bg-foreground border min-w-[45px] min-h-[45px] shrink-0 flex items-center justify-center"
-          src={getIconSrc(slug, avatar)}
-          alt={`${name}'s Logo`}
-          radius="sm"
-          height={40}
-          width={40}
-        />
-      )}
-      <span className="text-3xl font-bold md:text-4xl">{name}</span>
-    </div>
-    <span className="leading-tight line-clamp-2 capitalize">{description}</span>
-    <div className="flex flex-wrap gap-3 mt-6">
-      {Object.entries(links).map(([key, items]) => (
-        <Links
-          key={key}
-          icon={getIconByKey(key)}
-          items={items}
-          placeholder={key}
-        />
-      ))}
+}: IProjectHeaderProps) => {
+  const avatarSrc = getIconSrc(slug, avatar);
+
+  return (
+    <div className="flex flex-col space-y-unit-1">
+      <div className="flex gap-4 items-center mb-2">
+        {avatarSrc && (
+          <MyImage
+            className="bg-foreground p-0.5 border min-w-[45px] min-h-[45px] shrink-0 flex items-center justify-center"
+            src={avatarSrc}
+            alt={`${name}'s Logo`}
+            radius="sm"
+            height={38}
+            width={38}
+          />
+        )}
+        <span className="text-3xl font-bold md:text-4xl">{name}</span>
+      </div>
+      <span className="leading-tight line-clamp-2 capitalize">
+        {description}
+      </span>
+      <div className="flex flex-wrap gap-3 mt-6">
+        {Object.entries(links).map(([key, items]) => (
+          <Links
+            key={key}
+            icon={getIconByKey(key)}
+            items={items}
+            placeholder={key}
+          />
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 interface ILinksProps {
   icon: ReactNode;

diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -53,7 +53,7 @@ export default async function SingleProjectPage({ params }: IProps) {
       <section
         className={container() + " sm:gap-4 md:flex md:justify-between !mb-16"}
       >
-        <div className="flex-grow">
+        <div className="flex-grow md:basis-1/2 lg:basis-3/4">
           <ProjectHeader
             avatar={issues.data[0]?.project.avatar}
             name={infos.name}

diff --git a/components/filters/toolbar.tsx b/components/filters/toolbar.tsx
@@ -49,11 +49,14 @@ const Toolbar = ({
     (filter) => (filter.options = filterOptions[filter.key]),
   );
 
-  const updateRouterWithFilters = (key: FilterKeys, newValue: string[]) => {
-    const currentPath = pathname === "/" ? "/explore/" : pathname;
-    const newUrl = createUrl(key, newValue, currentPath, filterOptions);
-    router.replace(newUrl, { scroll: true });
-  };
+  const updateRouterWithFilters = useCallback(
+    (key: FilterKeys, newValue: string[]) => {
+      const currentPath = pathname === "/" ? "/explore/" : pathname;
+      const newUrl = createUrl(key, newValue, currentPath, filterOptions);
+      router.replace(newUrl, { scroll: true });
+    },
+    [filterOptions, pathname, router],
+  );
 
   const handleSelectChange = useCallback(
     (key: FilterKeys) => (newValues: Set<string>) => {

diff --git a/components/nav/items.tsx b/components/nav/items.tsx
@@ -100,31 +100,34 @@ export const ProjectDropDown = ({ projects }: { projects: Project[] }) => (
       className="max-h-[50vh] overflow-y-auto"
       items={projects}
     >
-      {({ avatar, id, name, slug }) => (
-        <DropdownItem key={`${slug}-${id}`}>
-          <NuiLink
-            className="flex items-center gap-2"
-            href={`/projects/${slug}`}
-            color="foreground"
-            title={`${name}'s project page`}
-            as={Link}
-          >
-            <div className="bg-foreground rounded-md min-w-[40px] min-h-[40px] sm:min-w-[45px] sm:min-h-[45px] shrink-0 flex items-center justify-center">
-              {avatar !== null && (
-                <MyImage
-                  className="border"
-                  src={getIconSrc(slug, avatar)}
-                  alt={`${name}'s avatar`}
-                  radius="sm"
-                  height={40}
-                  width={40}
-                />
-              )}
-            </div>
-            <div className="capitalize">{name}</div>
-          </NuiLink>
-        </DropdownItem>
-      )}
+      {({ avatar, id, name, slug }) => {
+        const avatarSrc = getIconSrc(slug, avatar);
+        return (
+          <DropdownItem key={`${slug}-${id}`}>
+            <NuiLink
+              className="flex items-center gap-2"
+              href={`/projects/${slug}`}
+              color="foreground"
+              title={`${name}'s project page`}
+              as={Link}
+            >
+              <div className="bg-foreground rounded-md p-0.5 min-w-[40px] min-h-[40px] sm:min-w-[45px] sm:min-h-[45px] shrink-0 flex items-center justify-center">
+                {avatarSrc !== null && (
+                  <MyImage
+                    className="border"
+                    src={avatarSrc}
+                    alt={`${name}'s avatar`}
+                    radius="sm"
+                    height={40}
+                    width={40}
+                  />
+                )}
+              </div>
+              <div className="capitalize">{name}</div>
+            </NuiLink>
+          </DropdownItem>
+        );
+      }}
     </DropdownMenu>
   </Dropdown>
 );
diff --git a/components/project-carousel.tsx b/components/project-carousel.tsx
@@ -13,6 +13,7 @@ function createCarousel(projects: Project[], keyPrefix: string) {
     projects.pop();
   }
   return projects.map(({ avatar, id, name, slug }, index) => {
+    const avatarSrc = getIconSrc(slug, avatar);
     return (
       <NuiLink
         aria-hidden="true"
@@ -24,10 +25,10 @@ function createCarousel(projects: Project[], keyPrefix: string) {
         key={`${keyPrefix}-${id}`}
       >
         <div className="flex items-center space-x-2 justify-evenly">
-          {avatar && (
+          {avatarSrc && (
             <MyImage
-              className="rounded-md min-w-[45px] min-h-[45px] shrink-0 bg-foreground border"
-              src={getIconSrc(slug, avatar)}
+              className="rounded-md p-0.5 min-w-[45px] min-h-[45px] shrink-0 bg-foreground border"
+              src={avatarSrc}
               alt={`${name} logo`}
               radius="sm"
               width={45}

diff --git a/components/table/static-table.tsx b/components/table/static-table.tsx
@@ -20,7 +20,7 @@ import IssueModal from "./issue-modal";
 import { ExternalLink, Content, Time, Project, ApplyButton } from "./row";
 import { getIconSrc } from "@/utils/icons";
 
-const DEFAULT_EMPTY = "No contributions to display.. Try another query (:";
+const DEFAULT_EMPTY = "No contributions to display yet";
 
 const KUDOS_HIGHLIGHT_STYLES = `before:absolute before:content-['']
   before:bg-[conic-gradient(transparent_270deg,_#BABABC,_transparent)]

diff --git a/public/project-icons/astar.svg b/public/project-icons/astar.svg
diff --git a/utils/icons.ts b/utils/icons.ts
@@ -1,7 +1,8 @@
-export const getIconSrc = (name: string, avatar: string) => {
-  const lowerCaseName = name.toLocaleLowerCase();
+export const getIconSrc = (slug: string, avatar: string | null) => {
+  const lowerCaseName = slug.toLocaleLowerCase();
 
   const iconMappings: { [key: string]: string } = {
+    astar: "/project-icons/astar.svg",
     polkadot: "/images/polkadot-logo.png",
     "substrate-tooling": "/images/substrate-logo.png",
     "substrate-libraries": "/images/substrate-logo.png",