70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
import { ChevronDown, ChevronUp, User } from 'lucide-react';
|
|
|
|
import type { FrameEntryViewModel } from '@/business/frame/types';
|
|
import { Button } from '@/components/ui/button';
|
|
import { FrameEntryDetails } from '@/components/frame/FrameEntryDetails';
|
|
import { FrameEntryEditForm } from '@/components/frame/FrameEntryEditForm';
|
|
import type { FrameModuleWorkflow } from '@/components/frame/types';
|
|
|
|
interface FrameEntryCardProps {
|
|
readonly entry: FrameEntryViewModel;
|
|
readonly index: number;
|
|
readonly workflow: FrameModuleWorkflow;
|
|
}
|
|
|
|
export function FrameEntryCard({ entry, index, workflow }: FrameEntryCardProps) {
|
|
const isExpanded = workflow.expandedId === entry.id;
|
|
const isCurrent = index === 0;
|
|
|
|
return (
|
|
<div
|
|
className={`bg-slate-800/40 backdrop-blur-sm rounded-2xl border overflow-hidden transition-all ${isCurrent ? 'border-amber-500/30' : 'border-slate-700/40'}`}
|
|
>
|
|
<Button
|
|
type="button"
|
|
onClick={() => workflow.setExpandedId(isExpanded ? '' : entry.id)}
|
|
className={`w-full h-auto rounded-none px-5 py-4 flex items-center justify-between ${isCurrent ? 'bg-gradient-to-r from-amber-500/10 to-violet-500/10' : 'bg-slate-700/20'} hover:bg-slate-700/30 transition-colors text-inherit`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{isCurrent && (
|
|
<span className="px-2.5 py-1 bg-gradient-to-r from-amber-500 to-amber-600 text-white text-[10px] font-bold rounded-lg uppercase shadow-lg shadow-amber-500/20">
|
|
Current
|
|
</span>
|
|
)}
|
|
<div className="text-left">
|
|
<h4 className="font-semibold text-white flex items-center gap-2">
|
|
Week of {entry.weekOf}
|
|
{entry.weekLabel && (
|
|
<span className="px-2 py-0.5 rounded-full bg-violet-500/15 border border-violet-500/30 text-violet-300 text-[10px] font-medium">
|
|
{entry.weekLabel}
|
|
</span>
|
|
)}
|
|
</h4>
|
|
<p className="text-xs text-slate-500 flex items-center gap-1 mt-0.5">
|
|
<User size={10} /> {entry.author} - Posted {entry.postedDate}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{isExpanded
|
|
? <ChevronUp size={18} className="text-slate-400" />
|
|
: <ChevronDown size={18} className="text-slate-400" />
|
|
}
|
|
</Button>
|
|
|
|
{isExpanded && (
|
|
<div className="p-5 space-y-4">
|
|
{workflow.isEditing && workflow.editEntry?.id === entry.id ? (
|
|
<FrameEntryEditForm editEntry={workflow.editEntry} workflow={workflow} />
|
|
) : (
|
|
<FrameEntryDetails
|
|
entry={entry}
|
|
canEdit={workflow.canEdit}
|
|
startEditing={workflow.startEditing}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|