Forum Diskusi

{course.title}

{showForm && (

setShowForm(false)} className="rounded-xl border bg-muted/20 p-4" > {({ processing, errors }) => (

Judul Diskusi {errors.title &&

{errors.title}

}

Deskripsi

{errors.body && <p className="text-xs text-destructive">{errors.body}</p>}
                                </div>
                                <div className="flex gap-2">
                                    <Button type="submit" disabled={processing} size="sm">Kirim</Button>
                                    <Button type="button" variant="outline" size="sm" onClick={() => setShowForm(false)}>Batal</Button>
                                </div>
                            </div>
                        )}
                    </Form>
                )}

<div className="flex flex-col gap-3">
                    {discussions.data.length === 0 && (
                        <div className="rounded-xl border border-dashed p-12 text-center">
                            <MessageSquare className="mx-auto mb-3 h-10 w-10 text-muted-foreground/30" />
                            <p className="font-medium">Belum ada diskusi</p>
                            <p className="mt-1 text-sm text-muted-foreground">Jadilah yang pertama memulai diskusi!</p>
                        </div>
                    )}

{discussions.data.map((d) => (
                        <Link
                            key={d.id}
                            href={`/courses/${course.slug}/discussions/${d.id}`}
                            className="flex gap-3 rounded-xl border bg-card p-4 shadow-sm hover:shadow-md transition-shadow"
                        >
                            <div className="flex-1 min-w-0">
                                <div className="flex items-start gap-2">
                                    {d.is_pinned && <Pin className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />}
                                    <p className="font-medium">{d.title}</p>
                                </div>
                                <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">{d.body}</p>
                                <div className="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
                                    <span>{d.user.name}</span>
                                    <span>·</span>
                                    <span>{timeAgo(d.created_at)}</span>
                                    {d.lesson && (
                                        <>
                                            <span>·</span>
                                            <span className="truncate">Lesson: {d.lesson.title}</span>
                                        </>
                                    )}
                                </div>
                            </div>
                            <div className="flex shrink-0 items-center gap-1 text-sm text-muted-foreground">
                                <MessageSquare className="h-4 w-4" />
                                <span>{d.replies_count}</span>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </>
    );
}

DiscussionsIndex.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={[]}>{page}</AppLayout>;