shafin808s/examjam-frontend
1
0
Fork 0
generated from muhtadeetaron/nextjs-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fix ui icons and readability

Browse Source
This commit is contained in:
shafin-r
2025-11-12 15:38:07 +06:00
parent d1947e8e6e
commit 11108ad8cf
12 changed files with 108 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
app/(tabs)/bookmark/page.tsx
View File

@ -1,64 +1,64 @@
"use client";
import React, { useState, useEffect } from "react";
import React from "react";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import { Bookmark, BookmarkCheck, ListFilter, MoveLeft } from "lucide-react";
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 Question {
// id: number;
// question: string;
// options: Record<string, string>;
// }
interface QuestionItemProps {
question: Question;
}
// 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 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[]>([]);
// 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));
}, []);
// useEffect(() => {
// fetch("/data/bookmark.json")
// .then((res) => res.json())
// .then((data) => setQuestions(data))
// .catch((err) => console.error("Error loading questions: ", err));
// }, []);
return (
<BackgroundWrapper>