refactor: clean up unused code and improve component structure

Author: Shitanshukumar607

app/collections/page.tsx

@@ -33,7 +33,7 @@ const CollectionsPage = () => {
     "recent"
   );
 
-  const limit = 2;
+  const limit = 12;
 
   useEffect(() => {
     fetchWorks(currentPage);
@@ -147,19 +147,19 @@ const CollectionsPage = () => {
       <div className="absolute top-1/3 -left-6 w-24 h-24 border border-emerald-300 dark:border-violet-400/40 rounded-full opacity-30" />
       <div className="absolute bottom-1/4 -right-8 w-20 h-20 border border-emerald-300 dark:border-violet-400/40 rotate-12 opacity-30" />
 
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
-          className="text-center mb-12"
+          className="text-center mb-8"
         >
           {/* Heading */}
           <motion.h1
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.2 }}
-            className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-neutral-100"
+            className="text-2xl sm:text-3xl font-bold mb-3 text-slate-900 dark:text-neutral-100"
           >
             My Collections
           </motion.h1>
@@ -169,7 +169,7 @@ const CollectionsPage = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.3 }}
-            className="text-slate-600 dark:text-neutral-400 mb-8"
+            className="text-slate-600 dark:text-neutral-400 mb-6 text-sm sm:text-base"
           >
             {totalCount > 0
               ? `${totalCount} work${
@@ -183,10 +183,10 @@ const CollectionsPage = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.4 }}
-            className="mb-8"
+            className="mb-4"
           >
             <Link href="/generate">
-              <Button className="gap-2 bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-violet-600 dark:hover:bg-violet-700">
+              <Button className="gap-2 bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-violet-600 dark:hover:bg-violet-700 py-2 px-4 rounded-lg">
                 <Plus className="h-4 w-4" />
                 Create New Work
               </Button>
@@ -200,15 +200,15 @@ const CollectionsPage = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.5 }}
-            className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mb-8"
+            className="flex flex-col sm:flex-row gap-3 items-start sm:items-center mb-6"
           >
             <div className="relative flex-1 max-w-md">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Search your works..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10"
+                className="pl-10 py-2"
               />
             </div>
 
@@ -271,7 +271,7 @@ const CollectionsPage = () => {
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ delay: 0.6 }}
-              className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-12"
+              className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-8"
             >
               {filteredWorks.map((work, index) => (
                 <motion.div
@@ -323,14 +323,6 @@ const CollectionsPage = () => {
             </div>
           </div>
         )}
-
-        {/* Work Viewer Modal */}
-        <WorkViewer
-          work={selectedWork}
-          isOpen={isViewerOpen}
-          onClose={handleCloseViewer}
-          onDownload={handleDownload}
-        />
       </div>
     </section>
   );

components/Collections/LoadingSkeleton.tsx

@@ -5,39 +5,39 @@ import { motion } from "framer-motion";
 export function WorkCardSkeleton() {
   return (
     <motion.div
-      initial={{ opacity: 0, scale: 0.9 }}
+      initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.4 }}
-      className="bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm border border-emerald-200/50 dark:border-violet-500/30 rounded-2xl overflow-hidden shadow-xl"
+      transition={{ duration: 0.36 }}
+      className="bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm border border-emerald-200/40 dark:border-violet-500/25 rounded-xl overflow-hidden shadow-md"
     >
       {/* Image skeleton */}
-      <div className="aspect-square bg-gradient-to-br from-slate-100 to-slate-200 dark:from-neutral-700 dark:to-neutral-800 animate-pulse relative">
+      <div className="aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 dark:from-neutral-700 dark:to-neutral-800 animate-pulse relative">
         <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 dark:via-neutral-600/20 to-transparent animate-shimmer" />
       </div>
 
       {/* Content skeleton */}
-      <div className="p-6 space-y-4">
+      <div className="p-4 space-y-3">
         {/* Title skeleton */}
-        <div className="h-6 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-xl animate-pulse relative overflow-hidden">
+        <div className="h-5 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-lg animate-pulse relative overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
         </div>
 
         {/* Description skeleton */}
-        <div className="space-y-3">
-          <div className="h-4 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-lg animate-pulse relative overflow-hidden">
+        <div className="space-y-2">
+          <div className="h-3.5 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-md animate-pulse relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
           </div>
-          <div className="h-4 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-lg animate-pulse w-3/4 relative overflow-hidden">
+          <div className="h-3.5 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-md animate-pulse w-2/3 relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
           </div>
         </div>
 
         {/* Footer skeleton */}
-        <div className="flex justify-between items-center pt-2">
-          <div className="h-5 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-full animate-pulse w-24 relative overflow-hidden">
+        <div className="flex justify-between items-center pt-1">
+          <div className="h-4 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-full animate-pulse w-20 relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
           </div>
-          <div className="h-6 bg-gradient-to-r from-emerald-200 to-emerald-300 dark:from-violet-700 dark:to-violet-600 rounded-full animate-pulse w-20 relative overflow-hidden">
+          <div className="h-5 bg-gradient-to-r from-emerald-200 to-emerald-300 dark:from-violet-700 dark:to-violet-600 rounded-full animate-pulse w-16 relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-violet-400/30 to-transparent animate-shimmer" />
           </div>
         </div>
@@ -57,42 +57,42 @@ export function CollectionsPageSkeleton() {
       <div className="absolute top-1/3 -left-6 w-24 h-24 border border-emerald-300 dark:border-violet-400/40 rounded-full opacity-30" />
       <div className="absolute bottom-1/4 -right-8 w-20 h-20 border border-emerald-300 dark:border-violet-400/40 rotate-12 opacity-30" />
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32 relative">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
         {/* Header skeleton */}
-        <div className="text-center mb-16 space-y-6">
+        <div className="text-center mb-8 space-y-4">
           {/* Badge skeleton */}
-          <div className="h-8 bg-gradient-to-r from-emerald-200 to-emerald-300 dark:from-violet-700 dark:to-violet-600 rounded-full animate-pulse w-48 mx-auto relative overflow-hidden">
+          <div className="h-7 bg-gradient-to-r from-emerald-200 to-emerald-300 dark:from-violet-700 dark:to-violet-600 rounded-full animate-pulse w-40 mx-auto relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-violet-400/30 to-transparent animate-shimmer" />
           </div>
 
           {/* Title skeleton */}
-          <div className="h-16 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-2xl animate-pulse w-96 mx-auto relative overflow-hidden">
+          <div className="h-12 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-2xl animate-pulse w-72 mx-auto relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
           </div>
 
           {/* Subtitle skeleton */}
-          <div className="h-6 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-xl animate-pulse w-80 mx-auto relative overflow-hidden">
+          <div className="h-5 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-xl animate-pulse w-64 mx-auto relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
           </div>
 
           {/* Button skeleton */}
-          <div className="h-12 bg-gradient-to-r from-emerald-200 to-emerald-300 dark:from-violet-700 dark:to-violet-600 rounded-xl animate-pulse w-48 mx-auto relative overflow-hidden">
+          <div className="h-10 bg-gradient-to-r from-emerald-200 to-emerald-300 dark:from-violet-700 dark:to-violet-600 rounded-lg animate-pulse w-40 mx-auto relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-violet-400/30 to-transparent animate-shimmer" />
           </div>
         </div>
 
         {/* Search and controls skeleton */}
-        <div className="flex flex-col sm:flex-row gap-6 items-center justify-center mb-12 max-w-4xl mx-auto">
-          <div className="flex-1 max-w-lg h-12 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-xl animate-pulse relative overflow-hidden">
+        <div className="flex flex-col sm:flex-row gap-3 items-center justify-center mb-8 max-w-3xl mx-auto">
+          <div className="flex-1 max-w-md h-10 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-lg animate-pulse relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
           </div>
-          <div className="h-12 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-xl animate-pulse w-40 relative overflow-hidden">
+          <div className="h-10 bg-gradient-to-r from-slate-200 to-slate-300 dark:from-neutral-700 dark:to-neutral-600 rounded-lg animate-pulse w-36 relative overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 dark:via-neutral-500/30 to-transparent animate-shimmer" />
           </div>
         </div>
 
         {/* Grid skeleton */}
-        <div className="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">
+        <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">
           {Array.from({ length: 8 }).map((_, i) => (
             <motion.div
               key={i}

components/Collections/Pagination.tsx

@@ -52,15 +52,15 @@ export function Pagination({
   if (totalPages <= 1) return null;
 
   return (
-    <div className="flex items-center justify-center space-x-3 bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm border border-emerald-200/50 dark:border-violet-500/30 rounded-2xl p-4 shadow-xl">
+    <div className="flex items-center justify-center space-x-2 bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm border border-emerald-200/50 dark:border-violet-500/30 rounded-2xl p-4 shadow-xl">
       <Button
         variant="outline"
-        size="lg"
+        size="default"
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage <= 1}
-        className="border-emerald-200 dark:border-violet-400/40 hover:bg-emerald-50 dark:hover:bg-violet-500/10 text-slate-700 dark:text-neutral-300 disabled:opacity-50 rounded-xl font-semibold px-6"
+        className="border-emerald-200 dark:border-violet-400/40 hover:bg-emerald-50 dark:hover:bg-violet-500/10 text-slate-700 dark:text-neutral-300 disabled:opacity-50 rounded-xl font-semibold px-4"
       >
-        <ChevronLeft className="h-5 w-5 mr-2" />
+        <ChevronLeft className="size-4 mr-1" />
         Previous
       </Button>
 
@@ -74,12 +74,12 @@ export function Pagination({
             ) : (
               <Button
                 variant={currentPage === page ? "default" : "outline"}
-                size="lg"
+                size="default"
                 onClick={() => onPageChange(page as number)}
                 className={
                   currentPage === page
-                    ? "bg-emerald-600 hover:bg-emerald-700 dark:bg-violet-600 dark:hover:bg-violet-700 text-white rounded-xl font-bold min-w-12 shadow-lg"
-                    : "border-emerald-200 dark:border-violet-400/40 hover:bg-emerald-50 dark:hover:bg-violet-500/10 text-slate-700 dark:text-neutral-300 rounded-xl font-semibold min-w-12"
+                    ? "bg-emerald-600 hover:bg-emerald-700 dark:bg-violet-600 dark:hover:bg-violet-700 text-white rounded-xl font-bold min-w-10 shadow-lg"
+                    : "border-emerald-200 dark:border-violet-400/40 hover:bg-emerald-50 dark:hover:bg-violet-500/10 text-slate-700 dark:text-neutral-300 rounded-xl font-semibold min-w-10"
                 }
               >
                 {page}
@@ -91,13 +91,13 @@ export function Pagination({
 
       <Button
         variant="outline"
-        size="lg"
+        size="default"
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage >= totalPages}
-        className="border-emerald-200 dark:border-violet-400/40 hover:bg-emerald-50 dark:hover:bg-violet-500/10 text-slate-700 dark:text-neutral-300 disabled:opacity-50 rounded-xl font-semibold px-6"
+        className="border-emerald-200 dark:border-violet-400/40 hover:bg-emerald-50 dark:hover:bg-violet-500/10 text-slate-700 dark:text-neutral-300 disabled:opacity-50 rounded-xl font-semibold px-4"
       >
         Next
-        <ChevronRight className="h-5 w-5 ml-2" />
+        <ChevronRight className="size-4 ml-1" />
       </Button>
     </div>
   );