chore(about): set badge to multiband

TeamVastsea · Aug 16, 2024 · 59a3838 · 59a3838
1 parent cc645c8
commit 59a3838
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/app/(root)/about/components/DeveloperCard.tsx b/app/(root)/about/components/DeveloperCard.tsx
@@ -2,15 +2,15 @@ import { Avatar, Badge, Button, Group, Stack, Text, Title } from '@mantine/core'
 
 interface DeveloperCardProps {
     name: string;
-    badge: string;
+    badges?: string[];
     description: string;
     links: { name: string; url: string }[];
     logo: string;
 }
 
 export default function DeveloperCard({
                                           name,
-                                          badge,
+                                          badges = [], // Provide a default empty array if badges is undefined
                                           description,
                                           links,
                                           logo,
@@ -20,7 +20,11 @@ export default function DeveloperCard({
             <Avatar src={logo} alt={name} size="8rem" />
             <Stack>
                 <Title order={3}>{name}</Title>
-                <Badge>{badge}</Badge>
+                <Group>
+                    {badges.map((badge, idx) => (
+                        <Badge key={idx}>{badge}</Badge>
+                    ))}
+                </Group>
                 <Text>{description}</Text>
                 <Group>
                     {links.map((link, idx) => (

diff --git a/app/(root)/about/data/data.json b/app/(root)/about/data/data.json
@@ -1,7 +1,7 @@
 [
   {
     "name": "zrll_",
-    "badge": "Full Stack Developer",
+    "badges": ["Full Stack Developer", "Mentor"],
     "description": "John is a full stack developer with 10 years of experience.",
     "links": [
       {
@@ -17,7 +17,7 @@
   },
   {
     "name": "Jane Smith",
-    "badge": "Frontend Developer",
+    "badges": ["Frontend Developer", "UI/UX Designer"],
     "description": "Jane is a skilled frontend developer with a focus on user experience.",
     "links": [
       {