extract components from website

apps/website/app/leagues/[id]/rulebook/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';
 import Card from '@/components/ui/Card';
+import PointsTable from '@/components/leagues/PointsTable';
 import { useServices } from '@/lib/services/ServiceProvider';
 import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
 
@@ -124,49 +125,7 @@ export default function LeagueRulebookPage() {
           </div>
 
           {/* Points Table */}
-          <Card>
-            <h2 className="text-lg font-semibold text-white mb-4">Points Distribution</h2>
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-charcoal-outline">
-                    <th className="text-left py-3 px-4 font-medium text-gray-400">Position</th>
-                    <th className="text-right py-3 px-4 font-medium text-gray-400">Points</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {positionPoints.map(({ position, points }) => (
-                    <tr 
-                      key={position} 
-                      className={`border-b border-charcoal-outline/50 transition-colors hover:bg-iron-gray/30 ${
-                        position <= 3 ? 'bg-iron-gray/20' : ''
-                      }`}
-                    >
-                      <td className="py-3 px-4">
-                        <div className="flex items-center gap-3">
-                          <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold ${
-                            position === 1 ? 'bg-yellow-500 text-black' :
-                            position === 2 ? 'bg-gray-400 text-black' :
-                            position === 3 ? 'bg-amber-600 text-white' :
-                            'bg-charcoal-outline text-white'
-                          }`}>
-                            {position}
-                          </div>
-                          <span className="text-white font-medium">
-                            {position === 1 ? '1st' : position === 2 ? '2nd' : position === 3 ? '3rd' : `${position}th`}
-                          </span>
-                        </div>
-                      </td>
-                      <td className="py-3 px-4 text-right">
-                        <span className="text-white font-semibold tabular-nums">{points}</span>
-                        <span className="text-gray-500 ml-1">pts</span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </Card>
+          <PointsTable points={positionPoints} />
 
           {/* Bonus Points */}
           {primaryChampionship?.bonusSummary && primaryChampionship.bonusSummary.length > 0 && (