221 lines
8.8 KiB
TypeScript
221 lines
8.8 KiB
TypeScript
import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle, Pencil, Trash2, Bookmark, Lock } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import type { StepListItem } from '@/types/step'
|
|
|
|
interface StepCardProps {
|
|
step: StepListItem
|
|
onPreview: (step: StepListItem) => void
|
|
onInsert?: (step: StepListItem) => void // session context (now optional)
|
|
onEdit?: (step: StepListItem) => void // library page
|
|
onDelete?: (step: StepListItem) => void // library page — NOTE: pass full StepListItem, not just ID
|
|
onSave?: (step: StepListItem) => void // library page (save copy to My Steps)
|
|
currentUserId?: string // to determine ownership
|
|
}
|
|
|
|
const stepTypeIcons = {
|
|
decision: HelpCircle,
|
|
action: Zap,
|
|
solution: CheckCircle
|
|
}
|
|
|
|
const stepTypeColors = {
|
|
decision: 'bg-blue-400/10 text-blue-400 border-blue-400/20',
|
|
action: 'bg-yellow-400/10 text-yellow-400 border-yellow-400/20',
|
|
solution: 'bg-emerald-400/10 text-emerald-400 border-emerald-400/20'
|
|
}
|
|
|
|
export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave, currentUserId }: StepCardProps) {
|
|
const Icon = stepTypeIcons[step.step_type as keyof typeof stepTypeIcons] || HelpCircle
|
|
const hasRating = step.rating_count > 0
|
|
const visibleTags = step.tags.slice(0, 3)
|
|
const remainingTags = step.tags.length - 3
|
|
|
|
const isOwn = currentUserId ? step.created_by === currentUserId : false
|
|
|
|
return (
|
|
<div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
|
|
{/* Header */}
|
|
<div className="mb-3 flex items-start justify-between gap-2">
|
|
<div className="flex-1">
|
|
<div className="mb-1.5 flex items-center gap-2">
|
|
{/* Step Type Badge */}
|
|
<span
|
|
className={cn(
|
|
'flex items-center gap-1 rounded border px-2 py-0.5 text-xs font-medium',
|
|
stepTypeColors[step.step_type as keyof typeof stepTypeColors]
|
|
)}
|
|
>
|
|
<Icon className="h-3 w-3" />
|
|
{step.step_type}
|
|
</span>
|
|
|
|
{/* Featured Badge */}
|
|
{step.is_featured && (
|
|
<span className="rounded bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
|
|
Featured
|
|
</span>
|
|
)}
|
|
|
|
{/* From Flow Badge */}
|
|
{step.is_flow_synced && (
|
|
<span className="rounded-full bg-blue-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-blue-400">
|
|
From Flow
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metadata */}
|
|
<div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
|
|
{/* Category */}
|
|
{step.category_name && (
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs">📁</span>
|
|
<span className="truncate">{step.category_name}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Rating */}
|
|
<div className="flex items-center gap-1.5">
|
|
<Star className="h-3.5 w-3.5" />
|
|
{hasRating ? (
|
|
<span>
|
|
{step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
|
|
</span>
|
|
) : (
|
|
<span className="italic">Not rated</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Usage Count */}
|
|
<div className="flex items-center gap-1.5">
|
|
<TrendingUp className="h-3.5 w-3.5" />
|
|
<span>Used {step.usage_count} {step.usage_count === 1 ? 'time' : 'times'}</span>
|
|
</div>
|
|
|
|
{/* Author & Date */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-1.5">
|
|
<User className="h-3.5 w-3.5" />
|
|
<span className="truncate">{step.author_name || 'Unknown'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Calendar className="h-3.5 w-3.5" />
|
|
<span>{new Date(step.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
{step.tags.length > 0 && (
|
|
<div className="mb-3 flex flex-wrap gap-1.5">
|
|
{visibleTags.map(tag => (
|
|
<span
|
|
key={tag}
|
|
className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
{remainingTags > 0 && (
|
|
<span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
|
|
+{remainingTags} more
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2">
|
|
{(onEdit || onDelete || onSave) ? (
|
|
isOwn ? (
|
|
step.is_flow_synced ? (
|
|
// Flow-synced step: Preview + lock (read-only)
|
|
<>
|
|
<button
|
|
onClick={() => onPreview(step)}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
Preview
|
|
</button>
|
|
<span
|
|
title="Managed by source flow — fork to customize"
|
|
className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground opacity-50 cursor-default"
|
|
>
|
|
<Lock className="h-4 w-4" />
|
|
</span>
|
|
</>
|
|
) : (
|
|
// Own step: Preview + Edit + Delete icon
|
|
<>
|
|
<button
|
|
onClick={() => onPreview(step)}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
Preview
|
|
</button>
|
|
<button
|
|
onClick={() => onEdit?.(step)}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => onDelete?.(step)}
|
|
className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
|
|
aria-label="Delete step"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
</>
|
|
)
|
|
) : (
|
|
// Others' step: Preview + Save
|
|
<>
|
|
<button
|
|
onClick={() => onPreview(step)}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
Preview
|
|
</button>
|
|
<button
|
|
onClick={() => onSave?.(step)}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
|
|
>
|
|
<Bookmark className="h-4 w-4" />
|
|
Save
|
|
</button>
|
|
</>
|
|
)
|
|
) : (
|
|
// Session context (original): Preview + Insert
|
|
<>
|
|
<button
|
|
onClick={() => onPreview(step)}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
Preview
|
|
</button>
|
|
<button
|
|
onClick={() => onInsert?.(step)}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Insert
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|