generated from muhtadeetaron/nextjs-template
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
|
import { ListFilter, MoveLeft } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import DestructibleAlert from "@/components/DestructibleAlert";
|
|
|
|
// interface Question {
|
|
// id: number;
|
|
// question: string;
|
|
// options: Record<string, string>;
|
|
// }
|
|
|
|
// interface QuestionItemProps {
|
|
// question: Question;
|
|
// }
|
|
|
|
// const QuestionItem = ({ question }: QuestionItemProps) => {
|
|
// const [bookmark, setBookmark] = useState(true);
|
|
// return (
|
|
// <div className="border border-[#8abdff]/50 rounded-2xl p-4 flex flex-col gap-7">
|
|
// <h3 className="text-xl font-medium">
|
|
// {question.id + 1}. {question.question}
|
|
// </h3>
|
|
// <div className="flex justify-between items-center">
|
|
// <div></div>
|
|
// <button onClick={() => setBookmark(!bookmark)}>
|
|
// {bookmark ? (
|
|
// <BookmarkCheck size={25} color="#113768" />
|
|
// ) : (
|
|
// <Bookmark size={25} color="#113768" />
|
|
// )}
|
|
// </button>
|
|
// </div>
|
|
// <div className="flex flex-col gap-4 items-start">
|
|
// {Object.entries(question.options).map(([key, value]) => {
|
|
// return (
|
|
// <div key={key} className="flex items-center gap-3">
|
|
// <span className="px-2 py-1 flex items-center rounded-full border font-medium text-sm">
|
|
// {key.toUpperCase()}
|
|
// </span>
|
|
// <span className="option-description">{value}</span>
|
|
// </div>
|
|
// );
|
|
// })}
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
const BookmarkPage = () => {
|
|
const router = useRouter();
|
|
// const [questions, setQuestions] = useState<Question[]>([]);
|
|
|
|
// useEffect(() => {
|
|
// fetch("/data/bookmark.json")
|
|
// .then((res) => res.json())
|
|
// .then((data) => setQuestions(data))
|
|
// .catch((err) => console.error("Error loading questions: ", err));
|
|
// }, []);
|
|
|
|
return (
|
|
<BackgroundWrapper>
|
|
<section className="min-h-screen flex flex-col justify-between">
|
|
<div className="flex-1 mb-20">
|
|
<div className="mx-8 mt-10 pb-6 space-y-6">
|
|
<button onClick={() => router.push("/home")}>
|
|
<MoveLeft size={30} color="#113768" />
|
|
</button>
|
|
<h1 className="text-4xl font-semibold text-[#113768]">Bookmark</h1>
|
|
<div className="flex justify-between">
|
|
<h3 className="text-xl font-semibold text-[#113768]">Recent</h3>
|
|
<button>
|
|
<ListFilter size={24} color="#113768" />
|
|
</button>
|
|
</div>
|
|
{/* {questions.map((question: Question) => (
|
|
<QuestionItem key={question.id} question={question} />
|
|
))} */}
|
|
<DestructibleAlert
|
|
text="Page under construction"
|
|
variant="warning"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</BackgroundWrapper>
|
|
);
|
|
};
|
|
|
|
export default BookmarkPage;
|