add more badges

Author: Boltzmachine

app/projects/hybrid/page.mdx

@@ -1,5 +1,5 @@
 import { AuthorList } from '@/components/utils'
-import { BadgeContainer, GithubBadge, ArxivBadge } from '@/components/badges'
+import { BadgeContainer, GithubBadge, ArxivBadge, PdfBadge, VenueBadge } from '@/components/badges'
 
 # Learning High-Order Relationships of Brain Regions
 
@@ -15,8 +15,10 @@ import { BadgeContainer, GithubBadge, ArxivBadge } from '@/components/badges'
 />
 
 <BadgeContainer>
+<VenueBadge venue="ICML 2024" />
 <GithubBadge link="https://github.com/Graph-and-Geometric-Learning/HyBRiD" />
 <ArxivBadge link="https://arxiv.org/abs/2312.02203" />
+<PdfBadge link="https://arxiv.org/pdf/2312.02203" />
 </BadgeContainer>
 
 ## Introduction

components/badges.tsx

@@ -1,5 +1,5 @@
 import { Chip } from '@nextui-org/chip';
-import { GithubIcon, ArxivIcon } from './icons';
+import { GithubIcon, ArxivIcon, PaperIcon } from './icons';
 
 
 type BadgeProps = {
@@ -34,6 +34,15 @@ export function ArxivBadge({ link }: { link: string }) {
     return <Badge link={link} icon={<ArxivIcon />} label="ArXiv" />;
 }
 
+export function PdfBadge({ link }: { link: string }) {
+    return <Badge link={link} icon={<PaperIcon />} label="Paper" />;
+}
+
+// The VenueBadge component is used to display the venue of a paper.
+export function VenueBadge ({ venue }: { venue: string }) {
+    return <Badge link="#" icon={null} label={venue} />;
+}
+
 import { ReactNode } from 'react';
 
 export const BadgeContainer = ({ children }: { children: ReactNode }) => {

components/icons.tsx

@@ -115,6 +115,28 @@ export const ArxivIcon: React.FC<IconSvgProps> = ({
   );
 }
 
+
+export const PaperIcon: React.FC<IconSvgProps> = ({
+  size = 22,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      height={size || height}
+      viewBox="0 0 98.63 122.88"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M98.63,35.57A8.37,8.37,0,0,0,96,32.12L64.39,1.32A3.53,3.53,0,0,0,61.63,0H6.43A6.42,6.42,0,0,0,0,6.43v110a6.42,6.42,0,0,0,6.43,6.43H92.21a6.42,6.42,0,0,0,6.4-6.43V63.37h0V35.57Zm-33.43-23L86.68,32.69H65.2V12.57ZM49.75,115.7H7.18V7.15H58V36.26a3.61,3.61,0,0,0,3.61,3.61H91.45v23.5h0V115.7ZM20.47,53a2.58,2.58,0,0,1,1.87-.88H64.53a2.55,2.55,0,0,1,1.91.87,3,3,0,0,1,.76,2,3.08,3.08,0,0,1-.77,2,2.57,2.57,0,0,1-1.9.88H22.37a2.56,2.56,0,0,1-1.91-.87,3.1,3.1,0,0,1,0-4.08Zm0,40.77a2.53,2.53,0,0,1,1.9-.88H76.25a2.55,2.55,0,0,1,1.91.88,3.1,3.1,0,0,1,0,4.08,2.59,2.59,0,0,1-1.92.86H22.37a2.59,2.59,0,0,1-1.91-.86,3.1,3.1,0,0,1,0-4.08ZM76.25,72.52a2.59,2.59,0,0,1,1.91.88,3.1,3.1,0,0,1,0,4.08,2.57,2.57,0,0,1-1.92.87H22.37a2.56,2.56,0,0,1-1.91-.87,3.1,3.1,0,0,1,0-4.08,2.57,2.57,0,0,1,1.9-.88ZM20.47,32.63a2.57,2.57,0,0,1,1.9-.88H41.86a2.56,2.56,0,0,1,1.91.87,3,3,0,0,1,.76,2,3.07,3.07,0,0,1-.75,2l0,0a2.58,2.58,0,0,1-1.9.88H22.37a2.56,2.56,0,0,2-0.91.13,3.1,3.1,0,0,1,0-4.08Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
 export const MoonFilledIcon = ({
   size = 24,
   width,