123fc50af9
30 references to removed CSS variables: border-brand-border → border-[#1e2130], text-brand-text-muted → text-[#4f5666], text-brand-dark → text-white, bg-white/[0.04] → bg-[#191c25], hover:border-white/[0.12] → hover:border-[#2a2f3d]. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
import { Box, ArrowRight } from 'lucide-react'
|
|
import { getTreeNavigatePath } from '@/lib/routing'
|
|
import type { SuggestedFlow } from '@/types/copilot'
|
|
|
|
interface SuggestedFlowCardProps {
|
|
flow: SuggestedFlow
|
|
}
|
|
|
|
export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) {
|
|
const navigate = useNavigate()
|
|
|
|
const handleClick = () => {
|
|
const path = getTreeNavigatePath(flow.tree_id, flow.tree_type)
|
|
navigate(path)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleClick}
|
|
className="w-full text-left card-flat p-3 rounded-xl hover:border-[#2a2f3d] transition-colors group"
|
|
>
|
|
<div className="flex items-start gap-2">
|
|
<Box size={14} className="text-[#22d3ee] mt-0.5 shrink-0" />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-[0.8125rem] font-medium text-[#e2e5eb] truncate">
|
|
{flow.tree_name}
|
|
</span>
|
|
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b]">
|
|
{flow.tree_type}
|
|
</span>
|
|
</div>
|
|
<p className="text-[0.75rem] text-[#848b9b] mt-0.5 line-clamp-2">
|
|
{flow.relevance_snippet}
|
|
</p>
|
|
</div>
|
|
<ArrowRight size={14} className="text-[#848b9b] group-hover:text-[#22d3ee] transition-colors shrink-0 mt-0.5" />
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|