hh

Author: gottasellemall69

components/Sports/SelectedCards/CardGrid.tsx

@@ -4,11 +4,11 @@ import CardGridItem from '@/components/Sports/SelectedCards/CardGridItem';
 
 interface CardGridProps {
   cards: SelectedCard[];
-  onRemoveCard: (cardId: string) => void;
+  onRemoveCard: ( cardId: string ) => void;
 }
 
-const CardGrid: React.FC<CardGridProps> = ({ cards, onRemoveCard }) => {
-  if (cards.length === 0) {
+const CardGrid: React.FC<CardGridProps> = ( { cards, onRemoveCard } ) => {
+  if ( cards.length === 0 ) {
     return (
       <div className="text-center p-8">
         <p className="text-gray-300 text-lg">No cards selected yet</p>
@@ -18,10 +18,10 @@ const CardGrid: React.FC<CardGridProps> = ({ cards, onRemoveCard }) => {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-      {cards.map((card) => (
+    <div className="min-h-screen mx-auto w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+      {cards.map( ( card ) => (
         <CardGridItem key={card.id} card={card} onRemove={onRemoveCard} />
-      ))}
+      ) )}
     </div>
   );
 };

components/Sports/SelectedCards/CardGridItem.tsx

@@ -4,40 +4,40 @@ import { formatDate } from '@/utils/dateUtils';
 
 interface CardGridItemProps {
   card: SelectedCard;
-  onRemove: (cardId: string) => void;
+  onRemove: ( cardId: string ) => void;
 }
 
-const CardGridItem: React.FC<CardGridItemProps> = ({ card, onRemove }) => {
+const CardGridItem: React.FC<CardGridItemProps> = ( { card, onRemove } ) => {
   return (
-    <div className="bg-transparent glass rounded-lg shadow-lg overflow-hidden">
+    <div className="bg-black/60 glass rounded-lg shadow-lg overflow-hidden">
       <div className="p-4">
         <div className="flex justify-between items-start">
           <h3 className="text-lg font-semibold text-white">{card.productName}</h3>
           <button
-            onClick={() => onRemove(card.id)}
+            onClick={() => onRemove( card.id )}
             className="text-red-400 hover:text-red-300 transition-colors"
           >
             ✕
           </button>
         </div>
-        
+
         <div className="mt-4 space-y-2">
           <div className="grid grid-cols-2 gap-2 text-sm">
             <div className="text-gray-100">Set:</div>
             <div className="text-white">{card.consoleUri}</div>
-            
+
             <div className="text-gray-100">Ungraded:</div>
             <div className="text-white">{card.price1}</div>
-            
+
             <div className="text-gray-100">PSA 9:</div>
             <div className="text-white">{card.price3}</div>
-            
+
             <div className="text-gray-100">PSA 10:</div>
             <div className="text-white">{card.price2}</div>
           </div>
-          
+
           <div className="text-xs text-gray-100 mt-2">
-            Added: {formatDate(card.dateAdded)}
+            Added: {formatDate( card.dateAdded )}
           </div>
         </div>
       </div>

components/Sports/SportsTable.tsx

@@ -18,7 +18,7 @@ interface SportsTableProps {
 
 const formatPrice = ( value: string | number | null | undefined ) => {
   if ( value === null || value === undefined ) {
-    return 'N/A';
+    return '0.00';
   }
 
   if ( typeof value === 'number' ) {
@@ -79,14 +79,14 @@ const SportsTable: React.FC<SportsTableProps> = ( {
 
   if ( !isLoading && flatData.length === 0 ) {
     return (
-      <div className="w-full py-8 text-center">
+      <div className="min-h-screen mx-auto w-full py-8 text-center">
         <p className="text-white">No cards available for this set.</p>
       </div>
     );
   }
 
   return (
-    <div className="h-full mx-auto w-full max-w-7xl space-y-6 px-2 sm:px-4">
+    <div className="min-h-screen mx-auto w-full max-w-7xl space-y-6 px-2 sm:px-4">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <SportsCSVButton sportsData={sportsData} />
         {showPagination && <div className="w-fit mx-auto">{renderPagination()}</div>}
@@ -147,7 +147,7 @@ const SportsTable: React.FC<SportsTableProps> = ( {
       </div>
 
       <div className="hidden md:block">
-        <div className="table-container overflow-hidden">
+        <div className="table-container h-[40%] overflow-hidden">
           <div className="overflow-x-auto">
             <table className="glass text-shadow font-black min-w-full divide-y divide-white/10 text-left text-sm text-white">
               <thead className="bg-transparent backdrop text-xs uppercase tracking-wide text-white/60">
@@ -158,7 +158,7 @@ const SportsTable: React.FC<SportsTableProps> = ( {
                     sortKey="consoleUri"
                     onSort={handleSort}
                     getSortIcon={getSortIcon}
-                    className="hidden lg:table-cell"
+                    className="lg:table-cell"
                   />
                   <TableHeader title="Ungraded" sortKey="price1" onSort={handleSort} getSortIcon={getSortIcon} />
                   <TableHeader title="PSA 9" sortKey="price3" onSort={handleSort} getSortIcon={getSortIcon} />