feat: Extract UI sub-components from ModerationQueue

src/components/moderation/NewItemsAlert.tsx

@@ -0,0 +1,34 @@
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+
+interface NewItemsAlertProps {
+  count: number;
+  onShowNewItems: () => void;
+  visible?: boolean;
+}
+
+export const NewItemsAlert = ({ count, onShowNewItems, visible = true }: NewItemsAlertProps) => {
+  if (!visible || count === 0) return null;
+
+  return (
+    <div className="sticky top-0 z-10 animate-in fade-in-50">
+      <Alert className="border-primary/50 bg-primary/5">
+        <AlertCircle className="h-4 w-4 animate-pulse" />
+        <AlertTitle>New Items Available</AlertTitle>
+        <AlertDescription className="flex items-center justify-between">
+          <span>{count} new {count === 1 ? 'submission' : 'submissions'} pending review</span>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={onShowNewItems}
+            className="ml-4"
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Show New Items
+          </Button>
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+};