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

1
.gitignore vendored
View File

@ -16,6 +16,7 @@
# next.js
/.next/
/out/
android
# production
/build

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>

2
app/(tabs)/categories/subjects/page.tsx
View File

@ -6,7 +6,7 @@ import Header from "@/components/Header";
import DestructibleAlert from "@/components/DestructibleAlert";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import { API_URL, getToken } from "@/lib/auth";
import { Loader, RefreshCw, Star, StarHalf } from "lucide-react";
import { Loader, RefreshCw } from "lucide-react";
import { useAuthStore } from "@/stores/authStore";
import { FaStar } from "react-icons/fa";

2
app/(tabs)/layout.tsx
View File

@ -17,7 +17,7 @@ const tabs = [
href: "/categories",
component: <HiViewGrid size={30} />,
},
{ name: "Bookmark", href: "/bookmark", component: <FaBookmark size={25} /> },
{ name: "Bookmark", href: "/bookmark", component: <FaBookmark size={23} /> },
{ name: "Settings", href: "/settings", component: <HiCog6Tooth size={30} /> },
];

56
app/(tabs)/settings/page.tsx
View File

@ -44,35 +44,39 @@ const SettingsPage = () => {
<UserCircle2 size={30} color="#113768" />
</button>
</section>
<section className="flex flex-col gap-4">
<div className="flex gap-4 items-center">
<Avatar className="bg-[#113768] w-20 h-20">
<AvatarFallback className="text-3xl text-white">
{user?.username
? user.username.charAt(0).toUpperCase()
: ""}
</AvatarFallback>
</Avatar>
<div className="flex flex-col items-start">
<h1 className="font-semibold text-2xl">{user?.full_name}</h1>
<h3 className=" text-md">{user?.email}</h3>
</div>
<section className="flex items-center gap-4 bg-blue-100 border-1 border-blue-300/40 rounded-2xl py-5 px-4">
<Avatar className="bg-[#113768] w-20 h-20">
<AvatarFallback className="text-3xl text-white">
{user?.username
? user.username.charAt(0).toUpperCase()
: "User"}
</AvatarFallback>
</Avatar>
<div className="flex flex-col items-start">
<h1 className="font-semibold text-2xl flex gap-1 items-center">
{user?.full_name}
</h1>
<h3 className=" text-md">{user?.email}</h3>
</div>
</section>
<section className="flex flex-col gap-8">
<button
onClick={() => router.push("/settings/verify")}
className="flex justify-between"
>
<div className="flex items-center gap-4">
<BadgeCheck size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Verify your account
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</button>
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
{!user?.is_verified && (
<>
<button
onClick={() => router.push("/settings/verify")}
className="flex justify-between"
>
<div className="flex items-center gap-4">
<BadgeCheck size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Verify your account
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</button>
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
</>
)}
<button
onClick={() => router.push("/profile")}
className="flex justify-between"

3
app/(tabs)/settings/verify/page.tsx
View File

@ -9,7 +9,6 @@ import {
InputOTPSlot,
} from "@/components/ui/input-otp";
import { API_URL } from "@/lib/auth";
import { useAuthStore } from "@/stores/authStore";
import Image from "next/image";
import React, { useState } from "react";
@ -17,7 +16,6 @@ const VerificationScreen = () => {
const [otp, setOtp] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const { fetchUser } = useAuthStore();
const handleVerify = async () => {
if (otp.length < 6) return;
@ -39,7 +37,6 @@ const VerificationScreen = () => {
}
// 🔥 Call zustand action to update auth state
await fetchUser();
} catch (err: any) {
setError(err.message);
} finally {

6
app/exam/exam-screen/page.tsx
View File

@ -1,7 +1,7 @@
"use client";
import React, { useEffect, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useRouter, useSearchParams } from "next/navigation";
import Header from "@/components/Header";
import QuestionItem from "@/components/QuestionItem";
import BackgroundWrapper from "@/components/BackgroundWrapper";
@ -44,6 +44,10 @@ export default function ExamPage() {
};
initExam();
return () => {
stopTimer();
};
}, [
type,
test_id,

8
app/exam/results/page.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { useRouter } from "next/navigation";
import React, { useEffect } from "react";
import React, { useCallback, useEffect } from "react";
import { ArrowLeft } from "lucide-react";
import { useExamStore } from "@/stores/examStore";
import QuestionItem from "@/components/QuestionItem";
@ -12,10 +12,10 @@ export default function ResultsPage() {
const router = useRouter();
const { result, clearResult, setStatus, status } = useExamStore();
function handleBackToHome() {
const handleBackToHome = useCallback(() => {
clearResult();
router.replace("/categories");
}
}, [clearResult, router]);
useEffect(() => {
const handlePopState = () => {
@ -28,7 +28,7 @@ export default function ResultsPage() {
return () => {
window.removeEventListener("popstate", handlePopState);
};
}, [status, router, setStatus]);
}, [status, router, setStatus, handleBackToHome]);
if (!result) {
return (

5
capacitor.config.ts
View File

@ -1,10 +1,9 @@
// capacitor.config.ts
import { CapacitorConfig } from "@capacitor/cli";
import type { CapacitorConfig } from "@capacitor/cli";
const config: CapacitorConfig = {
appId: "com.examjam.omukk",
appName: "ExamJam",
webDir: "out", // ✅ point to your Next.js static export
webDir: "out",
};
export default config;

25
components/ExamGuard.tsx
View File

@ -1,25 +0,0 @@
"use client";
import { useNavStore } from "@/stores/navStore";
import { useRouter, usePathname } from "next/navigation";
import { useEffect } from "react";
export function ExamGuard({ children }: { children: React.ReactNode }) {
const { examSubmitted, resultsDone } = useNavStore();
const router = useRouter();
const pathname = usePathname();
useEffect(() => {
// Prevent access to /exam after submission
if (pathname === "/exam/exam-screen" && examSubmitted) {
router.replace("/results");
}
// Prevent access to /results after done
if (pathname === "/exam/results" && resultsDone) {
router.replace("/categories"); // or wherever you want them to go
}
}, [pathname, examSubmitted, resultsDone, router]);
return <>{children}</>;
}

21
components/Header.tsx
View File

@ -2,7 +2,7 @@
import React from "react";
import { useRouter } from "next/navigation";
import { BadgeCheck, ChevronLeft, Layers } from "lucide-react";
import { ChevronLeft, Layers, RefreshCcw } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useModal } from "@/context/ModalContext";
import { useAuthStore } from "@/stores/authStore";
@ -66,13 +66,18 @@ const Header = ({
)}
{displayTabTitle && (
<div className="flex items-center gap-3">
<button onClick={handleBackClick} className="bg-none border-none p-1">
<ChevronLeft size={24} color="white" />
</button>
<span className="text-md font-bold text-white">
{displayTabTitle}
</span>
<div className="flex justify-between items-center w-full">
<div className="flex items-center gap-3">
<button
onClick={handleBackClick}
className="bg-none border-none p-1"
>
<ChevronLeft size={24} color="white" />
</button>
<span className="text-md font-bold text-white">
{displayTabTitle}
</span>
</div>
</div>
)}

3
package.json
View File

@ -6,7 +6,8 @@
"dev": "next dev --turbopack",
"build": "next build ",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"build:export": "npx next build && npm run export"
},
"dependencies": {
"@capacitor/android": "^7.4.2",