266 lines
10 KiB
TypeScript
266 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import Header from '@/components/Header';
|
|
import Footer from '@/components/Footer';
|
|
import Head from 'next/head'
|
|
|
|
import UserDetailModal from '@/components/UserDetailsModal';
|
|
import { motion } from 'framer-motion';
|
|
import CustomHeader from '@/components/CustomHeader';
|
|
import { FaArrowDown, FaArrowUp, FaIcons, FaShare } from 'react-icons/fa';
|
|
import { FaArrowLeft } from 'react-icons/fa6';
|
|
import { NextSeo } from 'next-seo';
|
|
|
|
interface UserDetail {
|
|
tag: string;
|
|
img_url: string;
|
|
email: string;
|
|
points: string;
|
|
joined_date: string;
|
|
calloutCount: number;
|
|
// Add more fields as necessary
|
|
}
|
|
|
|
interface Callout {
|
|
price_at_creation: string;
|
|
froze_price: string;
|
|
gains: string;
|
|
ca: string;
|
|
id: string;
|
|
icon_url: string;
|
|
}
|
|
|
|
export default function UserPage({ params }: { params: { id: string } }) {
|
|
const [userDetail, setUserDetail] = useState<UserDetail | null>(null);
|
|
const [callouts, setCallouts] = useState<Callout[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [activeSelected, setActiveSelected] = useState(true);
|
|
const [expandedInfo, setExpandedInfo] = useState(false);
|
|
const [weekSelected, SetWeekSelected] = useState(true);
|
|
const [allTimeSelected, SetAllTimeSelected] = useState(true);
|
|
|
|
|
|
const id = params.id;
|
|
|
|
useEffect(() => {
|
|
const fetchUserDetail = async () => {
|
|
if (!id) return;
|
|
|
|
try {
|
|
const response = await fetch(`https://api.callfi.io/get_user_data.php?username=${id}`);
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
setUserDetail(data);
|
|
} catch (error: any) {
|
|
setError(error.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchUserDetail();
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
const fetchCalloutHistory = async () => {
|
|
try {
|
|
const response = await fetch(`https://api.callfi.io/get_callouts_history.php?username=${id}&period=${weekSelected ? 'week' : "month"}`);
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
setCallouts(data);
|
|
} catch (error: any) {
|
|
setError(error.message);
|
|
}
|
|
};
|
|
|
|
fetchCalloutHistory();
|
|
}, [id]);
|
|
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<main className='flex flex-col min-h-screen text-white'>
|
|
<section className='glassmorphism'>
|
|
<div className='grid grid-cols-3 gap-4 flex w-full flex-row p-3'>
|
|
|
|
|
|
<button className='mr-3'>
|
|
<FaArrowLeft />
|
|
</button>
|
|
<h1 className='text-center'>CallFi Profile</h1>
|
|
</div>
|
|
|
|
<div className='rounded-3xl'>
|
|
<div className='grid grid-cols-3 flex-row p-2'>
|
|
<img
|
|
src={userDetail?.img_url}
|
|
alt={`${userDetail?.tag}'s profile`}
|
|
className="rounded-full w-full sm:w-36 p-5"
|
|
/>
|
|
<div className='flex flex-col p-6 px-2 col-span'>
|
|
<div>
|
|
<p className='font-bold mb-2'>{userDetail?.tag}</p>
|
|
<p className='text-sm'>500x Gains</p>
|
|
<p className='text-sm'>50 Points</p>
|
|
<p className='text-sm'>10 Followers</p>
|
|
</div>
|
|
<div className={expandedInfo ? "" : "hidden"}>
|
|
<p className='text-sm'>150 Callouts</p>
|
|
<p className='text-sm'>75% Accuracy</p>
|
|
<p className='text-sm'>200 Days</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div className='flex col-span-1 justify-end m-3 mb-6 items-end'>
|
|
{expandedInfo ? (<button onClick={() => { setExpandedInfo(false) }}><FaArrowUp /></button>) : (<button onClick={() => { setExpandedInfo(true) }}><FaArrowDown /></button>)}
|
|
</div>
|
|
</div>
|
|
<div className='m-2 grid grid-cols-5 gap-2 px-2'>
|
|
<button className='glassmorphism p-1 col-span-4 rounded-xl hover:bg-blue-900'>Follow</button>
|
|
<button className='glassmorphism p-1 flex items-center justify-center rounded-xl hover:bg-blue-900'><FaShare /></button>
|
|
</div>
|
|
<div className='grid grid-cols-2 mt-4'>
|
|
<button className={`justify-center text-center ${activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(true) }}>
|
|
<p>Active</p>
|
|
</button>
|
|
<button className={`justify-center text-center ${!activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(false) }}>
|
|
<p>History</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
{/* Header Ends */}
|
|
|
|
|
|
<section className={`flex w-full ${activeSelected ? "" : "hidden"}`}>
|
|
<section className="flex flex-col w-full m-2">
|
|
<div className='flex justify-center p-4'>
|
|
<div className='glassmorphism rounded-full flex p-1'>
|
|
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${allTimeSelected ? "glassmorphism-dark" : ""}`} onClick={()=>{SetAllTimeSelected(true)}}>
|
|
All Time
|
|
</button>
|
|
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${!allTimeSelected ? "glassmorphism-dark" : ""}`} onClick={()=>{SetAllTimeSelected(false)}}>
|
|
Timed
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<div className={`${activeSelected ? "" : "hidden"}`}>
|
|
<div className={`glassmorphism rounded-full m-2 grid grid-cols-4 h-20`}>
|
|
<img
|
|
src="https://s2.coinmarketcap.com/static/img/coins/64x64/12870.png"
|
|
className="rounded-full m-2 flex"
|
|
/>
|
|
<div className='grid grid-rows-2'>
|
|
<div className='items-end justify-start text-center flex text-lg'>
|
|
COC
|
|
</div>
|
|
<p className='text-xs items-center flex justify-start'>
|
|
0x22...e3caf
|
|
</p>
|
|
</div>
|
|
|
|
<div className=' grid grid-rows-2 col-span-2 justify-end mx-5'>
|
|
<p className='items-end flex'>{"$19.15 => $100"}</p>
|
|
<p className='justify-end flex'>{"100%"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section className={`flex flex-1 w-full ${!activeSelected ? "" : "hidden"}`}>
|
|
<section className="flex flex-col w-full m-2">
|
|
<div className='flex justify-center p-4'>
|
|
<div className='glassmorphism rounded-full w-min flex p-1'>
|
|
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${weekSelected ? "glassmorphism-dark" : ""}`} onClick={()=>{SetWeekSelected(true)}}>
|
|
Weekly
|
|
</button>
|
|
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${!weekSelected ? "glassmorphism-dark" : ""}`} onClick={()=>{SetWeekSelected(false)}}>
|
|
Monthly
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<div className='flex-1'></div>
|
|
<Footer />
|
|
|
|
</main>
|
|
</>
|
|
);
|
|
|
|
// return (
|
|
// <main className="flex flex-col min-h-screen text-white">
|
|
// <Header />
|
|
// <section className="flex flex-1 w-full p-4">
|
|
// {loading ? (
|
|
// <p>Loading...</p>
|
|
// ) : error ? (
|
|
// <p>Error: {error}</p>
|
|
// ) : userDetail ? (
|
|
// <div>
|
|
// <div className="user-detail-pane py-10 px-20 glassmorphism rounded-lg flex flex-col items-center md:items-start md:mr-4">
|
|
// <img
|
|
// src={userDetail.img_url}
|
|
// alt={`${userDetail.tag}'s profile`}
|
|
// className="w-24 h-24 rounded-full mb-10"
|
|
// />
|
|
// <h1 className="text-2xl font-bold mb-2">{userDetail.tag}</h1>
|
|
// <p className="mb-2">Joined: {formatDate(userDetail.joined_date)}</p>
|
|
// <p className="mb-2">Callout count: {userDetail.calloutCount}</p>
|
|
// </div>
|
|
// <div className="content flex-1 p-4">
|
|
// <div className="tabs flex items-center space-x-4 mb-4 justify-center">
|
|
// {periods.map((period) => (
|
|
// <button
|
|
// key={period}
|
|
// className={`px-4 py-2 rounded ${selectedPeriod === period ? 'bg-black text-white glassmorphism-dark' : 'bg-gray-700 text-gray-400 glassmorphism'}`}
|
|
// onClick={() => setSelectedPeriod(period)}
|
|
// >
|
|
// {period}
|
|
// </button>
|
|
// ))}
|
|
// </div>
|
|
// {callouts.map((callout) => (
|
|
// <div key={callout.ca} className="leaderboard-card glassmorphism mx-auto mb-4 p-6 w-full md:w-2/3 lg:w-1/2">
|
|
// <div className="flex items-center space-x-4">
|
|
// <img src={callout.icon_url} alt="Coin Icon" className="w-16 h-16 rounded-full" />
|
|
// <div className="flex-grow">
|
|
// <p className="font-bold text-lg">{callout.id}</p>
|
|
// <p>{`$${callout.price_at_creation} => $${callout.froze_price}`}</p>
|
|
// </div>
|
|
// <div className="flex items-center">
|
|
// <p className="text-right">{`${callout.gains}%`}</p>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
// </div>
|
|
// ) : (
|
|
// <p>User not found</p>
|
|
// )}
|
|
// </section>
|
|
// <Footer />
|
|
// </main>
|
|
// );
|
|
}
|