From 365d0b37a4d286c10f85db2be9f6cf31295add7e Mon Sep 17 00:00:00 2001 From: zozzzC Date: Wed, 24 Jul 2024 14:19:48 +1200 Subject: [PATCH 01/22] :bricks: moved FAQ to its own component --- next/components/feedback/ActiveSection.tsx | 40 ++++++++++------------ next/components/feedback/FAQ.tsx | 24 +++++++++++++ 2 files changed, 42 insertions(+), 22 deletions(-) create mode 100644 next/components/feedback/FAQ.tsx diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index 2a66e20..b9c0924 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -1,6 +1,5 @@ "use client"; import { useState } from "react"; -import { IoChevronDown } from "react-icons/io5"; export default function ActiveSection({ data, @@ -15,30 +14,27 @@ export default function ActiveSection({ const QAs = data.QuestionAnswer; const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ"); + if (activeSection == "FAQ") { + console.log("FAQ"); + } else { + console.log("Contact"); + } + return (
- - -
-
-

Frequently Asked Questions

-
- {QAs.map((QA) => { - return ( -
-
{QA.Answer}
- -

{QA.Question}

- - -
- ); - })} -
+ +
); diff --git a/next/components/feedback/FAQ.tsx b/next/components/feedback/FAQ.tsx new file mode 100644 index 0000000..c4fe204 --- /dev/null +++ b/next/components/feedback/FAQ.tsx @@ -0,0 +1,24 @@ +"use client"; +import { IoChevronDown } from "react-icons/io5"; + +export default function FAQ() { +
+

Frequently Asked Questions

+
+ {QAs.map((QA) => { + return ( +
+
{QA.Answer}
+ +

{QA.Question}

+ + +
+ ); + })} +
+
; +} From db9afe41e6499be0cb8d9f2bf2ed191aa88a7362 Mon Sep 17 00:00:00 2001 From: zozzzC Date: Wed, 24 Jul 2024 15:12:12 +1200 Subject: [PATCH 02/22] :memo: removed Frequently Asked Questions from feedback page --- next/app/feedback/page.tsx | 33 ++------------------------------ next/components/feedback/FAQ.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 33 deletions(-) diff --git a/next/app/feedback/page.tsx b/next/app/feedback/page.tsx index 642c415..f6c70ca 100644 --- a/next/app/feedback/page.tsx +++ b/next/app/feedback/page.tsx @@ -1,8 +1,7 @@ -import FeedbackForm from "@/components/feedback/FeedbackForm"; +import ActiveSection from "@/components/feedback/ActiveSection"; import Header from "@/components/header/header"; import { feedbackPageSchema } from "@/schemas/single/FeedbackPage"; import fetchStrapi from "@/util/strapi"; -import { IoChevronDown } from "react-icons/io5"; export default async function Feedback() { const data = await fetchStrapi("faq-page", feedbackPageSchema); @@ -58,35 +57,7 @@ export default async function Feedback() { -
-
-

FAQ

-

& Contact

-
-
-

- Frequently Asked Questions -

-
- {QAs.map((QA) => { - return ( -
-
{QA.Answer}
- -

{QA.Question}

- - -
- ); - })} -
-

Contact Form

- -
-
+ ); } diff --git a/next/components/feedback/FAQ.tsx b/next/components/feedback/FAQ.tsx index c4fe204..f28a754 100644 --- a/next/components/feedback/FAQ.tsx +++ b/next/components/feedback/FAQ.tsx @@ -1,7 +1,10 @@ -"use client"; import { IoChevronDown } from "react-icons/io5"; -export default function FAQ() { +export default function FAQ({ + QAs, +}: { + QAs: { Question: string; Answer: string }[]; +}) {

Frequently Asked Questions

From 1f3d51023afd94e6104086515ec7f7f007ff9b75 Mon Sep 17 00:00:00 2001 From: zozzzC Date: Wed, 24 Jul 2024 15:36:19 +1200 Subject: [PATCH 03/22] :sparkles: added conditional rendering for FAQ and Feedback Form in ActiveSection component --- next/components/feedback/ActiveSection.tsx | 9 ++--- next/components/feedback/FAQ.tsx | 39 ++++++++++++---------- next/components/feedback/FeedbackForm.tsx | 2 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index b9c0924..133c362 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -1,5 +1,7 @@ "use client"; import { useState } from "react"; +import FAQ from "./FAQ"; +import FeedbackForm from "./FeedbackForm"; export default function ActiveSection({ data, @@ -14,12 +16,6 @@ export default function ActiveSection({ const QAs = data.QuestionAnswer; const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ"); - if (activeSection == "FAQ") { - console.log("FAQ"); - } else { - console.log("Contact"); - } - return (
@@ -36,6 +32,7 @@ export default function ActiveSection({ Contact
+
{activeSection == "FAQ" ? : }
); } diff --git a/next/components/feedback/FAQ.tsx b/next/components/feedback/FAQ.tsx index f28a754..92586d2 100644 --- a/next/components/feedback/FAQ.tsx +++ b/next/components/feedback/FAQ.tsx @@ -5,23 +5,26 @@ export default function FAQ({ }: { QAs: { Question: string; Answer: string }[]; }) { -
-

Frequently Asked Questions

-
- {QAs.map((QA) => { - return ( -
-
{QA.Answer}
- -

{QA.Question}

- - -
- ); - })} + return ( +
+

Frequently Asked Questions

+
+ {QAs.map((QA) => { + return ( +
+
{QA.Answer}
+ +

{QA.Question}

+ + +
+ ); + })} +
-
; + ); + } diff --git a/next/components/feedback/FeedbackForm.tsx b/next/components/feedback/FeedbackForm.tsx index 7aec3fd..1427f2d 100644 --- a/next/components/feedback/FeedbackForm.tsx +++ b/next/components/feedback/FeedbackForm.tsx @@ -1,6 +1,6 @@ export default function FeedbackForm() { async function handleSubmit(data: FormData) { - "use server"; + "use client"; const name = data.get("name"); const email = data.get("email"); const message = data.get("message"); From 4901cffa6efabdfec6e9e39dd55c8d009e5a0d93 Mon Sep 17 00:00:00 2001 From: zozzzC Date: Wed, 24 Jul 2024 16:55:22 +1200 Subject: [PATCH 04/22] :lipstick: fixed styling of feedback form component to fit with design --- next/components/feedback/ActiveSection.tsx | 4 +- next/components/feedback/FAQ.tsx | 3 +- next/components/feedback/FeedbackForm.tsx | 56 +++++++++++----------- 3 files changed, 33 insertions(+), 30 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index 133c362..cc9911e 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -32,7 +32,9 @@ export default function ActiveSection({ Contact
-
{activeSection == "FAQ" ? : }
+
+ {activeSection == "FAQ" ? : } +
); } diff --git a/next/components/feedback/FAQ.tsx b/next/components/feedback/FAQ.tsx index 92586d2..982f2cd 100644 --- a/next/components/feedback/FAQ.tsx +++ b/next/components/feedback/FAQ.tsx @@ -13,8 +13,7 @@ export default function FAQ({ return (
+ className=" bg-white rounded-md text-b-dark-blue w-full">
{QA.Answer}

{QA.Question}

diff --git a/next/components/feedback/FeedbackForm.tsx b/next/components/feedback/FeedbackForm.tsx index 1427f2d..5c3bace 100644 --- a/next/components/feedback/FeedbackForm.tsx +++ b/next/components/feedback/FeedbackForm.tsx @@ -13,36 +13,38 @@ export default function FeedbackForm() { } return ( -
- - - - - - + <> + + + + + + + +
- + ); } From ce707210fa518e3e324b7a35dec74c7205d03aa8 Mon Sep 17 00:00:00 2001 From: Hayley Sharpe Date: Wed, 24 Jul 2024 21:52:41 +1200 Subject: [PATCH 05/22] :memo: create handleClick function, swap active page based on state --- next/components/feedback/ActiveSection.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index cc9911e..1a2469a 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -16,18 +16,26 @@ export default function ActiveSection({ const QAs = data.QuestionAnswer; const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ"); + function handleClick() { + // added this fn + if (activeSection == "Contact") setActiveSection("FAQ"); + else { + setActiveSection("Contact"); + } + } + return (
From 6110e98f3433e6829cb1db75f144da6dcecbd4af Mon Sep 17 00:00:00 2001 From: Hayley Sharpe Date: Fri, 26 Jul 2024 20:01:44 +1200 Subject: [PATCH 06/22] :lipstick: implement FAQ/Contact labels swapping over --- next/components/feedback/ActiveSection.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index 1a2469a..dcc0488 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -15,12 +15,19 @@ export default function ActiveSection({ }) { const QAs = data.QuestionAnswer; const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ"); + const [top_label, setTopLabel] = useState<"FAQ" | "Contact">("FAQ"); + const [bottom_label, setBottomLabel] = useState<"FAQ" | "Contact">("Contact"); function handleClick() { // added this fn - if (activeSection == "Contact") setActiveSection("FAQ"); - else { + if (activeSection == "Contact") { + setActiveSection("FAQ"); + setTopLabel("FAQ"); + setBottomLabel("Contact"); + } else { setActiveSection("Contact"); + setTopLabel("Contact"); + setBottomLabel("FAQ"); } } @@ -28,16 +35,16 @@ export default function ActiveSection({
From 385454441ec43868508068466dace082586d759b Mon Sep 17 00:00:00 2001 From: Hayley Sharpe Date: Fri, 26 Jul 2024 22:43:05 +1200 Subject: [PATCH 07/22] :memo: changing implementation of text switching --- next/components/feedback/ActiveSection.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index dcc0488..a499e0a 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -15,19 +15,13 @@ export default function ActiveSection({ }) { const QAs = data.QuestionAnswer; const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ"); - const [top_label, setTopLabel] = useState<"FAQ" | "Contact">("FAQ"); - const [bottom_label, setBottomLabel] = useState<"FAQ" | "Contact">("Contact"); function handleClick() { // added this fn if (activeSection == "Contact") { setActiveSection("FAQ"); - setTopLabel("FAQ"); - setBottomLabel("Contact"); } else { setActiveSection("Contact"); - setTopLabel("Contact"); - setBottomLabel("FAQ"); } } @@ -38,13 +32,13 @@ export default function ActiveSection({ className="uppercase font-bold text-7xl mb-2" onClick={() => setActiveSection(activeSection)} // changed this to activeSection > - {top_label} + {activeSection == "FAQ" ? "FAQ" : "Contact"}
From a7b409df8b4c2d2f08391bba316a6c965cfc9d23 Mon Sep 17 00:00:00 2001 From: zozzzC Date: Wed, 31 Jul 2024 10:57:28 +1200 Subject: [PATCH 08/22] :wrench: added animation for fadeIn to tailwind config --- next/components/feedback/ActiveSection.tsx | 4 ++-- next/components/feedback/FAQ.tsx | 3 ++- next/tailwind.config.js | 6 ++++++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index a499e0a..5a3c8de 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -29,13 +29,13 @@ export default function ActiveSection({
@@ -47,7 +48,7 @@ export default function ActiveSection({ {activeSection == "FAQ" ? "Contact" : "FAQ"}
-
+
{activeSection == "FAQ" ? : }
From 349ae2268d4e4212784c40f4aec253d3dbc3159a Mon Sep 17 00:00:00 2001 From: zozzzC Date: Wed, 31 Jul 2024 13:29:13 +1200 Subject: [PATCH 11/22] :zap: remove click ability ffor selected section --- next/components/feedback/ActiveSection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index 0a0134d..4bee264 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -36,7 +36,6 @@ export default function ActiveSection({
Selection arrow @@ -56,7 +54,7 @@ export default function ActiveSection({ className={ "text-b-dark-blue ml-5 uppercase text-4xl font-bold " + style } - onClick={() => handleClick()} // changed this to handleClick + onClick={() => handleClick()} > {activeSection == "FAQ" ? "Contact" : "FAQ"} From c1329e392c601d88a0ffb495c52df1b2de9a8fab Mon Sep 17 00:00:00 2001 From: zozzzC Date: Wed, 31 Jul 2024 14:36:35 +1200 Subject: [PATCH 16/22] :lipstick: change transition timing to be faster --- next/components/feedback/ActiveSection.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index 79ae27d..bfc43d3 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -1,9 +1,9 @@ "use client"; +import selectionArrow from "@/assets/feedback/selectionArrow.png"; +import Image from "next/image"; import { useState } from "react"; import FAQ from "./FAQ"; -import Image from "next/image"; import FeedbackForm from "./FeedbackForm"; -import selectionArrow from "@/assets/feedback/selectionArrow.png"; export default function ActiveSection({ data, @@ -20,7 +20,7 @@ export default function ActiveSection({ const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ"); function handleClick() { - setStyle("opacity-0 animate-[fadeOut_1s_ease-in]"); + setStyle("opacity-0 animate-[fadeOut_0.3s_ease-in]"); setTimeout(() => { if (activeSection == "Contact") { @@ -28,11 +28,11 @@ export default function ActiveSection({ } else { setActiveSection("Contact"); } - }, 1000); + }, 300); setTimeout(() => { - setStyle("animate-[fadeIn_1s_ease-in]"); - }, 1000); + setStyle("animate-[fadeIn_0.3s_ease-in]"); + }, 300); } return ( From 5c324be0ec296504e374473e8b3bcda813c0f9f6 Mon Sep 17 00:00:00 2001 From: zozzzC Date: Fri, 2 Aug 2024 20:56:22 +1200 Subject: [PATCH 17/22] :zap: change style state to boolean --- next/components/feedback/ActiveSection.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index bfc43d3..a3cf1f1 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -16,11 +16,11 @@ export default function ActiveSection({ }; }) { const QAs = data.QuestionAnswer; - const [style, setStyle] = useState(); + const [styleClick, setStyleClick] = useState(); const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ"); function handleClick() { - setStyle("opacity-0 animate-[fadeOut_0.3s_ease-in]"); + setStyleClick(true); setTimeout(() => { if (activeSection == "Contact") { @@ -31,7 +31,7 @@ export default function ActiveSection({ }, 300); setTimeout(() => { - setStyle("animate-[fadeIn_0.3s_ease-in]"); + setStyleClick(false); }, 300); } @@ -39,7 +39,7 @@ export default function ActiveSection({
-
- Selection arrow +
+
+
+ Selection arrow + +
From 2376af2da60c275081824ccd3eccec91fba70d5b Mon Sep 17 00:00:00 2001 From: zozzzC Date: Sat, 3 Aug 2024 18:49:44 +1200 Subject: [PATCH 19/22] :lipstick: move margin to div --- next/components/feedback/ActiveSection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index 755060a..a4e1fee 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -38,9 +38,9 @@ export default function ActiveSection({ return (
-
+
-
+
{activeSection == "FAQ" ? : }
From 4905f04ec8563e2cf571d74fa9edf8eda299eda1 Mon Sep 17 00:00:00 2001 From: zozzzC Date: Sun, 4 Aug 2024 10:58:03 +1200 Subject: [PATCH 21/22] :lipstick: change absolute positioning of svg to fixed --- next/app/feedback/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/next/app/feedback/page.tsx b/next/app/feedback/page.tsx index f6c70ca..19cdabf 100644 --- a/next/app/feedback/page.tsx +++ b/next/app/feedback/page.tsx @@ -8,14 +8,14 @@ export default async function Feedback() { const QAs = data.QuestionAnswer; return ( -
+
{/* @ts-ignore */}
Date: Sun, 4 Aug 2024 12:33:24 +1200 Subject: [PATCH 22/22] :bug: ensure animation doesn't reset to avoid flickering --- next/components/feedback/ActiveSection.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx index fc727a2..e7929c5 100644 --- a/next/components/feedback/ActiveSection.tsx +++ b/next/components/feedback/ActiveSection.tsx @@ -28,19 +28,18 @@ export default function ActiveSection({ } else { setActiveSection("Contact"); } - }, 300); - - setTimeout(() => { setStyleClick(false); }, 300); } return ( -
+
-
+
{activeSection == "FAQ" ? : }