feat: enhance subscription page layout and add scroll area for better…

… user experience
neopromic · Jan 7, 2025 · 87f778c · 87f778c
1 parent fae39f6
commit 87f778c
Showing 1 changed file with 71 additions and 57 deletions.
diff --git a/app/subscriptions/page.tsx b/app/subscriptions/page.tsx
@@ -7,6 +7,7 @@ import AcquirePlanButton from "./_components/acquire-plan-button";
 import { Badge } from "../_components/ui/badge";
 import { getCurrentMonthTransactions } from "../_data/get-current-month-transactions";
 import Header from "../_components/Header";
+import { ScrollArea } from "../_components/ui/scroll-area";
 
 const SubscriptionPage = async () => {
   const { userId } = await auth();
@@ -16,68 +17,81 @@ const SubscriptionPage = async () => {
   const user = await (await clerkClient()).users.getUser(userId);
   const currentMonthTransactions = await getCurrentMonthTransactions();
   const hasPremiumPlan = user.publicMetadata.subscriptionPlan === "premium";
+
+  const infiniteTransactionsOnFeatureSection = () => {
+    if (!hasPremiumPlan) {
+      return "10";
+    }
+    // return "∞";
+    return <span className="text-primary">∞</span>;
+  };
+
   return (
     <>
       <Header />
-      <div className="space-y-6 p-6">
-        <h1 className="text-2xl font-bold">Assinatura</h1>
-
-        <div className="flex gap-6">
-          <Card className="w-[450px]">
-            <CardHeader className="border-b border-solid py-8">
-              <h2 className="text-center text-2xl font-semibold">
-                Plano Básico
-              </h2>
-              <div className="flex items-center justify-center gap-3">
-                <span className="text-4xl">R$</span>
-                <span className="text-6xl font-semibold">0</span>
-                <div className="text-2xl text-muted-foreground">/mês</div>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-6 py-8">
-              <div className="flex items-center gap-2">
-                <CheckIcon className="text-primary" />
-                <p>
-                  Apenas 10 transações por mês ({currentMonthTransactions}/10)
-                </p>
-              </div>
-              <div className="flex items-center gap-2">
-                <XIcon />
-                <p>Relatórios de IA</p>
-              </div>
-            </CardContent>
-          </Card>
+      <ScrollArea>
+        <div className="space-y-6 p-6">
+          <h1 className="text-2xl font-bold">Assinatura</h1>
 
-          <Card className="w-[450px]">
-            <CardHeader className="relative border-b border-solid py-8">
-              {hasPremiumPlan && (
-                <Badge className="absolute left-4 top-12 bg-primary/10 text-primary">
-                  Ativo
-                </Badge>
-              )}
-              <h2 className="text-center text-2xl font-semibold">
-                Plano Premium
-              </h2>
-              <div className="flex items-center justify-center gap-3">
-                <span className="text-4xl">R$</span>
-                <span className="text-6xl font-semibold">19</span>
-                <div className="text-2xl text-muted-foreground">/mês</div>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-6 py-8">
-              <div className="flex items-center gap-2">
-                <CheckIcon className="text-primary" />
-                <p>Transações ilimitadas</p>
-              </div>
-              <div className="flex items-center gap-2">
-                <CheckIcon className="text-primary" />
-                <p>Relatórios de IA</p>
-              </div>
-              <AcquirePlanButton />
-            </CardContent>
-          </Card>
+          <div className="flex flex-col gap-6 lg:flex-row">
+            <Card className="w-md lg:w-[450px]">
+              <CardHeader className="flex flex-col items-center justify-center border-b border-solid py-8 lg:relative">
+                {hasPremiumPlan && (
+                  <Badge className="w-fit bg-primary/10 text-primary lg:absolute lg:left-4 lg:top-12">
+                    Ativo
+                  </Badge>
+                )}
+                <h2 className="text-center text-2xl font-semibold">
+                  Plano Premium
+                </h2>
+                <div className="flex items-center justify-center gap-3">
+                  <span className="text-4xl">R$</span>
+                  <span className="text-6xl font-semibold">19</span>
+                  <div className="text-2xl text-muted-foreground">/mês</div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6 py-8">
+                <div className="flex items-center gap-2">
+                  <CheckIcon className="text-primary" />
+                  <p>
+                    Transações ilimitadas ({currentMonthTransactions}/
+                    {infiniteTransactionsOnFeatureSection()})
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckIcon className="text-primary" />
+                  <p>Relatórios de IA</p>
+                </div>
+                <AcquirePlanButton />
+              </CardContent>
+            </Card>
+            <Card className="w-md lg:w-[450px]">
+              <CardHeader className="border-b border-solid py-8">
+                <h2 className="text-center text-2xl font-semibold">
+                  Plano Básico
+                </h2>
+                <div className="flex items-center justify-center gap-3">
+                  <span className="text-4xl">R$</span>
+                  <span className="text-6xl font-semibold">0</span>
+                  <div className="text-2xl text-muted-foreground">/mês</div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6 py-8">
+                <div className="flex items-center gap-2">
+                  <CheckIcon className="text-primary" />
+                  <p>
+                    Apenas 10 transações por mês ({currentMonthTransactions}/10)
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <XIcon />
+                  <p>Relatórios de IA</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
         </div>
-      </div>
+      </ScrollArea>
     </>
   );
 };