From ed7bfc57c00efc732c4d6d97f0fb9d31c7a5de08 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Mon, 24 Apr 2023 12:39:35 +0200
Subject: [PATCH] show video amount indicator for free users

---
 src/pages/videos.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 03e5766..4b49649 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -73,6 +73,22 @@ const VideoList: NextPage = () => {
             <VideoUploadModal />
             <Paywall />
 
+            {videos?.length &&
+            session?.user?.stripeSubscriptionStatus !== "active" ? (
+              <div className="mr-4 flex max-h-[35px] flex-col items-center justify-center rounded px-2 py-2 text-sm text-[#6c6685]">
+                <span>{videos.length}/10 videos</span>
+                <div className="mt-1 h-[3px] w-full rounded-full bg-gray-200">
+                  <div
+                    className={`h-[3px] w-[45%] rounded-full ${
+                      videos.length >= 7 ? "bg-red-600" : "bg-blue-600"
+                    }`}
+                    style={{
+                      width: videos.length.toString() + "0%",
+                    }}
+                  ></div>
+                </div>
+              </div>
+            ) : null}
             <NewVideoMenu />
             {status === "authenticated" && (
               <div className="ml-4 flex items-center justify-center">