website refactor

apps/website/ui/ResultRow.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
+import { Text } from './Text';
+
+export interface ResultRowProps {
+  children: ReactNode;
+  isHighlighted?: boolean;
+}
+
+export const ResultRow = ({ children, isHighlighted }: ResultRowProps) => {
+  return (
+    <Surface 
+      variant={isHighlighted ? 'muted' : 'dark'} 
+      rounded="xl" 
+      padding={3}
+      style={isHighlighted ? { 
+        border: '1px solid var(--ui-color-intent-primary)',
+        background: 'linear-gradient(to right, rgba(25, 140, 255, 0.1), transparent)'
+      } : {}}
+    >
+      <Box display="flex" alignItems="center" gap={3}>
+        {children}
+      </Box>
+    </Surface>
+  );
+};
+
+export interface PositionBadgeProps {
+  position: number;
+}
+
+export const PositionBadge = ({ position }: PositionBadgeProps) => {
+  const getIntent = (pos: number) => {
+    if (pos === 1) return 'warning';
+    if (pos === 2) return 'low';
+    if (pos === 3) return 'warning';
+    return 'low';
+  };
+
+  return (
+    <Box 
+      width={10} 
+      height={10} 
+      rounded="lg" 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      bg="var(--ui-color-bg-surface-muted)"
+      style={{ border: '1px solid var(--ui-color-border-default)' }}
+    >
+      <Text weight="bold" variant={getIntent(position) as any}>{position}</Text>
+    </Box>
+  );
+};
+
+export interface ResultPointsProps {
+  points: number;
+}
+
+export const ResultPoints = ({ points }: ResultPointsProps) => (
+  <Box padding={2} rounded="lg" bg="rgba(255, 190, 77, 0.05)" style={{ border: '1px solid rgba(255, 190, 77, 0.2)', minWidth: '3.5rem', textAlign: 'center' }}>
+    <Text size="xs" variant="low" block>PTS</Text>
+    <Text size="sm" weight="bold" variant="warning">{points}</Text>
+  </Box>
+);