diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ChannelCard/ChannelCard.tsx | 72 |
1 files changed, 39 insertions, 33 deletions
diff --git a/src/components/ChannelCard/ChannelCard.tsx b/src/components/ChannelCard/ChannelCard.tsx index df7ccd0..7a41c22 100644 --- a/src/components/ChannelCard/ChannelCard.tsx +++ b/src/components/ChannelCard/ChannelCard.tsx @@ -13,9 +13,9 @@ type ChannelCardProps = { nextMilestone: string; nextMilestoneDays: string; nextMilestoneDate: string; - diff_1d: number; - diff_7d: number; - diff_30d: number; + diff_1d?: number; + diff_7d?: number; + diff_30d?: number; }; const ChannelCard: React.FC<ChannelCardProps> = ({ @@ -75,36 +75,42 @@ const ChannelCard: React.FC<ChannelCardProps> = ({ </p> <p className="text-xs sm:text-sm text-gray-400">Views</p> </div> - <div> - <p className="text-lg sm:text-xl font-bold text-white"> - {diff_1d > 0 - ? `+${diff_1d.toLocaleString()}` - : diff_1d.toLocaleString()} - </p> - <p className="text-xs sm:text-sm text-gray-400"> - 24 Hour Change - </p> - </div> - <div> - <p className="text-lg sm:text-xl font-bold text-white"> - {diff_7d > 0 - ? `+${diff_7d.toLocaleString()}` - : diff_7d.toLocaleString()} - </p> - <p className="text-xs sm:text-sm text-gray-400"> - 7 Day Change - </p> - </div> - <div> - <p className="text-lg sm:text-xl font-bold text-white"> - {diff_30d > 0 - ? `+${diff_30d.toLocaleString()}` - : diff_30d.toLocaleString()} - </p> - <p className="text-xs sm:text-sm text-gray-400"> - 30 Day Change - </p> - </div> + {typeof diff_1d === "number" && ( + <div> + <p className="text-lg sm:text-xl font-bold text-white"> + {diff_1d > 0 + ? `+${diff_1d.toLocaleString()}` + : diff_1d.toLocaleString()} + </p> + <p className="text-xs sm:text-sm text-gray-400"> + 24 Hour Change + </p> + </div> + )} + {typeof diff_7d === "number" && ( + <div> + <p className="text-lg sm:text-xl font-bold text-white"> + {diff_7d > 0 + ? `+${diff_7d.toLocaleString()}` + : diff_7d.toLocaleString()} + </p> + <p className="text-xs sm:text-sm text-gray-400"> + 7 Day Change + </p> + </div> + )} + {typeof diff_30d === "number" && ( + <div> + <p className="text-lg sm:text-xl font-bold text-white"> + {diff_30d > 0 + ? `+${diff_30d.toLocaleString()}` + : diff_30d.toLocaleString()} + </p> + <p className="text-xs sm:text-sm text-gray-400"> + 30 Day Change + </p> + </div> + )} </div> <div className="bg-gray-700 rounded-lg text-center p-4 sm:p-0 mb-6"> <p className="text-md sm:text-lg font-semibold text-white"> |