generated from muhtadeetaron/nextjs-template
fix(ui): fix profile screen
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user