Skip to content

Commit

Permalink
Merge pull request #148 from AyushSharma72/countup
Browse files Browse the repository at this point in the history 
added count up animation
  • Loading branch information
@panwar8279
panwar8279 authored Oct 29, 2024
2 parents 222979d + 2864b41 commit 1480f11
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 68 deletions.
28 changes: 28 additions & 0 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,33 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DecenTrade | NFT Marketplace</title>

<style>
/* Resetting margins and paddings */
body {
margin: 0; /* Remove default body margin */
padding: 0; /* Remove default body padding */
}

/* Background image section */
.background-image {
background-image: url('path/to/your/image.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire section */
background-position: center; /* Center the image */
height: 100vh; /* Adjust height as needed */
}

/* Footer styling */
footer {
margin: 0; /* Remove footer margin */
padding: 20px; /* Adjust padding as needed */
background-color: #333; /* Example footer background color */
color: white; /* Example footer text color */
text-align: center; /* Center footer text */
}
</style>


</head>
<body>
<div id="root"></div>
Expand All @@ -24,5 +51,6 @@
src="https://cdn.gtranslate.net/widgets/latest/float.js"
defer
></script>

</body>
</html>
19 changes: 19 additions & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"pako": "^2.1.0",
"pinata-web3": "^0.5.0",
"react": "^18.3.1",
"react-countup": "^6.5.3",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.1",
"three": "^0.168.0"
Expand Down
10 changes: 9 additions & 1 deletion frontend/src/main.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(<App />)

createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>


177 changes: 110 additions & 67 deletions frontend/src/pages/CreatorsPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,119 @@
import React, { useEffect, useState } from 'react';
import './CreatorsPage.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';


import React, { useEffect, useState } from 'react'
import './CreatorsPage.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub } from '@fortawesome/free-brands-svg-icons'
import CountUp from 'react-countup'
const CreatorsPage = () => {
const [contributors, setContributors] = useState([]);
const [repoStats, setRepoStats] = useState({});
const [loading, setLoading] = useState(true);
const [contributors, setContributors] = useState([])
const [repoStats, setRepoStats] = useState({})
const [loading, setLoading] = useState(true)

// Fetch data from GitHub API
const fetchData = async () => {
try {
const contributorsResponse = await fetch('https://api.github.com/repos/4darsh-Dev/DecenTrade/contributors');
const contributorsData = await contributorsResponse.json();



const repoResponse = await fetch('https://api.github.com/repos/4darsh-Dev/DecenTrade');
const repoData = await repoResponse.json();

setContributors(contributorsData);
setRepoStats(repoData);
const contributorsResponse = await fetch(
'https://api.github.com/repos/4darsh-Dev/DecenTrade/contributors'
)
const contributorsData = await contributorsResponse.json()

const repoResponse = await fetch(
'https://api.github.com/repos/4darsh-Dev/DecenTrade'
)
const repoData = await repoResponse.json()

setContributors(contributorsData)
setRepoStats(repoData)
} catch (error) {
console.error('Error fetching data:', error);
setContributors([]);
setRepoStats({});
console.error('Error fetching data:', error)
setContributors([])
setRepoStats({})
} finally {
setLoading(false);
setLoading(false)
}
};
}

useEffect(() => {
fetchData();
}, []);
fetchData()
}, [])

// Render stats
const renderStats = () => {
const contributorsCount = contributors.length;
const contributorsCount = contributors.length
const stats = [
{ label: 'Contributors', value: contributorsCount, icon: 'users' },
{ label: 'Total Contributions', value: contributors.reduce((sum, contributor) => sum + contributor.contributions, 0) || 0, icon: 'git-commit' },
{ label: 'GitHub Stars', value: repoStats.stargazers_count || 0, icon: 'star' },
{ label: 'Forks', value: repoStats.forks_count || 0, icon: 'git-branch' }
];
{
label: 'Total Contributions',
value:
contributors.reduce(
(sum, contributor) => sum + contributor.contributions,
0
) || 0,
icon: 'git-commit',
},
{
label: 'GitHub Stars',
value: repoStats.stargazers_count || 0,
icon: 'star',
},
{
label: 'Forks',
value: repoStats.forks_count || 0,
icon: 'git-branch',
},
]

return (
<div className="contributor-stats-grid" id="statsGrid">
{stats.map(stat => (
{stats.map((stat) => (
<div className="contributor-stat-card" key={stat.label}>
<div className="contributor-icon" dangerouslySetInnerHTML={{ __html: getIcon(stat.icon) }} />
<h3>{stat.value}</h3>
<div
className="contributor-icon"
dangerouslySetInnerHTML={{
__html: getIcon(stat.icon),
}}
/>
<h3>
<CountUp
start={0}
end={stat.value}
duration={3}
separator=","
/>
</h3>
<p>{stat.label}</p>
</div>
))}
</div>
);
};
)
}

// Render contributors
const renderContributors = () => {
return (
<div className="contributor-contributors-grid" id="contributorsGrid">
{contributors.map(contributor => (
<div className="contributor-contributor-card" key={contributor.login}>
<img src={contributor.avatar_url} alt={contributor.login} />
<div
className="contributor-contributors-grid"
id="contributorsGrid"
>
{contributors.map((contributor) => (
<div
className="contributor-contributor-card"
key={contributor.login}
>
<img
src={contributor.avatar_url}
alt={contributor.login}
/>
<h3>{contributor.login}</h3>
<p>{contributor.type}</p>
<div className="contributor-contributions">{contributor.contributions} contributions</div>
<div className="contributor-contributions">
{contributor.contributions} contributions
</div>
<div className="contributor-footer">
<a href={contributor.html_url} target="_blank" rel="noopener noreferrer">
<a
href={contributor.html_url}
target="_blank"
rel="noopener noreferrer"
>
{getIcon('external-link')}
<FontAwesomeIcon icon={faGithub} />
</a>
Expand All @@ -78,40 +122,39 @@ const CreatorsPage = () => {
</div>
))}
</div>
);
};
)
}

// Helper function to get icons
const getIcon = (name) => {
const icons = {
// svg icons
};
return icons[name] || '';
};
// svg icons
}
return icons[name] || ''
}

return (
<>

<section className=" dark:bg-slate-900">
<div className='contributor-contributors'>
{loading ? (
<div id="loading" className="contributor-loading">
</div>
) : (
<>
<h2 className='dark:text-white'>Project Statistics</h2>
{renderStats()}
<h2 className='dark:text-white'>Meet Our Contributors</h2>
{renderContributors()}
</>
)}
<div className="contributor-contributors">
{loading ? (
<div id="loading" className="contributor-loading"></div>
) : (
<>
<h2 className="dark:text-white">
Project Statistics
</h2>
{renderStats()}
<h2 className="dark:text-white">
Meet Our Contributors
</h2>
{renderContributors()}
</>
)}
</div>
</section>



</>
);
};
)
}

export default CreatorsPage;
export default CreatorsPage

0 comments on commit 1480f11

Please sign in to comment.