'use client'
/**
* DevOps Pipeline Sidebar — shared icons, badge, and live-status hook.
*
* Extracted from DevOpsPipelineSidebar.tsx to stay within the 500 LOC budget.
*/
import { useState, useEffect } from 'react'
import type { DevOpsToolId, PipelineLiveStatus } from '@/types/infrastructure-modules'
// =============================================================================
// Icons
// =============================================================================
export const ToolIcon = ({ id }: { id: DevOpsToolId }) => {
switch (id) {
case 'ci-cd':
return (
)
case 'tests':
return (
)
case 'sbom':
return (
)
case 'security':
return (
)
default:
return null
}
}
// Server/Pipeline Icon fuer Header
export const ServerIcon = () => (
)
// Play Icon fuer Quick Action
export const PlayIcon = () => (
)
// =============================================================================
// Live Status Hook (optional - fetches status from API)
// =============================================================================
export function usePipelineLiveStatus(): PipelineLiveStatus | null {
const [status, setStatus] = useState(null)
useEffect(() => {
// Live status fetching not yet implemented
}, [])
return status
}
// =============================================================================
// Status Badge Component
// =============================================================================
interface StatusBadgeProps {
count: number
type: 'backlog' | 'security' | 'running'
}
export function StatusBadge({ count, type }: StatusBadgeProps) {
if (count === 0) return null
const colors = {
backlog: 'bg-amber-500',
security: 'bg-red-500',
running: 'bg-green-500 animate-pulse',
}
return (
{count}
)
}