# Component Migration Examples

## Common Component Transformations

### 1. Card Component

**BEFORE (Old Design):**
```tsx
<div className="bg-slate-900 border border-slate-800 rounded-lg p-6">
  <h3 className="text-slate-200">Title</h3>
  <p className="text-slate-400">Content</p>
</div>
```

**AFTER (New Design):**
```tsx
<div className="bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 backdrop-blur-xl rounded-2xl p-6 hover:from-white/[0.06] hover:to-white/[0.02] hover:border-white/12 transition-all">
  <h3 className="text-white font-bold">Title</h3>
  <p className="text-white/40">Content</p>
</div>
```

---

### 2. Active/Highlighted Card

**BEFORE:**
```tsx
<div className="bg-purple-900/20 border border-purple-700 rounded-lg p-8">
  {/* content */}
</div>
```

**AFTER (Bright Glow):**
```tsx
<div className="bg-gradient-to-br from-white/[0.08] to-white/[0.04] border border-white/20 rounded-2xl p-8 shadow-[0_0_40px_rgba(255,255,255,0.1)]">
  {/* content */}
</div>
```

---

### 3. Icon in Card

**BEFORE:**
```tsx
<div className="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center">
  <Icon className="w-5 h-5 text-white" />
</div>
```

**AFTER (with subtle color):**
```tsx
<div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center">
  <Icon className="w-6 h-6 text-blue-400" />
</div>
```

---

### 4. Badge/Status

**BEFORE:**
```tsx
<span className="px-3 py-1 bg-purple-900 text-purple-200 rounded-md text-sm">
  Admin
</span>
```

**AFTER:**
```tsx
<div className="px-4 py-2 rounded-xl bg-white/10 border border-white/20">
  <span className="text-sm text-white font-semibold">Admin</span>
</div>
```

---

### 5. Primary Button

**BEFORE:**
```tsx
<button className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg">
  Click Me
</button>
```

**AFTER:**
```tsx
<button className="px-6 py-3 bg-white text-black font-semibold rounded-xl hover:bg-white/90 transition-all hover:scale-105">
  Click Me
</button>
```

---

### 6. Secondary Button

**BEFORE:**
```tsx
<button className="px-6 py-3 border border-slate-700 text-slate-300 hover:bg-slate-800 rounded-lg">
  Cancel
</button>
```

**AFTER:**
```tsx
<button className="px-6 py-3 bg-white/10 border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 transition-all">
  Cancel
</button>
```

---

### 7. Input/Search

**BEFORE:**
```tsx
<input 
  className="bg-slate-800 border border-slate-700 text-white placeholder-slate-400 rounded-lg px-4 py-3"
  placeholder="Search..."
/>
```

**AFTER:**
```tsx
<div className="bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 backdrop-blur-xl rounded-2xl p-1">
  <div className="flex items-center bg-black/50 rounded-xl">
    <svg className="ml-5 w-5 h-5 text-blue-400">{/* search icon */}</svg>
    <input 
      className="flex-1 bg-transparent py-4 px-4 text-white placeholder:text-white/30 focus:outline-none"
      placeholder="Search..."
    />
  </div>
</div>
```

---

### 8. Progress Bar

**BEFORE:**
```tsx
<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
  <div className="h-full bg-purple-600 rounded-full" style={{width: '60%'}}></div>
</div>
```

**AFTER:**
```tsx
<div className="h-2 bg-white/10 rounded-full overflow-hidden">
  <div className="h-full bg-white rounded-full" style={{width: '60%'}}></div>
</div>
```

---

### 9. Stat Card with Trend

**BEFORE:**
```tsx
<div className="bg-slate-900 border border-slate-800 rounded-lg p-6">
  <div className="text-slate-400 text-sm">Active Users</div>
  <div className="text-2xl font-bold text-white">1,234</div>
</div>
```

**AFTER:**
```tsx
<div className="bg-[rgba(20,20,25,0.5)] border border-white/[0.06] backdrop-blur-xl rounded-2xl p-6 hover:scale-105 transition-transform">
  <div className="text-sm text-white/40 mb-2 font-medium">Active Users</div>
  <div className="text-4xl font-bold text-white mb-1">1,234</div>
  <div className="flex items-center gap-1 text-xs text-emerald-400 font-medium">
    <svg className="w-3 h-3">{/* up arrow */}</svg>
    12% vs last week
  </div>
</div>
```

---

### 10. Section Header

**BEFORE:**
```tsx
<div className="mb-8">
  <h2 className="text-2xl font-bold text-slate-100">Recent Trees</h2>
  <p className="text-slate-400 mt-1">Your recently accessed decision trees</p>
</div>
```

**AFTER:**
```tsx
<div className="flex items-center justify-between mb-6">
  <h2 className="text-2xl font-bold text-white">Recent Trees</h2>
  <button className="text-sm text-white/60 hover:text-white font-medium transition-colors">
    View all →
  </button>
</div>
```

---

## Icon Color Guidelines

### AI/Automation Icons
```tsx
<svg className="w-5 h-5 text-cyan-400">{/* sparkle/star */}</svg>
```

### Search Icons
```tsx
<svg className="w-5 h-5 text-blue-400">{/* magnifying glass */}</svg>
```

### Active/Playing State
```tsx
<svg className="w-6 h-6 text-violet-400">{/* play button */}</svg>
```

### Network Category
```tsx
<svg className="w-6 h-6 text-blue-400">{/* wifi/network */}</svg>
```

### Printer Category
```tsx
<svg className="w-6 h-6 text-indigo-400">{/* printer */}</svg>
```

### Email Category
```tsx
<svg className="w-6 h-6 text-cyan-400">{/* envelope */}</svg>
```

### Success Indicators
```tsx
<svg className="w-4 h-4 text-emerald-400">{/* check/arrow up */}</svg>
```

### Error Indicators
```tsx
<svg className="w-4 h-4 text-red-400">{/* x/arrow down */}</svg>
```

### Time/Clock (NO COLOR - keep gray)
```tsx
<svg className="w-4 h-4 text-white/30">{/* clock */}</svg>
```

---

## Common Mistakes to Avoid

❌ **DON'T:**
- Use colored backgrounds on cards
- Use gradient text
- Color ALL icons
- Use slate-900, slate-800 (use white/opacity instead)
- Use purple gradients anywhere

✅ **DO:**
- Use white/black with opacity for all backgrounds
- Keep text white (with varying opacity)
- Only color functional icons
- Use backdrop-blur on cards
- Use white for primary buttons

---

## Quick Reference: Opacity Levels

**Text:**
- Primary: `text-white`
- Secondary: `text-white/70`
- Tertiary: `text-white/40`
- Placeholder: `text-white/30`

**Backgrounds:**
- Card: `bg-white/[0.04]` to `bg-white/[0.01]`
- Card hover: `bg-white/[0.06]` to `bg-white/[0.02]`
- Active card: `bg-white/[0.08]` to `bg-white/[0.04]`
- Button secondary: `bg-white/10`
- Badge: `bg-white/10`

**Borders:**
- Subtle: `border-white/8`
- Normal: `border-white/10`
- Prominent: `border-white/20`
- Active: `border-white/30`