134 lines
5.4 KiB
TypeScript
134 lines
5.4 KiB
TypeScript
import { format } from 'date-fns';
|
|
import {
|
|
BookOpen,
|
|
CalendarDays,
|
|
FileIcon,
|
|
FileX,
|
|
Pencil,
|
|
Trash2,
|
|
User,
|
|
} from 'lucide-react';
|
|
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
|
|
import { RowActions } from '@/components/row-actions';
|
|
import {
|
|
Attachment,
|
|
AttachmentActions,
|
|
AttachmentContent,
|
|
AttachmentDescription,
|
|
AttachmentMedia,
|
|
AttachmentTitle,
|
|
} from '@/components/ui/attachment';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import type { Material } from '@/types/material';
|
|
|
|
type CreateCardParams = {
|
|
handleEdit: (material: Material) => void;
|
|
handleDeleteClick: (material: Material) => void;
|
|
canUpdate: boolean;
|
|
canDelete: boolean;
|
|
};
|
|
|
|
export function createMaterialCard(params: CreateCardParams) {
|
|
const { handleEdit, handleDeleteClick, canUpdate, canDelete } = params;
|
|
|
|
return function MaterialCard(material: Material) {
|
|
const courseClass = material.course_class;
|
|
const lecturerName =
|
|
courseClass?.lecturer?.user?.profile?.full_name ?? null;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
|
<BookOpen className="h-5 w-5" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-medium break-words">
|
|
{material.title}
|
|
</p>
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
|
{courseClass
|
|
? `${courseClass.course?.code ?? ''} · ${courseClass.course?.name ?? ''}`
|
|
: '-'}
|
|
</p>
|
|
{lecturerName && (
|
|
<p className="mt-1 flex items-center gap-1 truncate text-xs text-muted-foreground">
|
|
<User className="h-3 w-3 shrink-0" />
|
|
{lecturerName}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
show: canUpdate,
|
|
onClick: () => handleEdit(material),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
),
|
|
show: canDelete,
|
|
onClick: () => handleDeleteClick(material),
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{material.description && (
|
|
<p className="line-clamp-2 text-sm text-muted-foreground">
|
|
{material.description}
|
|
</p>
|
|
)}
|
|
|
|
{material.file_url && material.file_name ? (
|
|
<Attachment size="sm" className="w-full">
|
|
<AttachmentMedia>
|
|
<FileIcon />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>
|
|
{material.file_name}
|
|
</AttachmentTitle>
|
|
<AttachmentDescription>
|
|
Lampiran materi
|
|
</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentPreviewDialog
|
|
fileUrl={material.file_url}
|
|
fileName={material.file_name}
|
|
variant="icon"
|
|
/>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
) : (
|
|
<div className="flex items-center gap-2 rounded-xl border border-dashed px-2.5 py-2 text-xs text-muted-foreground">
|
|
<FileX className="h-4 w-4 shrink-0" />
|
|
Tidak ada file dilampirkan
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-2 border-t pt-3">
|
|
{material.meeting_number ? (
|
|
<Badge variant="secondary">
|
|
Pertemuan {material.meeting_number}
|
|
</Badge>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<CalendarDays className="h-3.5 w-3.5" />
|
|
{format(new Date(material.created_at), 'd MMM yyyy')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
}
|