From a643d90a2bee35f7dd1a752fd88cba85ceeb00e5 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Tue, 13 Feb 2024 16:06:19 +0100
Subject: [PATCH] chore: Add StackedCardsContainer component (#2064)

---
 .../s/[surveyId]/components/VerifyEmail.tsx   | 119 +++++++++---------
 packages/ui/StackedCardsContainer/index.tsx   |  17 +++
 2 files changed, 73 insertions(+), 63 deletions(-)
 create mode 100644 packages/ui/StackedCardsContainer/index.tsx

diff --git a/apps/web/app/s/[surveyId]/components/VerifyEmail.tsx b/apps/web/app/s/[surveyId]/components/VerifyEmail.tsx
index 217891fef9..848824eb24 100644
--- a/apps/web/app/s/[surveyId]/components/VerifyEmail.tsx
+++ b/apps/web/app/s/[surveyId]/components/VerifyEmail.tsx
@@ -8,16 +8,7 @@ import { Toaster, toast } from "react-hot-toast";
 import { TSurvey } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
-
-const StackedCardsContainer = ({ children }) => (
-  <div className="relative">
-    <div className="absolute -left-2 h-[93%] w-[98%] -rotate-6 rounded-xl border border-slate-200 bg-white opacity-40 backdrop-blur-lg"></div>
-    <div className="absolute -left-1 h-[93%] w-[98%] -rotate-3 rounded-xl border border-slate-200 bg-white opacity-70 backdrop-blur-md"></div>
-    <div className="flex flex-col items-center justify-center rounded-xl border border-slate-200 bg-white bg-opacity-70 p-16 backdrop-blur-lg">
-      {children}
-    </div>
-  </div>
-);
+import { StackedCardsContainer } from "@formbricks/ui/StackedCardsContainer";
 
 export default function VerifyEmail({
   survey,
@@ -87,61 +78,63 @@ export default function VerifyEmail({
   return (
     <div className="flex h-full w-full flex-col items-center justify-center text-center">
       <Toaster />
-      {!emailSent && !showPreviewQuestions && (
-        <StackedCardsContainer>
-          <EnvelopeIcon className="h-24 w-24 rounded-full bg-slate-300 p-6 text-white" />
-          <p className="mt-8 text-2xl font-bold lg:text-4xl">Verify your email to respond.</p>
-          <p className="mt-4 text-sm text-slate-500 lg:text-base">
-            To respond to this survey, please verify your email.
-          </p>
-          <div className="mt-6 flex w-full space-x-2">
-            <Input
-              type="string"
-              placeholder="user@gmail.com"
-              className="h-12"
-              value={email || ""}
-              onChange={(e) => setEmail(e.target.value)}
-              onKeyPress={handleKeyPress}
-            />
-            <Button variant="darkCTA" onClick={() => submitEmail(email)} loading={isLoading}>
-              Verify
+      <StackedCardsContainer>
+        {!emailSent && !showPreviewQuestions && (
+          <div>
+            <EnvelopeIcon className="mx-auto h-24 w-24 rounded-full bg-slate-300 p-6 text-white" />
+            <p className="mt-8 text-2xl font-bold lg:text-4xl">Verify your email to respond.</p>
+            <p className="mt-4 text-sm text-slate-500 lg:text-base">
+              To respond to this survey, please verify your email.
+            </p>
+            <div className="mt-6 flex w-full space-x-2">
+              <Input
+                type="string"
+                placeholder="user@gmail.com"
+                className="h-12"
+                value={email || ""}
+                onChange={(e) => setEmail(e.target.value)}
+                onKeyPress={handleKeyPress}
+              />
+              <Button variant="darkCTA" onClick={() => submitEmail(email)} loading={isLoading}>
+                Verify
+              </Button>
+            </div>
+            <p className="mt-6 cursor-pointer text-xs text-slate-400" onClick={handlePreviewClick}>
+              Just curious? <span className="underline">Preview survey questions.</span>
+            </p>
+          </div>
+        )}
+        {!emailSent && showPreviewQuestions && (
+          <div>
+            {" "}
+            <p className="text-4xl font-bold">Question Preview</p>
+            <div className="mt-4 flex w-full flex-col justify-center rounded-lg border border-slate-200 bg-slate-50 bg-opacity-20 p-8 text-slate-700">
+              {survey.questions.map((question, index) => (
+                <p key={index} className="my-1">{`${index + 1}. ${question.headline}`}</p>
+              ))}
+            </div>
+            <p className="mt-6 cursor-pointer text-xs text-slate-400" onClick={handlePreviewClick}>
+              Want to respond? <span className="underline">Verify email.</span>
+            </p>
+          </div>
+        )}
+        {emailSent && (
+          <div>
+            {" "}
+            <h1 className="mt-8 text-2xl font-bold lg:text-4xl">Check your email.</h1>
+            <p className="mt-4 text-center text-sm text-slate-400 lg:text-base">
+              We sent an email to <span className="font-semibold italic">{email}</span>. Please click the link
+              in the email to take your survey.
+            </p>
+            <Button
+              variant="secondary"
+              className="mt-6 cursor-pointer text-sm text-slate-400"
+              onClick={handleGoBackClick}>
+              Go Back
             </Button>
           </div>
-          <p className="mt-6 cursor-pointer text-xs text-slate-400" onClick={handlePreviewClick}>
-            Just curious? <span className="underline">Preview survey questions.</span>
-          </p>
-        </StackedCardsContainer>
-      )}
-      {!emailSent && showPreviewQuestions && (
-        <StackedCardsContainer>
-          {" "}
-          <p className="text-4xl font-bold">Question Preview</p>
-          <div className="mt-4 flex w-full flex-col justify-center rounded-lg border border-slate-200 bg-slate-50 bg-opacity-20 p-8 text-slate-700">
-            {survey.questions.map((question, index) => (
-              <p key={index} className="my-1">{`${index + 1}. ${question.headline}`}</p>
-            ))}
-          </div>
-          <p className="mt-6 cursor-pointer text-xs text-slate-400" onClick={handlePreviewClick}>
-            Want to respond? <span className="underline">Verify email.</span>
-          </p>
-        </StackedCardsContainer>
-      )}
-      {emailSent && (
-        <StackedCardsContainer>
-          {" "}
-          <h1 className="mt-8 text-2xl font-bold lg:text-4xl">Check your email.</h1>
-          <p className="mt-4 text-center text-sm text-slate-400 lg:text-base">
-            We sent an email to <span className="font-semibold italic">{email}</span>. Please click the link
-            in the email to take your survey.
-          </p>
-          <Button
-            variant="secondary"
-            className="mt-6 cursor-pointer text-sm text-slate-400"
-            onClick={handleGoBackClick}>
-            Go Back
-          </Button>
-        </StackedCardsContainer>
-      )}
+        )}
+      </StackedCardsContainer>
     </div>
   );
 }
diff --git a/packages/ui/StackedCardsContainer/index.tsx b/packages/ui/StackedCardsContainer/index.tsx
new file mode 100644
index 0000000000..0e6089da36
--- /dev/null
+++ b/packages/ui/StackedCardsContainer/index.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+interface StackedCardsContainerProps {
+  children: React.ReactNode;
+}
+
+export const StackedCardsContainer: React.FC<StackedCardsContainerProps> = ({ children }) => {
+  return (
+    <div className="group relative">
+      <div className="absolute -left-2 h-[89%] w-[98%] -rotate-6 rounded-xl border border-slate-200 bg-white opacity-40 backdrop-blur-lg transition-all duration-300 ease-in-out group-hover:-mt-1.5 group-hover:-rotate-[7deg]" />
+      <div className="absolute h-[93%] w-[98%] -rotate-3 rounded-xl border border-slate-200 bg-white opacity-70 backdrop-blur-md transition-all duration-200 ease-in-out group-hover:-mt-1 group-hover:-rotate-[4deg]" />
+      <div className="flex scale-[0.995] flex-col items-center justify-center rounded-xl border border-slate-200 bg-white bg-opacity-70 p-16 backdrop-blur-lg transition-all duration-200 ease-in-out group-hover:scale-[1]">
+        {children}
+      </div>
+    </div>
+  );
+};