fix language alignment

adamstrojil · Sep 9, 2024 · c542dfb · c542dfb
1 parent 61b481e
commit c542dfb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/app/components/Badge.tsx b/src/app/components/Badge.tsx
@@ -6,15 +6,16 @@ export type BadgeProps = {
     text: string;
     variant: BadgeVariant;
     isUppercase?: boolean;
+    className?: string;
 };
 
-export const Badge = ({ text, variant, isUppercase = false }: BadgeProps) => {
+export const Badge = ({ text, variant, isUppercase = false, className }: BadgeProps) => {
     const variantStyles = variant === 'primary' ? `text-blue-600 bg-blue-50` : `text-neutral-500 bg-neutral-50`;
     const textTransformStyle = isUppercase ? 'uppercase' : 'lowercase';
 
     return (
         <span
-            className={`whitespace-nowrap inline-flex items-center rounded-lg px-2 py-1 text-sm font-medium ${variantStyles} ${textTransformStyle}`}
+            className={`whitespace-nowrap inline-flex items-center justify-center rounded-lg px-2 py-1 text-sm font-medium ${variantStyles} ${textTransformStyle} ${className}`}
         >
             {text}
         </span>

diff --git a/src/app/components/LanguagesBox/LanguageList.tsx b/src/app/components/LanguagesBox/LanguageList.tsx
@@ -7,9 +7,9 @@ type Props = { languages: Languages; category: 'primary' | 'secondary' };
 export const LanguageList = ({ languages, category }: Props) => (
     <ul className="gap-x-2 gap-y-1 mb-4">
         {languages.map(({ language, level }) => (
-            <li key={language} className="my-1">
-                <Badge text={level} variant={category} isUppercase />
-                <span className="ml-2 capitalize inline-block">{language}</span>
+            <li key={language} className="my-1 flex gap-2 content-center items-baseline">
+                <Badge text={level} variant={category} isUppercase className="w-8" />
+                <span className="capitalize inline-block">{language}</span>
             </li>
         ))}
     </ul>