@ieltsrealtest/ui
Version:
Reusable UI components for IELTS Real Test platform, built with React and TypeScript.
86 lines (85 loc) • 6.15 kB
JavaScript
/* eslint-disable @typescript-eslint/no-unused-vars */
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { FaHome, FaInfoCircle, FaUserShield, FaRegHandshake, FaPhoneAlt, FaEnvelope, FaFacebookF, FaMapMarkerAlt, FaPaperPlane, } from "react-icons/fa";
export default function Footer() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [userName, setUserName] = useState("");
const [avatar, setAvatar] = useState("");
const [feedback, setFeedback] = useState("");
useEffect(() => {
const fetchUserDetail = async (userId) => {
try {
const response = await fetch(`https://api.youready.net/ielts/user/api/profile/UserDataView/?user_id=${userId}`, {
method: "GET",
headers: { "Content-Type": "application/json" },
credentials: "include",
});
const data = await response.json();
if (response.ok) {
const fullName = `${data.data[0].first_name} ${data.data[0].last_name}`;
setUserName(fullName);
setAvatar(data.data[0].avatar || ""); // Set avatar if available
}
}
catch (error) {
setIsLoggedIn(false);
}
};
const fetchUserIdAndData = async () => {
try {
const res = await fetch(`https://api.youready.net/ielts/user/api/auth/get_user_id/`, {
method: "GET",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
});
const data = await res.json();
if (res.ok && data.user_id) {
setIsLoggedIn(true);
fetchUserDetail(data.user_id);
}
else {
setIsLoggedIn(false);
}
}
catch (error) {
setIsLoggedIn(false);
}
};
fetchUserIdAndData();
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
if (!feedback.trim())
return;
try {
const res = await fetch(`https://api.youready.net/ielts/portal/api/feedback/`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
content: feedback,
user_name: userName,
avatar: avatar,
}),
});
if (res.ok) {
alert("Thank you for your feedback!");
setFeedback("");
}
else {
const errorData = await res.json();
alert(`Error: ${errorData.message || "Could not send feedback."}`);
}
}
catch (err) {
alert("Failed to send feedback.");
}
};
return (_jsx("footer", { className: "bg-[#FFF9F1] max-lg:pb-[100px]", children: _jsxs("div", { className: "py-6 mt-12 grid grid-cols-1 gap-6 sm:gap-10 text-sm text-black", children: [_jsxs("div", { className: "flex justify-around sm:w-[40%] w-full", children: [_jsxs("div", { className: "ms-0 sm:ms-20 space-x-7", children: [_jsxs("h4", { className: "font-semibold mb-2 text-[#A11D33] flex items-center", children: [_jsx(FaInfoCircle, { className: "mr-2" }), "ABOUT US"] }), _jsxs("ul", { className: "space-y-2", children: [_jsxs("li", { className: "flex items-center", children: [_jsx(FaHome, { className: "mr-2" }), "Home"] }), _jsxs("li", { className: "flex items-center", children: [_jsx(FaInfoCircle, { className: "mr-2" }), "About us"] }), _jsxs("li", { className: "flex items-center", children: [_jsx(FaUserShield, { className: "mr-2" }), "Privacy Policy"] }), _jsxs("li", { className: "flex items-center", children: [_jsx(FaRegHandshake, { className: "mr-2" }), "Terms of Use"] }), _jsxs("li", { className: "flex items-center", children: [_jsx(FaRegHandshake, { className: "mr-2" }), "Disclaimer"] })] })] }), _jsx("div", { className: "flex justify-end", children: _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2 text-[#A11D33] flex items-center", children: "CONTACT US" }), _jsxs("ul", { className: "space-y-2", children: [_jsxs("li", { className: "flex items-center", children: [_jsx(FaPhoneAlt, { className: "mr-2" }), "Hotline"] }), _jsxs("li", { className: "flex items-center", children: [_jsx(FaEnvelope, { className: "mr-2" }), "Email"] }), _jsx("li", { children: _jsxs("a", { className: "flex items-center", href: "https://www.facebook.com/youreadyforielts", children: [_jsx(FaFacebookF, { className: "mr-2" }), "Facebook"] }) }), _jsxs("li", { className: "flex items-center", children: [_jsx(FaMapMarkerAlt, { className: "mr-2" }), "Location"] })] })] }) })] }), _jsxs("div", { className: "sm:absolute right-[100px] max-sm:px-7", children: [_jsxs("h4", { className: "font-semibold mb-2 text-[#A11D33] flex items-center", children: [_jsx(FaPaperPlane, { className: "mr-2" }), "FEEDBACK US HERE"] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col sm:flex-row space-x-0 sm:space-x-2 mt-4 sm:mt-0", children: [_jsx("input", { value: feedback, onChange: (e) => setFeedback(e.target.value), className: "w-full sm:w-72 p-2 border border-gray-300 rounded focus:outline-none focus:border-red-600 focus:bg-[#E01E374D]", placeholder: "Your feedback", type: "text" }), _jsxs("button", { type: "submit", className: "bg-red-600 text-white px-4 py-2 mt-2 sm:mt-0 rounded flex items-center disabled:opacity-50", disabled: !isLoggedIn, title: !isLoggedIn ? "Please log in to submit feedback" : "", children: [_jsx(FaPaperPlane, { className: "mr-2" }), "Submit"] })] }), _jsx("p", { className: "mt-8 sm:mt-20 text-center sm:text-left", children: "\u00A92025 IELTSTest, Inc. All rights reserved." })] })] }) }));
}