website refactor

apps/website/components/drivers/DriverRankings.tsx

@@ -1,9 +1,10 @@
+'use client';
+
 import React from 'react';
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
+import { Panel } from '@/ui/Panel';
 import { RankingListItem } from '@/components/leaderboards/RankingListItem';
 import { RankingList } from '@/components/leaderboards/RankingList';
-import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
 
 export interface DriverRanking {
   type: 'overall' | 'league';
@@ -21,19 +22,18 @@ interface DriverRankingsProps {
 export function DriverRankings({ rankings }: DriverRankingsProps) {
   if (!rankings || rankings.length === 0) {
     return (
-      <Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
-        <Heading level={3} mb={2}>Rankings</Heading>
-        <MinimalEmptyState
+      <Panel title="Rankings">
+        <EmptyState
           title="No ranking data available yet"
           description="Compete in leagues to earn your first results."
+          variant="minimal"
         />
-      </Card>
+      </Panel>
     );
   }
 
   return (
-    <Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
-      <Heading level={3} mb={4}>Rankings</Heading>
+    <Panel title="Rankings">
       <RankingList>
         {rankings.map((ranking, index) => (
           <RankingListItem
@@ -47,6 +47,6 @@ export function DriverRankings({ rankings }: DriverRankingsProps) {
           />
         ))}
       </RankingList>
-    </Card>
+    </Panel>
   );
 }