fix(ui): fix profile screen

This commit is contained in:
shafin-r
2025-07-16 16:25:26 +06:00
parent aa7bc67dc9
commit 32c9065f6f
7 changed files with 385 additions and 4 deletions

View File

@ -3,8 +3,20 @@
import BackgroundWrapper from "@/components/BackgroundWrapper";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { API_URL, getToken } from "@/lib/auth";
import { MoveLeft, UserCircle2 } from "lucide-react";
import Image from "next/image";
import {
Bookmark,
ChartColumn,
ChevronRight,
Clock4,
CreditCard,
Crown,
Globe,
LogOut,
MapPin,
MoveLeft,
Trash2,
UserCircle2,
} from "lucide-react";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
@ -28,7 +40,6 @@ const SettingsPage = () => {
if (response.ok) {
const fetchedUserData = await response.json();
setUserData(fetchedUserData);
console.log(fetchedUserData);
}
} catch (error) {
console.error("Error fetching user data: ", error);
@ -63,12 +74,113 @@ const SettingsPage = () => {
: ""}
</AvatarFallback>
</Avatar>
<div className="flex flex-col ">
<div className="flex flex-col items-start">
<h1 className="font-semibold text-2xl">{userData?.name}</h1>
<h3 className=" text-md">{userData?.email}</h3>
</div>
</div>
</section>
<section className="flex flex-col gap-8">
<button
onClick={() => router.push("/profile")}
className="flex justify-between"
>
<div className="flex items-center gap-4">
<UserCircle2 size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Your profile
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</button>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<Bookmark size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Bookmarks
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<CreditCard size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Payments
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<Globe size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Languages
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<MapPin size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Location
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<Crown size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Subscription
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<ChartColumn size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Performance
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<Trash2 size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Clear Cache
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<Clock4 size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Clear History
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="flex justify-between">
<div className="flex items-center gap-4">
<LogOut size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Log out
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</div>
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
<p className="text-center text-[#113768]/50 font-medium">
ExamJam | Version 1.0
</p>
</section>
</div>
</div>
</section>