Skip to content

Commit

Permalink
Merge pull request #92 from UoaWDCC/068_switch-between-faq-and-contact
Browse files Browse the repository at this point in the history 
068 switch between faq and contact
  • Loading branch information
@zozzzC
zozzzC authored Aug 6, 2024
2 parents c399106 + bfb49fa commit 84b9c0a
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 84 deletions.
37 changes: 4 additions & 33 deletions next/app/feedback/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
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);
const QAs = data.QuestionAnswer;

return (
<div className="relative flex flex-col bg-gradient-1 min-h-screen h-full overflow-y-hidden isolate">
<div className="flex flex-col bg-gradient-1 min-h-screen h-full overflow-y-hidden isolate">
{/* @ts-ignore */}
<Header />
<svg
viewBox="0 0 1440 1027"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute bottom-0 -z-10 w-full h-96"
className="fixed bottom-0 -z-10 w-full h-96"
preserveAspectRatio="xMidYMin slice"
>
<path
Expand Down Expand Up @@ -58,35 +57,7 @@ export default async function Feedback() {
</linearGradient>
</defs>
</svg>
<div className="flex py-24 w-full max-w-5xl mx-auto gap-12">
<div className="flex flex-col items-end whitespace-nowrap">
<p className="font-bold text-7xl mb-2">FAQ</p>
<p className="uppercase text-4xl font-bold">& Contact</p>
</div>
<div className="w-full">
<h2 className="text-3xl font-bold mb-10">
Frequently Asked Questions
</h2>
<div className="flex flex-col gap-6">
{QAs.map((QA) => {
return (
<details
key={QA.Question}
className=" bg-white rounded-md text-b-dark-blue w-full"
>
<div className="p-4">{QA.Answer}</div>
<summary className="list-none cursor-pointer flex justify-between items-center border-b border-b-dark-blue p-4">
<h2>{QA.Question}</h2>
<IoChevronDown className="w-6 h-6 summary-arrow transition-transform" />
</summary>
</details>
);
})}
</div>
<h2 className="text-3xl font-bold mb-8 mt-16">Contact Form</h2>
<FeedbackForm />
</div>
</div>
<ActiveSection data={data} />
</div>
);
}
Binary file added next/assets/feedback/selectionArrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 45 additions & 23 deletions next/components/feedback/ActiveSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
"use client";
import selectionArrow from "@/assets/feedback/selectionArrow.png";
import Image from "next/image";
import { useState } from "react";
import { IoChevronDown } from "react-icons/io5";
import FAQ from "./FAQ";
import FeedbackForm from "./FeedbackForm";

