From 20e6abb48cada5348ddf921ac778c1fd1f45d11c Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 5 Oct 2024 15:31:30 -0700
Subject: improve channel card component design

---
 src/components/ChannelCard/ChannelCard.tsx | 94 ++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/components/ChannelCard/ChannelCard.tsx

(limited to 'src/components/ChannelCard/ChannelCard.tsx')

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
-- 
cgit v1.2.3