Module Update

src/modules/textbooks/components/textbook-card.tsx

@@ -0,0 +1,75 @@
+import Link from "next/link";
+import { GraduationCap, Building2, BookOpen } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/shared/components/ui/card";
+import { Badge } from "@/shared/components/ui/badge";
+import { cn } from "@/shared/lib/utils";
+import { Textbook } from "../types";
+
+interface TextbookCardProps {
+  textbook: Textbook;
+}
+
+export function TextbookCard({ textbook }: TextbookCardProps) {
+  return (
+    <Link href={`/teacher/textbooks/${textbook.id}`} className="block h-full">
+      <Card
+        className={cn(
+          "group h-full overflow-hidden transition-all duration-300 ease-out",
+          "hover:-translate-y-1 hover:shadow-md hover:border-primary/50"
+        )}
+      >
+        <div className="relative aspect-[4/3] w-full overflow-hidden bg-muted/30 p-6 flex items-center justify-center">
+          {/* Fallback Cover Visualization */}
+          <div className="relative z-10 flex h-24 w-20 flex-col items-center justify-center rounded-sm bg-background shadow-sm border transition-transform duration-300 group-hover:scale-110">
+            <div className="h-full w-full bg-gradient-to-br from-primary/10 to-primary/5 p-2">
+              <div className="h-1 w-full rounded-full bg-primary/20 mb-1" />
+              <div className="h-1 w-2/3 rounded-full bg-primary/20" />
+            </div>
+          </div>
+          
+          {/* Decorative Background Pattern */}
+          <div className="absolute inset-0 bg-grid-black/[0.02] dark:bg-grid-white/[0.02]" />
+        </div>
+
+        <CardHeader className="p-4 pb-2">
+          <div className="flex items-start justify-between gap-2">
+            <div className="space-y-1">
+              <Badge variant="outline" className="w-fit text-[10px] h-5 px-1.5 font-normal border-primary/20 text-primary bg-primary/5">
+                {textbook.subject}
+              </Badge>
+              <CardTitle className="line-clamp-2 text-base leading-tight">
+                {textbook.title}
+              </CardTitle>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="p-4 pt-0 text-sm text-muted-foreground">
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center gap-2 text-xs">
+              <GraduationCap className="h-3.5 w-3.5 text-muted-foreground/70" />
+              <span>{textbook.grade}</span>
+            </div>
+            <div className="flex items-center gap-2 text-xs">
+              <Building2 className="h-3.5 w-3.5 text-muted-foreground/70" />
+              <span className="line-clamp-1">{textbook.publisher || "Unknown Publisher"}</span>
+            </div>
+          </div>
+        </CardContent>
+
+        <CardFooter className="p-4 pt-0 mt-auto">
+          <div className="flex items-center gap-2 text-xs text-muted-foreground/80 bg-muted/30 px-2 py-1 rounded-md w-full">
+            <BookOpen className="h-3.5 w-3.5" />
+            <span>{textbook._count?.chapters || 0} Chapters</span>
+          </div>
+        </CardFooter>
+      </Card>
+    </Link>
+  );
+}