Skip to content

Commit

Permalink
leaderboard styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@awidearray
awidearray committed Nov 5, 2024
1 parent 85cecf4 commit 66d1cee
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 282 deletions.
238 changes: 30 additions & 208 deletions src/components/LeaderboardTotals.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,36 @@
.number {
position: relative;
line-height: 32px;
font-weight: 600;
}

.text {
.frameParent {
width: 100%;
position: relative;
line-height: 22px;
font-weight: 600;
}

.button {
width: 110px;
border-radius: 0.875rem;
background-color: #E8E3D500;
height: 38px;
overflow: hidden;
flex-shrink: 0;
border-radius: 14px;
background: linear-gradient(180deg, #f98c13, #ffaf03);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8px 14px;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 18px;
box-sizing: border-box;
max-width: 600px;
transition: background-color 0.2s ease;
color: #9B8D7D;
text-align: left;
font-size: 24px;
color: #fff;
font-family: 'SF Compact Rounded';
}

.button1 {
width: 110px;
border-radius: 0.875rem;
background-color: rgba(232, 227, 213, 0);
height: 38px;
overflow: hidden;
flex-shrink: 0;
.instanceParent {
align-self: stretch;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8px 14px;
box-sizing: border-box;
max-width: 600px;
cursor: pointer;
color: #9B8D7D;
align-items: flex-start;
justify-content: flex-start;
gap: 24px;
}

.buttonParent {
border-radius: 0.875rem;
background-color: #e8e3d6;
overflow: hidden;
.numberAndBadgeParent {
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}

.number1 {
position: relative;
line-height: 32px;
font-weight: 600;
}

.numberAndBadge {
align-self: stretch;
display: flex;
Expand All @@ -70,11 +39,11 @@
justify-content: flex-start;
}

.heading {
.number {
position: relative;
line-height: 140%;
text-transform: uppercase;
line-height: 32px;
font-weight: 600;
font-size: 34px;
}

.headingWrapper {
Expand All @@ -88,167 +57,20 @@
font-family: 'Open Runde';
}

.numberAndBadgeParent {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}

.container {
width: 100%;
max-width: 100%;
position: relative;
border-radius: 14px;
background: linear-gradient(180deg, #f98c13, #ffaf03);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
box-sizing: border-box;
text-align: left;
font-size: 24px;
color: #ffffff;
gap: 12px;
font-family: var(--font-family-base);
}

.numberParent {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 8px 24px;
box-sizing: border-box;
gap: 24px;
text-align: left;
font-size: 34px;
color: #242424;
font-family: var(--font-family-base);
}

.container {
max-width: 1200px;
padding: 18px;
}

.statsGrid {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 24px;
width: 100%;
}

.statCard {
width: 100%;
.heading {
position: relative;
border-radius: 14px;
background: linear-gradient(180deg, #f98c13, #ffaf03);
padding: 18px;
box-sizing: border-box;
}

/* Add these classes to your existing CSS file */
.table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: linear-gradient(180deg, #f98c13, #ffaf03);
border-radius: 14px;
overflow: hidden;
}

.table th,
.table td {
padding: 18px;
text-align: left;
border: none;
color: #fff;
font-family: var(--font-family-base);
}

.table th {
font-size: 12px;
font-weight: 600;
line-height: 140%;
text-transform: uppercase;
color: #fff;
background: transparent;
font-family: var(--font-family-base);
}

.table td {
font-size: 24px;
font-weight: 600;
}

.table tr:nth-child(even) {
background-color: #f9f9f9;
}


/* Add responsive behavior */
@media (max-width: 768px) {
.statsGrid {
flex-direction: column;
}
.table {
display: block;
overflow-x: auto;
}
.container {
padding: 12px;
.instanceParent {
flex-direction: row;
gap: 4px;
}
}

.statsContainer {
width: 100%;
margin: 0 auto;
background: linear-gradient(180deg, #f98c13, #ffaf03);
border-radius: 14px;
padding: 18px 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 4px;
box-sizing: border-box;
overflow: hidden;
}

.statItem {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
white-space: nowrap;
}

.statValue {
font-family: 'SF Compact Rounded', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 24px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
line-height: 32px;
}

.statLabel {
font-family: 'SF Compact Rounded', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
line-height: 17px;
letter-spacing: 0.5px;
}

@media (max-width: 768px) {
.statsContainer {
flex-direction: column;
gap: 24px;
padding: 18px 24px;
.frameParent {
padding: 16px;
}
}
69 changes: 38 additions & 31 deletions src/components/LeaderboardTotals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,8 @@ interface DashboardData {
}[];
}

// Add AI16Z token constant
const AI16Z_ADDRESS = 'HeLp6NuQkmYB4pYWo2zYs22mESHXPQYzXbB8n4V98jwC';
const DECIMALS = 1_000_000_000; // 9 decimals for Solana tokens
const DECIMALS = 1_000_000_000;

const LeaderboardTotals: NextPage = () => {
const [data, setData] = useState<DashboardData | null>(null);
Expand All @@ -27,9 +26,7 @@ const LeaderboardTotals: NextPage = () => {
const fetchData = async () => {
try {
const response = await fetch('/api/dashboard');
if (!response.ok) {
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
}
if (!response.ok) throw new Error('Failed to fetch data');
const result = await response.json();
setData(result);
} catch (err) {
Expand All @@ -51,39 +48,49 @@ const LeaderboardTotals: NextPage = () => {

const totalPartners = data.partners.length;
const helpPrice = data.prices.find(p => p.address === AI16Z_ADDRESS)?.usdPrice || 0;
const totalWorth = data.partners.reduce((sum, partner) => {
return sum + partner.amount * helpPrice;
}, 0);
const totalWorth = data.partners.reduce((sum, partner) => sum + partner.amount * helpPrice, 0);
const newPartners = data.partners.filter(partner =>
new Date(partner.createdAt) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
).length;

return {
totalPartners,
totalWorth,
newPartners: data.partners.filter(partner =>
new Date(partner.createdAt) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
).length
};
return { totalPartners, totalWorth, newPartners };
};

if (isLoading) return <div className={styles.loading}>Loading...</div>;
if (error) return <div className={styles.error}>Error: {error}</div>;
const renderMetric = (value: string | number, label: string) => (
<div className={styles.numberAndBadgeParent}>
<div className={styles.numberAndBadge}>
<div className={styles.number}>{value}</div>
</div>
<div className={styles.headingWrapper}>
<div className={styles.heading}>{label}</div>
</div>
</div>
);

const metrics = calculateMetrics();

return (
<div className={styles.statsContainer}>
<div className={styles.statItem}>
<div className={styles.statValue}>{metrics.totalPartners.toLocaleString()}</div>
<div className={styles.statLabel}>PARTNERS</div>
</div>
<div className={styles.statItem}>
<div className={styles.statValue}>
${(metrics.totalWorth / 1000000).toFixed(2)}m
</div>
<div className={styles.statLabel}>TOTAL WORTH</div>
</div>
<div className={styles.statItem}>
<div className={styles.statValue}>+{metrics.newPartners.toLocaleString()}</div>
<div className={styles.statLabel}>NEW PARTNERS (7D)</div>
<div className={styles.frameParent}>
<div className={styles.instanceParent}>
{isLoading ? (
<>
{renderMetric(<div className="animate-pulse bg-gray-300 h-8 w-24 rounded" />, 'PARTNERS')}
{renderMetric(<div className="animate-pulse bg-gray-300 h-8 w-24 rounded" />, 'TOTAL WORTH')}
{renderMetric(<div className="animate-pulse bg-gray-300 h-8 w-24 rounded" />, 'NEW PARTNERS (7D)')}
</>
) : error ? (
<>
{renderMetric('-', 'PARTNERS')}
{renderMetric('-', 'TOTAL WORTH')}
{renderMetric('-', 'NEW PARTNERS (7D)')}
</>
) : (
<>
{renderMetric(metrics.totalPartners.toLocaleString(), 'PARTNERS')}
{renderMetric(`$${(metrics.totalWorth / 1000000).toFixed(2)}m`, 'TOTAL WORTH')}
{renderMetric(`+${metrics.newPartners}`, 'NEW PARTNERS (7D)')}
</>
)}
</div>
</div>
);
Expand Down
Loading

0 comments on commit 66d1cee

Please sign in to comment.