Left align the colored bullets in the profile page

Author: anees-asghar

src/components/GridList.tsx

@@ -2,17 +2,19 @@ import List, { ListProps } from "@/components/List";
 
 interface GridListProps extends ListProps {
   scrollable?: boolean;
+  className?: string;
 }
 
 export default function GridList({
   children,
   scrollable,
+  className = ``,
   ...props
 }: GridListProps) {
   return (
     <List {...props}>
       <div
-        className={`flex flex-row gap-2 ${scrollable ? "justify-start overflow-x-auto pb-4" : "justify-around flex-wrap"}`}
+        className={`flex flex-row gap-2 ${scrollable ? "justify-start overflow-x-auto pb-4" : "justify-around flex-wrap"} ${className}`}
       >
         {children}
       </div>

src/components/user/ProfileInformations.tsx

@@ -1,6 +1,5 @@
 import GridList from "@/components/GridList";
 import List from "@/components/List";
-import ListCard from "@/components/ListCard";
 import AcademicTile from "./AcademicTile";
 
 interface ProfileInformationProps {
@@ -26,7 +25,7 @@ export default function ProfileInformations({ user }: ProfileInformationProps) {
 
       {/* Skills */}
       {!!skills?.length && (
-        <GridList title="Skills">
+        <GridList title="Skills" className="!justify-start">
           {skills.map((skill, idx) => (
             <span
               key={`skills-${idx}`}
@@ -40,7 +39,7 @@ export default function ProfileInformations({ user }: ProfileInformationProps) {
 
       {/* Interested In */}
       {!!interestedIn?.length && (
-        <GridList title="Interested In">
+        <GridList title="Interested In" className="!justify-start">
           {interestedIn.map((interest, idx) => (
             <span
               key={`interested-in-${idx}`}
@@ -54,7 +53,7 @@ export default function ProfileInformations({ user }: ProfileInformationProps) {
 
       {/* Looking For */}
       {!!lookingFor?.length && (
-        <GridList title="Looking for">
+        <GridList title="Looking for" className="!justify-start">
           {lookingFor.map((looking, idx) => (
             <span
               key={`looking-for-${idx}`}

src/mocks/data/user.ts

@@ -31,6 +31,7 @@ export const MOCK_USER: User = {
       ),
     },
   ],
+  skills: ["Python", "Git", "Github", "React", "NodeJS"],
 };
 
 export const MOCK_OTHER_USER: User = {