export default function ActiveSection({
data,
Expand All @@ -13,33 +16,52 @@ export default function ActiveSection({
};
}) {
const QAs = data.QuestionAnswer;
const [styleClick, setStyleClick] = useState<boolean>();
const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ");

function handleClick() {
setStyleClick(true);

setTimeout(() => {
if (activeSection == "Contact") {
setActiveSection("FAQ");
} else {
setActiveSection("Contact");
}
setStyleClick(false);
}, 300);
}

return (
<div className="flex py-24 w-full max-w-5xl mx-auto gap-12">
<div className="flex flex-col items-end">
<button className="font-bold text-7xl mb-2">FAQ</button>
<button className="uppercase text-4xl font-bold">Contact</button>
</div>
<div className="w-full">
<h1 className="text-3xl font-bold mb-10">Frequently Asked Questions</h1>
<div className="flex flex-col gap-6">
{QAs.map((QA) => {
return (
<details
key={QA.Question}
className=" bg-white rounded-md text-b-dark-blue w-full"
>
<div className="p-4">{QA.Answer}</div>
<summary className="list-none cursor-pointer flex justify-between items-center border-b border-b-dark-blue p-4">
<h2>{QA.Question}</h2>
<IoChevronDown className="w-6 h-6 summary-arrow transition-transform" />
</summary>
</details>
);
})}
<div
className={`flex py-24 w-full max-w-5xl mx-auto gap-12 ${styleClick ? "animate-[fadeOut_0.3s_ease-in_forwards]" : "animate-[fadeIn_0.3s_ease-in_forwards]"}`}
>
<div className="flex flex-col">
<div className="flex flex-col items-end w-80 ml-5">
<button
className={`text-wrap uppercase font-bold text-7xl mb-2`}
disabled={true}
>
{activeSection == "FAQ" ? "FAQ" : "Contact"}
</button>
<div className="flex items-center">
<Image
src={selectionArrow}
alt="Selection arrow"
className="inline-block"
/>
<button
className="text-b-dark-blue ml-2 uppercase text-4xl font-bold"
onClick={() => handleClick()}
>
{activeSection == "FAQ" ? "Contact" : "FAQ"}
</button>
</div>
</div>
</div>
<div className="flex-1 mr-5">
{activeSection == "FAQ" ? <FAQ QAs={QAs} /> : <FeedbackForm />}
</div>
</div>
);
}
30 changes: 30 additions & 0 deletions next/components/feedback/FAQ.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { IoChevronDown } from "react-icons/io5";

export default function FAQ({
QAs,
}: {
QAs: { Question: string; Answer: string }[];
}) {
return (
<div className="w-full">
<h1 className="text-3xl font-bold mb-10">Frequently Asked Questions</h1>
<div className="flex flex-col gap-6">
{QAs.map((QA) => {
return (
<details
key={QA.Question}
className=" bg-white rounded-md text-b-dark-blue w-full"
>
<div className="p-4">{QA.Answer}</div>
<summary className="list-none cursor-pointer flex justify-between items-center border-b border-b-dark-blue p-4">
<h2>{QA.Question}</h2>
<IoChevronDown className="w-6 h-6 summary-arrow transition-transform" />
</summary>
</details>
);
})}
</div>
</div>
);

}
58 changes: 30 additions & 28 deletions next/components/feedback/FeedbackForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -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");
Expand All @@ -13,36 +13,38 @@ export default function FeedbackForm() {
}

return (
<form action={handleSubmit} className="flex flex-col">
<label className="mb-2">Name</label>
<input
name="name"
type="text"
required
placeholder="Enter your full name"
className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
/>
<label className="mb-2">Email</label>
<input
name="email"
type="email"
required
placeholder="Enter your email"
className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
/>
<label className="mb-2">Message</label>
<textarea
name="message"
required
placeholder="Enter your feedback"
className="mb-8 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
></textarea>
<>
<form action={handleSubmit} className="flex flex-col">
<label className="mb-2">Name</label>
<input
name="name"
type="text"
required
placeholder="Enter your full name"
className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
/>
<label className="mb-2">Email</label>
<input
name="email"
type="email"
required
placeholder="Enter your email"
className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
/>
<label className="mb-2">Message</label>
<textarea
name="message"
required
placeholder="Enter your feedback"
className="mb-8 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
></textarea>
</form>

<input
className="mx-auto px-12 py-3 bg-b-blue border-b-dark-blue border text-b-dark-blue rounded-md shadow-md cursor-pointer"
className="font-bold first:mx-auto px-12 py-3 bg-b-blue text-b-dark-blue rounded-full shadow-md cursor-pointer"
type="submit"
value="Submit"
value="SUBMIT"
/>
</form>
</>
);
}
10 changes: 10 additions & 0 deletions next/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@ module.exports = {
"b-orange": "#FAAB36",
"b-light-orange": "#FABD6E",
},
keyframes: {
fadeIn: {
"0%": { opacity: 0 },
"100%": { opacity: 1 },
},
fadeOut: {
"0%": { opacity: 1 },
"100%": { opacity: 0 },
},
},
},
},
plugins: [],
Expand Down

0 comments on commit 84b9c0a

Please sign in to comment.