feat: Standardize submission display

2025-12-23 14:51:13 -05:00 · 2025-10-03 15:32:23 +00:00
parent e15705e94d
commit fe33169ed7
5 changed files with 551 additions and 74 deletions
--- a/src/components/moderation/FieldComparison.tsx
+++ b/src/components/moderation/FieldComparison.tsx
@@ -0,0 +1,161 @@
+import { formatFieldName, formatFieldValue } from '@/lib/submissionChangeDetection';
+import type { FieldChange, ImageChange } from '@/lib/submissionChangeDetection';
+import { Badge } from '@/components/ui/badge';
+import { ArrowRight } from 'lucide-react';
+
+interface FieldDiffProps {
+  change: FieldChange;
+  compact?: boolean;
+}
+
+export function FieldDiff({ change, compact = false }: FieldDiffProps) {
+  const { field, oldValue, newValue, changeType } = change;
+
+  const getChangeColor = () => {
+    switch (changeType) {
+      case 'added': return 'text-green-600 dark:text-green-400';
+      case 'removed': return 'text-red-600 dark:text-red-400';
+      case 'modified': return 'text-amber-600 dark:text-amber-400';
+      default: return '';
+    }
+  };
+
+  if (compact) {
+    return (
+      <Badge variant="outline" className={getChangeColor()}>
+        {formatFieldName(field)}
+      </Badge>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1 p-2 rounded-md bg-muted/50">
+      <div className="text-sm font-medium">{formatFieldName(field)}</div>
+      
+      {changeType === 'added' && (
+        <div className="text-sm text-green-600 dark:text-green-400">
+          + {formatFieldValue(newValue)}
+        </div>
+      )}
+      
+      {changeType === 'removed' && (
+        <div className="text-sm text-red-600 dark:text-red-400 line-through">
+          {formatFieldValue(oldValue)}
+        </div>
+      )}
+      
+      {changeType === 'modified' && (
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-red-600 dark:text-red-400 line-through">
+            {formatFieldValue(oldValue)}
+          </span>
+          <ArrowRight className="h-3 w-3 text-muted-foreground" />
+          <span className="text-green-600 dark:text-green-400">
+            {formatFieldValue(newValue)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ImageDiffProps {
+  change: ImageChange;
+  compact?: boolean;
+}
+
+export function ImageDiff({ change, compact = false }: ImageDiffProps) {
+  const { type, oldUrl, newUrl } = change;
+
+  if (compact) {
+    return (
+      <Badge variant="outline" className="text-blue-600 dark:text-blue-400">
+        {type === 'banner' ? 'Banner' : 'Card'} Image
+      </Badge>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 p-2 rounded-md bg-muted/50">
+      <div className="text-sm font-medium">
+        {type === 'banner' ? 'Banner' : 'Card'} Image
+      </div>
+      
+      <div className="flex items-center gap-2">
+        {oldUrl && (
+          <div className="flex-1">
+            <div className="text-xs text-muted-foreground mb-1">Before</div>
+            <img 
+              src={oldUrl} 
+              alt="Previous" 
+              className="w-full h-20 object-cover rounded border-2 border-red-500/50"
+            />
+          </div>
+        )}
+        
+        {oldUrl && newUrl && (
+          <ArrowRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+        )}
+        
+        {newUrl && (
+          <div className="flex-1">
+            <div className="text-xs text-muted-foreground mb-1">After</div>
+            <img 
+              src={newUrl} 
+              alt="New" 
+              className="w-full h-20 object-cover rounded border-2 border-green-500/50"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface LocationDiffProps {
+  oldLocation: any;
+  newLocation: any;
+  compact?: boolean;
+}
+
+export function LocationDiff({ oldLocation, newLocation, compact = false }: LocationDiffProps) {
+  const formatLocation = (loc: any) => {
+    if (!loc) return 'None';
+    if (typeof loc === 'string') return loc;
+    if (typeof loc === 'object') {
+      const parts = [loc.city, loc.state_province, loc.country].filter(Boolean);
+      return parts.join(', ') || 'Unknown';
+    }
+    return String(loc);
+  };
+
+  if (compact) {
+    return (
+      <Badge variant="outline" className="text-blue-600 dark:text-blue-400">
+        Location
+      </Badge>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1 p-2 rounded-md bg-muted/50">
+      <div className="text-sm font-medium">Location</div>
+      
+      <div className="flex items-center gap-2 text-sm">
+        {oldLocation && (
+          <span className="text-red-600 dark:text-red-400 line-through">
+            {formatLocation(oldLocation)}
+          </span>
+        )}
+        {oldLocation && newLocation && (
+          <ArrowRight className="h-3 w-3 text-muted-foreground" />
+        )}
+        {newLocation && (
+          <span className="text-green-600 dark:text-green-400">
+            {formatLocation(newLocation)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}