From 66d1cee9167680fa7b3f774aebeba0966a53b2f0 Mon Sep 17 00:00:00 2001 From: futjr Date: Tue, 5 Nov 2024 01:05:13 +0000 Subject: [PATCH] leaderboard styles --- src/components/LeaderboardTotals.module.css | 238 +++----------------- src/components/LeaderboardTotals.tsx | 69 +++--- src/components/ProfileTotals.module.css | 14 +- src/components/ProfileTotals.tsx | 10 +- src/views/home/index.module.css | 80 +++++++ src/views/home/index.tsx | 33 +-- src/views/leaderboard/index.tsx | 4 + 7 files changed, 166 insertions(+), 282 deletions(-) create mode 100644 src/views/home/index.module.css create mode 100644 src/views/leaderboard/index.tsx diff --git a/src/components/LeaderboardTotals.module.css b/src/components/LeaderboardTotals.module.css index 35e21fe..1ab8d92 100644 --- a/src/components/LeaderboardTotals.module.css +++ b/src/components/LeaderboardTotals.module.css @@ -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; @@ -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 { @@ -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; } } diff --git a/src/components/LeaderboardTotals.tsx b/src/components/LeaderboardTotals.tsx index e1414f4..97a5e0a 100644 --- a/src/components/LeaderboardTotals.tsx +++ b/src/components/LeaderboardTotals.tsx @@ -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(null); @@ -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) { @@ -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
Loading...
; - if (error) return
Error: {error}
; + const renderMetric = (value: string | number, label: string) => ( +
+
+
{value}
+
+
+
{label}
+
+
+ ); const metrics = calculateMetrics(); return ( -
-
-
{metrics.totalPartners.toLocaleString()}
-
PARTNERS
-
-
-
- ${(metrics.totalWorth / 1000000).toFixed(2)}m -
-
TOTAL WORTH
-
-
-
+{metrics.newPartners.toLocaleString()}
-
NEW PARTNERS (7D)
+
+
+ {isLoading ? ( + <> + {renderMetric(
, 'PARTNERS')} + {renderMetric(
, 'TOTAL WORTH')} + {renderMetric(
, '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)')} + + )}
); diff --git a/src/components/ProfileTotals.module.css b/src/components/ProfileTotals.module.css index 00af56d..ac05669 100644 --- a/src/components/ProfileTotals.module.css +++ b/src/components/ProfileTotals.module.css @@ -272,6 +272,14 @@ justify-content: center; } +.metricText { + font-size: 34px; + line-height: 42px; + font-weight: 600; + font-family: 'SF Compact Rounded'; + color: #FFFFFF; +} + .tooltip { visibility: hidden; position: absolute; @@ -306,9 +314,3 @@ border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; } -.trustScoreImage { - width: 20px; - height: 20px; - object-fit: contain; -} - diff --git a/src/components/ProfileTotals.tsx b/src/components/ProfileTotals.tsx index 11e5490..07922c2 100644 --- a/src/components/ProfileTotals.tsx +++ b/src/components/ProfileTotals.tsx @@ -112,15 +112,9 @@ const ProfileTotals: NextPage = ({ onViewChange = () => {} }
{label === 'TRUST SCORE' && value === '0.0' ? (
- Null trust score + - - AI Marc is Calculating Your Trust + Your Trust Score is Not Yet Calculated
) : ( diff --git a/src/views/home/index.module.css b/src/views/home/index.module.css new file mode 100644 index 0000000..b6634de --- /dev/null +++ b/src/views/home/index.module.css @@ -0,0 +1,80 @@ +.container { + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0 8px; +} + +.content { + width: 100%; + max-width: 600px; + margin: 0 auto; +} + +.title { + font-size: 34px; + line-height: 42px; + font-weight: 600; + color: #242424; + margin-bottom: 24px; +} + +.buttonParent { + border-radius: 14px; + background-color: #e8e3d6; + overflow: hidden; + display: flex; + flex-direction: row; + align-items: left; + justify-content: flex-start; + padding: 4px; + margin-bottom: 24px; +} + +.button { + width: 110px; + border-radius: 14px; + background-color: #b5ad94; + height: 38px; + overflow: hidden; + flex-shrink: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 8px 14px; + box-sizing: border-box; + max-width: 600px; + color: #FFFFFF; +} + +.button1 { + width: 110px; + border-radius: 14px; + background-color: transparent; + height: 38px; + overflow: hidden; + flex-shrink: 0; + 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; +} + +@media (max-width: 768px) { + .container { + padding: 0; + } + + .content { + padding: 0 8px; + } +} \ No newline at end of file diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx index f4e696f..5cad2c7 100644 --- a/src/views/home/index.tsx +++ b/src/views/home/index.tsx @@ -1,42 +1,17 @@ // FILE: src/views/HomeView.tsx import { FC, useState } from 'react'; +import styles from './index.module.css'; import LeaderboardTotals from '../../components/LeaderboardTotals'; import LeaderboardPartners from '../../components/LeaderboardPartners'; -// import LeaderboardHoldings from '../../components/LeaderboardHoldings'; -// import LeaderboardHoldingTotals from '../../components/LeaderboardHoldingTotals'; export const HomeView: FC = () => { - // const [activeView, setActiveView] = useState<'partners' | 'holdings'>('partners'); - return ( -
-
+
+
-

+

Leaderboard

- {/*
- - -
*/}
diff --git a/src/views/leaderboard/index.tsx b/src/views/leaderboard/index.tsx new file mode 100644 index 0000000..327780f --- /dev/null +++ b/src/views/leaderboard/index.tsx @@ -0,0 +1,4 @@ +
+ + {/* other components */} +
\ No newline at end of file