generated from muhtadeetaron/nextjs-template
96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
|
import {
|
|
Bookmark,
|
|
BookmarkCheck,
|
|
Check,
|
|
ListFilter,
|
|
MoveLeft,
|
|
OctagonX,
|
|
} 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} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</BackgroundWrapper>
|
|
);
|
|
};
|
|
|
|
export default BookmarkPage;
|