add badge container

Author: Boltzmachine

app/projects/layout.tsx

@@ -6,8 +6,8 @@ export default function ProjectsLayout({
     children: React.ReactNode;
 }) {
     return (
-        <section className="flex items-start justify-center gap-4">
-            <div className="inline-block max-w-full justify-items-center text-left justify-center space-y-4">
+        <section className="flex items-start gap-4">
+            <div className="inline-block max-w-full text-left justify-center space-y-4">
                 {children}
             </div>
         </section>

app/projects/mage/page.mdx

@@ -1,5 +1,5 @@
 import AuthorList from '@/components/author_list'
-import { GithubBadge, ArxivBadge } from '@/components/badges'
+import { BadgeContainer, GithubBadge, ArxivBadge } from '@/components/badges'
 
 # Explaining Graph Neural Networks via Structure-aware Interaction Index
 
@@ -12,8 +12,10 @@ import { GithubBadge, ArxivBadge } from '@/components/badges'
   ]}
 />
 
+<BadgeContainer>
 <GithubBadge link="https://github.com/ngocbh/MAGE" />
 <ArxivBadge link="https://arxiv.org/abs/2405.14352" />
+</BadgeContainer>
 
 In this project, we aim to explore graph-theoretic-based attribution scores for explaining graph neural networks (GNNs). Prior work (GStarX, SubgraphX, SAME) has successfully applied solutions such as Shapley values and HN values to explain GNNs. However, several limitations remain:
 

components/badges.tsx

@@ -10,6 +10,7 @@ type BadgeProps = {
 
 export function Badge({ link, icon, label }: BadgeProps) {
     return (
+        <div className='items-center'>
         <a href={link}>
             <Chip
                 startContent={icon}
@@ -21,6 +22,7 @@ export function Badge({ link, icon, label }: BadgeProps) {
                 {label}
             </Chip>
         </a>
+        </div>
     );
 }
 
@@ -29,5 +31,15 @@ export function GithubBadge({ link }: { link: string }) {
 }
 
 export function ArxivBadge({ link }: { link: string }) {
-    return <Badge link={link} icon={<ArxivIcon />} label="arXiv" />;
+    return <Badge link={link} icon={<ArxivIcon />} label="ArXiv" />;
 }
+
+import { ReactNode } from 'react';
+
+export const BadgeContainer = ({ children }: { children: ReactNode }) => {
+    return (
+    <div className="flex flex-wrap gap-2 justify-center">
+        {children}
+    </div>
+    );
+}