feat: progressbar everywhere

src/components/ui/cover.tsx

@@ -44,19 +44,19 @@ export function Cover(props: CoverProps) {
   } = props;
 
   const imageUrl = getImageUrl(type, id);
-
+  
   const showProgress = () => {
     if (type === "book") {
       const { currentPage, totalPages } = props;
       return currentPage && totalPages && currentPage > 0 && !isCompleted ? (
-        <ProgressBar progress={currentPage} total={totalPages} />
+        <ProgressBar progress={currentPage} total={totalPages} type="book" />
       ) : null;
     }
     
     if (type === "series") {
       const { readBooks, totalBooks } = props;
       return readBooks && totalBooks && readBooks > 0 && !isCompleted ? (
-        <ProgressBar progress={readBooks} total={totalBooks} />
+        <ProgressBar progress={readBooks} total={totalBooks} type="series" />
       ) : null;
     }
   };

src/components/ui/progress-bar.tsx

@@ -1,16 +1,20 @@
 interface ProgressBarProps {
   progress: number;
   total: number;
+  type: "series" | "book";
 }
 
-export function ProgressBar({ progress, total }: ProgressBarProps) {
+export function ProgressBar({ progress, total, type }: ProgressBarProps) {
   const percentage = Math.round((progress / total) * 100);
   
+  const barColor = type === "series" 
+    ? "bg-gradient-to-r from-purple-500 to-pink-500" 
+    : "bg-gradient-to-r from-blue-500 to-cyan-500";
   return (
     <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-black/50 backdrop-blur-sm border-t border-white/10">
       <div className="h-2 bg-white/30 rounded-full overflow-hidden">
         <div
-          className="h-full bg-white rounded-full transition-all duration-300"
+          className={`h-full transition-all duration-300 ${barColor}`}
           style={{ width: `${percentage}%` }}
         />
       </div>