profiles init

app/users/[id]/page.tsx

@@ -0,0 +1,265 @@
+"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>
+  // );
+}

app/users/page.tsx

@@ -0,0 +1,85 @@
+// pages/page.tsx
+"use client";
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+
+interface User {
+  username: string;
+  total_gains: string;
+  img_url: string;
+}
+
+const Page: React.FC = () => {
+  const [userData, setUserData] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch("https://api.callfi.io/get_user_list.php");
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        const data = await response.json();
+        setUserData(data);
+      } catch (error: any) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    // Conditionally execute useEffect on the client side only
+    if (typeof window !== 'undefined') {
+      fetchData();
+    }
+  }, []);
+
+  // Sort userData by total_gains before rendering
+  const sortedUserData = [...userData].sort((a, b) => parseFloat(b.total_gains) - parseFloat(a.total_gains));
+
+  return (
+    <>
+    <main className="flex flex-col min-h-screen items-center justify-between text-white">
+      <Header />
+      <section className="w-full p-4 flex flex-col items-center justify-center">
+        <h1 className="text-2xl font-bold mb-4">User Rankings</h1>
+        {loading ? (
+          <p>Loading...</p>
+        ) : error ? (
+          <p>Error: {error}</p>
+        ) : (
+          <ul className="w-full max-w-4xl">
+            {sortedUserData.map((user) => (
+              <motion.div key={user.username} whileHover={{ scale: 1.05, transition: { duration: 0.15 } }}>
+                <Link href={`/users/${user.username}`}>
+                  <li className="leaderboard-card glassmorphism mx-auto mb-4 p-4 rounded-lg flex items-center">
+                    <div className="flex items-center">
+                      <img
+                        src={user.img_url}
+                        alt={`${user.username}'s profile`}
+                        className="w-12 h-12 rounded-full mr-4"
+                      />
+                      <div className="flex flex-col items-center justify-center flex-1">
+                        <span className="text-center font-bold">{user.username}</span>
+                        <span className="text-center">Points: {(parseFloat(user.total_gains) * 100).toFixed(2)}</span>
+                      </div>
+                    </div>
+                  </li>
+                </Link>
+              </motion.div>
+            ))}
+          </ul>
+        )}
+      </section>
+      <Footer />
+    </main>
+    </>
+  );
+};
+
+export default Page;