diff options
Diffstat (limited to 'src/components/ChannelCard')
| -rw-r--r-- | src/components/ChannelCard/ChannelCard.tsx | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/src/components/ChannelCard/ChannelCard.tsx b/src/components/ChannelCard/ChannelCard.tsx new file mode 100644 index 0000000..83471f2 --- /dev/null +++ b/src/components/ChannelCard/ChannelCard.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import Image from 'next/image'; + +type ChannelCardProps = { + channel_id: string; + name: string; + avatarUrl: string; + subscriberCount: number; + videoCount: number; + viewCount: number; + suborg?: string; + nextMilestone: string; + nextMilestoneDays: string; + nextMilestoneDate: string; +}; + +const ChannelCard: React.FC<ChannelCardProps> = ({ + channel_id, + name, + avatarUrl, + subscriberCount, + videoCount, + viewCount, + suborg, + nextMilestone, + nextMilestoneDays, + nextMilestoneDate, +}) => { + return ( + <div className="max-w-4xl w-full mb-4 mt-4 rounded-xl overflow-hidden shadow-lg bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 p-4 sm:p-8 hover:shadow-2xl transition-all duration-300"> + <div className="flex flex-col sm:flex-row items-center mb-6"> + <Image + src={avatarUrl} + alt={name} + width={80} + height={80} + className="rounded-full border-4 border-white" + /> + <div className="mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left"> + <h3 className="text-xl sm:text-2xl font-bold text-white"> + {name} + </h3> + {suborg && ( + <p className="text-sm sm:text-md text-gray-400"> + {suborg} + </p> + )} + </div> + </div> + <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 text-center mb-6"> + <div> + <p className="text-lg sm:text-xl font-bold text-white"> + {subscriberCount.toLocaleString()} + </p> + <p className="text-xs sm:text-sm text-gray-400"> + Subscribers + </p> + </div> + <div> + <p className="text-lg sm:text-xl font-bold text-white"> + {videoCount.toLocaleString()} + </p> + <p className="text-xs sm:text-sm text-gray-400"> + Videos + </p> + </div> + <div> + <p className="text-lg sm:text-xl font-bold text-white"> + {viewCount.toLocaleString()} + </p> + <p className="text-xs sm:text-sm text-gray-400"> + Views + </p> + </div> + </div> + <div className="bg-gray-700 rounded-lg p-4 mb-6"> + <p className="text-md sm:text-lg font-semibold text-white"> + Next Milestone: {Number(nextMilestone).toLocaleString()} + </p> + <p className="text-xs sm:text-sm text-gray-300"> + Estimated in {nextMilestoneDays} days ({nextMilestoneDate}) + </p> + </div> + <button + onClick={() => console.log(`Navigate to channel ${channel_id}`)} + className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200" + > + View Channel on YouTube + </button> + </div> + ); +}; + +export default ChannelCard;
\ No newline at end of file |