feat: faqs animation

cesium · Nov 24, 2023 · 4a02761 · 4a02761
1 parent 6d472fd
commit 4a02761
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/.github/workflows/trello.yml b/.github/workflows/trello.yml
@@ -10,8 +10,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    steps: 
-      # Link PR to Trello    
+    steps:
+      # Link PR to Trello
       - name: Link to Trello
         uses: rematocorp/trello-integration-action@v7.1.0
         with:

diff --git a/layout/FAQs/components/Question/index.tsx b/layout/FAQs/components/Question/index.tsx
@@ -21,7 +21,13 @@ export default function Question({
       <h2 className="font-terminal-uppercase mb-4 text-2xl md:text-4xl">
         {title}
       </h2>
-      {showQuestion && <p>{description}</p>}
+      <div
+        className={`transition-max-height overflow-hidden duration-300 ${
+          showQuestion ? "max-h-48 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        {description && <p>{description}</p>}
+      </div>
       <div className="flex items-center justify-end">
         <Link
           href={href}
@@ -30,7 +36,7 @@ export default function Question({
           {link}
         </Link>
         <button
-          className="font-terminal-uppercase w-16 rounded-full bg-quinary px-2 text-xl text-white"
+          className="font-terminal-uppercase w-16 transform rounded-full bg-quinary px-2 text-xl text-white transition-transform duration-300 hover:scale-110"
           onClick={() =>
             setShowQuestion((prevShowQuestion) => !prevShowQuestion)
           }