idk
This commit is contained in:
parent
f04314e511
commit
37f62edfe6
|
|
@ -49,7 +49,14 @@ const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username:
|
|||
<div className="relative w-auto max-w-3xl mx-auto my-6 modal">
|
||||
<div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
|
||||
<div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
|
||||
<h3 className="text-3xl font-semibold">{item.username}s Callouts</h3>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={item["img_url"]} // Assuming img_url is a valid image URL
|
||||
alt={`${item.username}'s profile`}
|
||||
className="w-12 h-12 rounded-full mr-4"
|
||||
/>
|
||||
<h3 className="text-3xl font-semibold">{item.username}s Callouts</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative p-6 flex-auto">
|
||||
<p
|
||||
|
|
|
|||
30
app/page.tsx
30
app/page.tsx
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from 'next/link';
|
||||
import { SunIcon, MoonIcon } from "@heroicons/react/solid";
|
||||
import { PrivyProvider, usePrivy } from "@privy-io/react-auth";
|
||||
import { FaTwitter, FaWallet } from "react-icons/fa";
|
||||
|
|
@ -8,6 +9,7 @@ import { CheckIcon } from "@heroicons/react/outline";
|
|||
import Modal from './modal';
|
||||
import CalloutModal from './callout';
|
||||
import { motion } from 'framer-motion';
|
||||
import UserDetailModal from "@/components/UserDetailsModal";
|
||||
|
||||
// Helper functions to generate pseudo data
|
||||
const generateRandomName = () => {
|
||||
|
|
@ -24,7 +26,7 @@ const generateRandomPoint = () => {
|
|||
return Math.floor(Math.random() * (100 - 10 + 1)) + 10;
|
||||
};
|
||||
|
||||
function Home() {
|
||||
const Home: React.FC = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy();
|
||||
const [darkMode, setDarkMode] = useState(true);
|
||||
|
|
@ -35,6 +37,7 @@ function Home() {
|
|||
const [isJoined, setIsJoined] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState(null);
|
||||
const [newCallModalOpen, setNewCallModalOpen] = useState(false);
|
||||
const [userDetailModalOpen, setUserDetailModalOpen] = useState(false);
|
||||
const [selectedPeriod, setSelectedPeriod] = useState('All Time');
|
||||
|
||||
const periods = ['All Time', 'Weekly', 'Monthly'];
|
||||
|
|
@ -59,6 +62,20 @@ function Home() {
|
|||
setNewCallModalOpen(false);
|
||||
};
|
||||
|
||||
// Function to handle opening user detail modal
|
||||
const openUserDetailModal = (username) => {
|
||||
setUserDetailModalOpen(true);
|
||||
setTimeout(() => {
|
||||
setModalOpen(false);
|
||||
// Additional logic if needed to fetch user details
|
||||
}, 10);
|
||||
};
|
||||
|
||||
// Function to handle closing user detail modal
|
||||
const closeUserDetailModal = () => {
|
||||
setUserDetailModalOpen(false);
|
||||
};
|
||||
|
||||
const handleNewCallSubmit = (tokenId, tokenContract, tokenName) => {
|
||||
let twitterIntentURL = `https://x.com/intent/tweet?text=%24${tokenId}%20is%20Booming%20rn%21%20See%20ya%20on%20the%20moon%21%0A%0A%23CallFi%20%23CallingIt`;
|
||||
if(tokenContract.length >0){
|
||||
|
|
@ -162,7 +179,13 @@ function Home() {
|
|||
return (
|
||||
<main className={`flex flex-col min-h-screen items-center justify-between text-white`}>
|
||||
<header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white glassmorphism">
|
||||
<h1 className="text-xl font-bold">CallFi</h1>
|
||||
<div className="flex items-center">
|
||||
<h1 className="text-xl font-bold px-10">CallFi</h1>
|
||||
<nav className="flex space-x-4 hidden">
|
||||
<Link href="/users">
|
||||
<p className="text-white hover:underline">User Ranking</p>
|
||||
</Link>
|
||||
</nav></div>
|
||||
<div className="flex items-center">
|
||||
{ready && user ? (
|
||||
<div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2 glassmorphism">
|
||||
|
|
@ -262,7 +285,7 @@ function Home() {
|
|||
className="w-12 h-12 rounded-full mr-4"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-center font-bold">{item["username"]}</p>
|
||||
<p className="text-center font-bold" onClick={()=>openUserDetailModal(item["username"])}>{item["username"]}</p>
|
||||
<p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -274,6 +297,7 @@ function Home() {
|
|||
|
||||
<Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem ?? { username: "", points: 2 }} period={selectedPeriod} />
|
||||
<CalloutModal isOpen={newCallModalOpen} onClose={closeNewCallModal} onSubmit={handleNewCallSubmit} />
|
||||
<UserDetailModal isOpen={userDetailModalOpen} onClose={closeUserDetailModal} user={selectedItem ?? {username:""}} />
|
||||
|
||||
<footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism">
|
||||
<p>© 2024 CallFi. All rights reserved.</p>
|
||||
|
|
|
|||
54
components/UserDetailsModal.tsx
Normal file
54
components/UserDetailsModal.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
// components/UserDetailModal.tsx
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface UserDetailModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
user: any;
|
||||
}
|
||||
|
||||
const UserDetailModal: React.FC<UserDetailModalProps> = ({ isOpen, onClose, user }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none modal-bg"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="relative w-auto max-w-3xl mx-auto my-6 modal">
|
||||
<div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
|
||||
<div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={user["img_url"]} // Assuming img_url is a valid image URL
|
||||
alt={`${user.username}'s profile`}
|
||||
className="w-12 h-12 rounded-full mr-4"
|
||||
/>
|
||||
<h3 className="text-3xl font-semibold">{user.username}</h3>
|
||||
</div>
|
||||
<button
|
||||
className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative p-6 flex-auto">
|
||||
<div>
|
||||
<p>Email: {user.email}</p>
|
||||
<p>Points: {user.points}</p>
|
||||
{/* Add more details as needed */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserDetailModal;
|
||||
Loading…
Reference in New Issue
Block a user