Modal started
This commit is contained in:
parent
59ac29e3da
commit
533eb76c76
|
|
@ -15,6 +15,7 @@ body {
|
|||
:root {
|
||||
|
||||
--glassmorphism-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.1) 100%);
|
||||
--glassmorphism-gradient-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
|
||||
--glassmorphism-bg: rgba(255, 255, 255, 0.03);
|
||||
--glassmorphism-blur: 10px;
|
||||
--glassmorphism-border: rgba(255, 255, 255, 0.15);
|
||||
|
|
@ -26,7 +27,8 @@ body {
|
|||
border: 1px solid var(--glassmorphism-border);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden; /* Ensure noise texture covers the entire element */
|
||||
overflow: hidden;
|
||||
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
|
||||
}
|
||||
.glassmorphism::before {
|
||||
content: "";
|
||||
|
|
@ -58,6 +60,12 @@ body {
|
|||
justify-content: center; /* Center vertically */
|
||||
align-items: center; /* Center horizontally */
|
||||
position: relative;
|
||||
transition: background-image 0.3s ease, box-shadow 0.3s ease, border 0.3s ease, backdrop-filter 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
.leaderboard-card:hover{
|
||||
background: var(--glassmorphism-gradient-hover), var(--glassmorphism-bg);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
33
app/modal.tsx
Normal file
33
app/modal.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// Modal.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const Modal = ({ isOpen, onClose, item }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none">
|
||||
<div className="relative w-auto max-w-3xl mx-auto my-6">
|
||||
{/* Modal content */}
|
||||
<div className="relative flex flex-col bg-white border-0 rounded-lg shadow-lg outline-none focus:outline-none">
|
||||
{/* Header */}
|
||||
<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 Details</h3>
|
||||
<button
|
||||
className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="bg-transparent text-black h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="relative p-6 flex-auto">
|
||||
<p className="my-4 text-blueGray-500 text-lg leading-relaxed">{item.username} has {item.points} points.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
83
app/page.tsx
83
app/page.tsx
|
|
@ -5,6 +5,7 @@ import { SunIcon, MoonIcon } from "@heroicons/react/solid";
|
|||
import { PrivyProvider, usePrivy } from "@privy-io/react-auth";
|
||||
import { FaTwitter, FaWallet } from "react-icons/fa";
|
||||
import { CheckIcon } from "@heroicons/react/outline";
|
||||
import Modal from './modal';
|
||||
|
||||
// Helper functions to generate pseudo data
|
||||
const generateRandomName = () => {
|
||||
|
|
@ -22,6 +23,7 @@ const generateRandomPoint = () => {
|
|||
};
|
||||
|
||||
function Home() {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy();
|
||||
const [darkMode, setDarkMode] = useState(true);
|
||||
const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection
|
||||
|
|
@ -29,6 +31,19 @@ function Home() {
|
|||
const [incrementNumber, setIncrementNumber] = useState(1);
|
||||
const [leaderboardData, setLeaderboardData] = useState([]);
|
||||
const [isJoined, setIsJoined] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState(null); // State to store selected leaderboard item
|
||||
|
||||
// Function to handle opening modal and setting selected item
|
||||
const openModal = (item) => {
|
||||
setSelectedItem(item);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
// Function to handle closing modal
|
||||
const closeModal = () => {
|
||||
setSelectedItem(null);
|
||||
setModalOpen(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (darkMode) {
|
||||
|
|
@ -39,17 +54,31 @@ function Home() {
|
|||
}, [darkMode]);
|
||||
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(async () => {
|
||||
setIncrementNumber((prevNumber) => prevNumber + 1);
|
||||
const response = await fetch('https://api.callfi.io/get_leaderboard.php');
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch('https://api.callfi.io/get_leaderboard.php');
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const data = await response.json();
|
||||
console.log('Leaderboard data:', data);
|
||||
setLeaderboardData(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leaderboard data:', error);
|
||||
}
|
||||
const data = await response.json();
|
||||
console.log('Leaderboard data:', data);
|
||||
setLeaderboardData(data);
|
||||
};
|
||||
|
||||
// Fetch data immediately on mount
|
||||
fetchData();
|
||||
|
||||
// Set up the interval to fetch data every 5 seconds
|
||||
const intervalId = setInterval(() => {
|
||||
setIncrementNumber((prevNumber) => prevNumber + 1);
|
||||
fetchData();
|
||||
}, 5000);
|
||||
return () => clearInterval(intervalId); // Clean up the interval on component unmount
|
||||
|
||||
// Clean up the interval on component unmount
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
|
|
@ -71,6 +100,17 @@ function Home() {
|
|||
} catch (error) {
|
||||
console.error('Error during API call:', error);
|
||||
}
|
||||
|
||||
try{
|
||||
const response = await fetch('https://api.callfi.io/check_user_approved.php?tag=' + usertag);
|
||||
const responseTxt = await response.text();
|
||||
if(responseTxt == "1"){
|
||||
setIsJoined(true);
|
||||
}
|
||||
|
||||
}catch(error){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -123,18 +163,33 @@ function Home() {
|
|||
</header>
|
||||
{/* Note card */}
|
||||
{
|
||||
ready && user?.twitter &&(
|
||||
ready && user?.twitter && !isJoined &&(
|
||||
<div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
|
||||
<div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
|
||||
<h2 className="text-2xl font-bold mb-2">Join the Leaderboard</h2>
|
||||
<p className="text-lg mb-4">Get on the leaderboard by posting a tweet!</p>
|
||||
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
|
||||
<a href="https://x.com/intent/post?text=I%27m+gonna+be+on+the+%23CallFi+leaderboards%21+Come+check+me+out+and+take+part+in+their+test%21+%0A%0Atest.callfi.io">Get Started</a>
|
||||
<a href="https://x.com/intent/post?text=I%27m+gonna+be+on+the+%23CallFi+leaderboards%21+Come+check+me+out+and+take+part+in+their+test%21+%0A%0Atest.callfi.io" target="_blank" rel="noopener noreferrer">Get Started</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
ready && user?.twitter && isJoined &&(
|
||||
<div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
|
||||
<div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
|
||||
<h2 className="text-2xl font-bold mb-2">Feeling Lucky?</h2>
|
||||
<p className="text-lg mb-4">Make a callout to a token you believe in!!</p>
|
||||
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
|
||||
<a href="https://x.com/intent/tweet?text=%24COC%20is%20Booming%20rn%21%20See%20ya%20on%20the%20moon%21%0A%0A%23CallFi%20%23CallingIt" target="_blank" rel="noopener noreferrer">CALL OUT!</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
ready && !user?.twitter && (
|
||||
<div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
|
||||
|
|
@ -162,13 +217,17 @@ function Home() {
|
|||
<div className="w-full p-4 flex flex-col items-center justify-center">
|
||||
<div className="w-full max-w-4xl">
|
||||
{leaderboardData.map((item) => (
|
||||
<div key={item["id"]} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}>
|
||||
<div key={item["id"]} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`} onClick={() => openModal(item)}>
|
||||
<p className="text-center font-bold">{item["username"]}</p>
|
||||
<p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal */}
|
||||
<Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem} />
|
||||
|
||||
{/* Rest of your Home component */}
|
||||
|
||||
<footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism">
|
||||
<p>© 2024 CallFi. All rights reserved.</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user