feat: Badge size prop (sm/md) and use Badge in ExperienceCard

src/shared/ui/Badge/index.ts

@@ -1,2 +1,2 @@
-export type { BadgeVariant } from './ui/Badge';
+export type { BadgeSize, BadgeVariant } from './ui/Badge';
 export { Badge } from './ui/Badge';

src/shared/ui/Badge/ui/Badge.test.tsx

@@ -42,6 +42,23 @@ describe('Badge', () => {
     });
   });
 
+  describe('sizes', () => {
+    it('defaults to sm size', () => {
+      render(<Badge>Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('px-3', 'py-1', 'text-xs');
+    });
+
+    it('applies sm size classes', () => {
+      render(<Badge size="sm">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('px-3', 'py-1', 'text-xs');
+    });
+
+    it('applies md size classes', () => {
+      render(<Badge size="md">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('px-4', 'py-2', 'text-sm');
+    });
+  });
+
   describe('className passthrough', () => {
     it('merges custom className', () => {
       render(<Badge className="mt-4">Tag</Badge>);

src/shared/ui/Badge/ui/Badge.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { cn } from '$shared/lib';
 
 export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline';
+export type BadgeSize = 'sm' | 'md';
 
 interface Props {
   /**
@@ -13,6 +14,11 @@ interface Props {
    * @default 'default'
    */
   variant?: BadgeVariant;
+  /**
+   * Size preset
+   * @default 'sm'
+   */
+  size?: BadgeSize;
   /**
    * Additional CSS classes
    */
@@ -26,12 +32,17 @@ const VARIANTS: Record<BadgeVariant, string> = {
   outline: 'brutal-border bg-transparent text-blue',
 };
 
+const SIZES: Record<BadgeSize, string> = {
+  sm: 'px-3 py-1 text-xs',
+  md: 'px-4 py-2 text-sm',
+};
+
 /**
  * Small label for categorization or status.
  */
-export function Badge({ children, variant = 'default', className }: Props) {
+export function Badge({ children, variant = 'default', size = 'sm', className }: Props) {
   return (
-    <span className={cn('inline-block px-3 py-1 text-xs uppercase tracking-wider', VARIANTS[variant], className)}>
+    <span className={cn('inline-block uppercase tracking-wider', SIZES[size], VARIANTS[variant], className)}>
       {children}
     </span>
   );

src/shared/ui/index.ts

@@ -1,4 +1,4 @@
-export type { BadgeVariant } from './Badge';
+export type { BadgeSize, BadgeVariant } from './Badge';
 export { Badge } from './Badge';
 export type { ButtonSize, ButtonVariant } from './Button';
 export { Button } from './Button';