@hed-hog/lms 0.0.314 → 0.0.316

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-course.tsx.ejs

@@ -1,113 +1,113 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { BookOpen, Globe, Hash, Tag } from 'lucide-react';
-import { useStructureStore } from './store';
-
-export function DetailCourse() {
-  const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
-
-  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
-  const hours = Math.floor(totalMinutes / 60);
-  const minutes = totalMinutes % 60;
-
-  return (
-    <div className="flex flex-col overflow-y-auto h-full">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
-        <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 shrink-0">
-          <BookOpen className="size-5 text-primary" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <h2 className="text-base font-semibold truncate">{course.title}</h2>
-          <p className="text-xs text-muted-foreground">{course.slug}</p>
-        </div>
-        <Badge
-          variant={course.published ? 'default' : 'secondary'}
-          className="shrink-0"
-        >
-          {course.published ? 'Publicado' : 'Rascunho'}
-        </Badge>
-      </div>
-
-      <div className="flex flex-col gap-5 p-4">
-        {/* Stats */}
-        <div className="grid grid-cols-3 gap-3">
-          <StatCard label="Sessões" value={sessions.length} />
-          <StatCard label="Aulas" value={lessons.length} />
-          <StatCard
-            label="Duração"
-            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
-          />
-        </div>
-
-        <Separator />
-
-        {/* Info */}
-        <div className="flex flex-col gap-2.5">
-          <InfoRow
-            icon={<Hash className="size-3.5" />}
-            label="Slug"
-            value={course.slug}
-          />
-          <InfoRow
-            icon={<Tag className="size-3.5" />}
-            label="Slug"
-            value={course.slug}
-          />
-          <InfoRow
-            icon={<Globe className="size-3.5" />}
-            label="Status"
-            value={course.published ? 'Publicado' : 'Rascunho'}
-          />
-        </div>
-
-        {course.description && (
-          <>
-            <Separator />
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-1.5">
-                Descrição
-              </p>
-              <p className="text-sm leading-relaxed text-foreground/90">
-                {course.description}
-              </p>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function StatCard({ label, value }: { label: string; value: string | number }) {
-  return (
-    <div className="flex flex-col items-center rounded-lg border bg-muted/30 py-3 gap-0.5">
-      <span className="text-lg font-bold tabular-nums">{value}</span>
-      <span className="text-[0.65rem] text-muted-foreground">{label}</span>
-    </div>
-  );
-}
-
-function InfoRow({
-  icon,
-  label,
-  value,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: string;
-}) {
-  return (
-    <div className="flex items-center gap-2">
-      <span className="text-muted-foreground shrink-0">{icon}</span>
-      <span className="text-xs text-muted-foreground w-14 shrink-0">
-        {label}
-      </span>
-      <span className="text-sm truncate">{value}</span>
-    </div>
-  );
-}
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { BookOpen, Globe, Hash, Tag } from 'lucide-react';
+import { useStructureStore } from './store';
+
+export function DetailCourse() {
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+
+  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  return (
+    <div className="flex flex-col overflow-y-auto h-full">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
+        <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 shrink-0">
+          <BookOpen className="size-5 text-primary" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h2 className="text-base font-semibold truncate">{course.title}</h2>
+          <p className="text-xs text-muted-foreground">{course.slug}</p>
+        </div>
+        <Badge
+          variant={course.published ? 'default' : 'secondary'}
+          className="shrink-0"
+        >
+          {course.published ? 'Publicado' : 'Rascunho'}
+        </Badge>
+      </div>
+
+      <div className="flex flex-col gap-5 p-4">
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-3">
+          <StatCard label="Sessões" value={sessions.length} />
+          <StatCard label="Aulas" value={lessons.length} />
+          <StatCard
+            label="Duração"
+            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Info */}
+        <div className="flex flex-col gap-2.5">
+          <InfoRow
+            icon={<Hash className="size-3.5" />}
+            label="Slug"
+            value={course.slug}
+          />
+          <InfoRow
+            icon={<Tag className="size-3.5" />}
+            label="Slug"
+            value={course.slug}
+          />
+          <InfoRow
+            icon={<Globe className="size-3.5" />}
+            label="Status"
+            value={course.published ? 'Publicado' : 'Rascunho'}
+          />
+        </div>
+
+        {course.description && (
+          <>
+            <Separator />
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5">
+                Descrição
+              </p>
+              <p className="text-sm leading-relaxed text-foreground/90">
+                {course.description}
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="flex flex-col items-center rounded-lg border bg-muted/30 py-3 gap-0.5">
+      <span className="text-lg font-bold tabular-nums">{value}</span>
+      <span className="text-[0.65rem] text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+function InfoRow({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <span className="text-xs text-muted-foreground w-14 shrink-0">
+        {label}
+      </span>
+      <span className="text-sm truncate">{value}</span>
+    </div>
+  );
+}