diff options
Diffstat (limited to 'src/components/channel-card.tsx')
| -rw-r--r-- | src/components/channel-card.tsx | 84 |
1 files changed, 0 insertions, 84 deletions
diff --git a/src/components/channel-card.tsx b/src/components/channel-card.tsx deleted file mode 100644 index c19f492..0000000 --- a/src/components/channel-card.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; -import { Badge } from "@/components/ui/badge"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; - -interface ChannelCardProps { - channel_id: string; - name: string; - avatarUrl: string; - subscriberCount: number; - videoCount: number; - viewCount: number; - suborg: string; - nextMilestone: string; - nextMilestoneDays: string; - nextMilestoneDate: string; -} - -export function ChannelCard(props: ChannelCardProps) { - const { - channel_id, - name, - avatarUrl, - subscriberCount, - videoCount, - viewCount, - suborg, - nextMilestone, - nextMilestoneDays, - nextMilestoneDate, - } = props; - return ( - <Card className="w-[500px] shadow-lg rounded-lg overflow-hidden mt-4 py-4"> - <CardHeader> - <div className="flex items-center space-x-4 p-4"> - <Avatar> - <AvatarImage src={avatarUrl} /> - <AvatarFallback>PR</AvatarFallback> - </Avatar> - <div> - <a - className="hover:underline" - href={`https://youtube.com/channel/${channel_id}`} - > - <CardTitle>{name}</CardTitle> - </a> - <Badge variant="secondary">{suborg}</Badge> - </div> - </div> - </CardHeader> - <CardContent className="px-4 py-2 space-y-4"> - <div className="flex flex-col items-center"> - <span className="text-l text-gray-600">Subscribers</span> - <span className="font-semibold"> - {Number(subscriberCount).toLocaleString()} - </span> - </div> - <div className="flex flex-col items-center"> - <span className="text-l text-gray-600">Videos</span> - <span className="font-semibold">{videoCount}</span> - </div> - <div className="flex flex-col items-center"> - <span className="text-l text-gray-600">View Count</span> - <span className="font-semibold"> - {Number(viewCount).toLocaleString()} - </span> - </div> - <div className="flex flex-col items-center"> - <span className="text-l text-gray-600">Next Milestone</span> - <span className="font-semibold"> - {Number(nextMilestone).toLocaleString()} - </span> - <div className="flex justify-center items-center"> - <span className="text-sm text-gray-600 px-2"> - {nextMilestoneDays} days - </span> - <span className="text-sm text-gray-600 px-2"> - {nextMilestoneDate} - </span> - </div> - </div> - </CardContent> - </Card> - ); -} |
