naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dynamic theme support to OG share card and fix lucide-react imports

Browse Source
This commit is contained in:
ectasy663
2026-09-22 20:56:03 +05:30
parent 18006c97ac
commit 217dc2f65e
2 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/api/og/dashboard/route.tsx
View File

@@ -25,8 +25,27 @@ export async function GET(req: NextRequest) {
timeZone: 'Asia/Kolkata',
}).format(new Date());
// Read theme
const theme = searchParams.get('theme') || 'dark';
const isDark = theme === 'dark';
// Theme Variables
const bgColor = isDark
? 'linear-gradient(145deg, #050505 0%, #111111 50%, #0a0a0a 100%)'
: 'linear-gradient(145deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%)';
const textColor = isDark ? '#ffffff' : '#0f172a';
const gridColor = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
const cardBg = isDark
? 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)'
: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)';
const cardBorder = isDark ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.05)';
const textSec = isDark ? 'rgba(255,255,255,0.5)' : 'rgba(15,23,42,0.5)';
const textTert = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(15,23,42,0.7)';
const dividerColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
const logoName = isDark ? 'Rectangular_dark_background.png' : 'Rectangular_light_background.png';
// Load logo from disk and convert to base64
const logoPath = join(process.cwd(), 'public', 'PragatiVeer_Logo', 'PNG_Logos', 'Rectangular_dark_background.png');
const logoPath = join(process.cwd(), 'public', 'PragatiVeer_Logo', 'PNG_Logos', logoName);
let logoUrl = '';
try {
const logoData = readFileSync(logoPath);
@@ -45,8 +64,8 @@ export async function GET(req: NextRequest) {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
background: 'linear-gradient(145deg, #050505 0%, #111111 50%, #0a0a0a 100%)',
color: '#ffffff',
background: bgColor,
color: textColor,
fontFamily: '"Inter", sans-serif',
padding: '70px 0',
}}
@@ -59,7 +78,7 @@ export async function GET(req: NextRequest) {
left: 0,
right: 0,
bottom: 0,
backgroundImage: 'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0)',
backgroundImage: `radial-gradient(circle at 2px 2px, ${gridColor} 1px, transparent 0)`,
backgroundSize: '40px 40px',
zIndex: 0,
}}
@@ -81,23 +100,23 @@ export async function GET(req: NextRequest) {
{/* Main Content - 2x2 Grid */}
<div style={{ display: 'flex', flexWrap: 'wrap', width: '880px', justifyContent: 'space-between', gap: '32px', marginTop: 20 }}>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
<span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span>
<span style={{ fontSize: 64, fontWeight: 900, color: '#facc15', letterSpacing: '-0.02em' }}>{score}</span>
</div>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
<span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span>
<span style={{ fontSize: 64, fontWeight: 900, color: '#34d399', letterSpacing: '-0.02em' }}>{accuracy}</span>
</div>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
<span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span>
<span style={{ fontSize: 64, fontWeight: 900, color: '#38bdf8', letterSpacing: '-0.02em' }}>{qs}</span>
</div>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: cardBg, borderRadius: 36, border: cardBorder, boxShadow: isDark ? 'none' : '0 10px 25px rgba(0,0,0,0.02)' }}>
<span style={{ fontSize: 20, color: textSec, textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span>
<span style={{ fontSize: 64, fontWeight: 900, color: '#a78bfa', letterSpacing: '-0.02em' }}>{rank}</span>
</div>
@@ -106,7 +125,7 @@ export async function GET(req: NextRequest) {
{/* Footer */}
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', marginTop: 20 }}>
{/* Divider */}
<div style={{ width: '100%', height: '1px', backgroundColor: 'rgba(255,255,255,0.1)', marginBottom: 40 }} />
<div style={{ width: '100%', height: '1px', backgroundColor: dividerColor, marginBottom: 40 }} />
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
@@ -116,20 +135,20 @@ export async function GET(req: NextRequest) {
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ fontSize: 44, fontWeight: 900, color: '#ffffff', letterSpacing: '-0.02em' }}>{name}</div>
<div style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>Generated: {exportDate}</div>
<div style={{ fontSize: 44, fontWeight: 900, color: textColor, letterSpacing: '-0.02em' }}>{name}</div>
<div style={{ fontSize: 20, color: textSec, marginTop: 4 }}>Generated: {exportDate}</div>
<div style={{ display: 'flex', marginTop: 8 }}>
<div style={{ fontSize: 22, color: '#06b6d4', fontWeight: 700, marginRight: 16 }}>{`${target} Aspirant`}</div>
<div style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>•</div>
<div style={{ fontSize: 22, color: 'rgba(255,255,255,0.7)', fontWeight: 600, marginLeft: 16 }}>{`${plan} Plan`}</div>
<div style={{ fontSize: 22, color: textSec, fontWeight: 600 }}>•</div>
<div style={{ fontSize: 22, color: textTert, fontWeight: 600, marginLeft: 16 }}>{`${plan} Plan`}</div>
</div>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '4px' }}>
<div style={{ fontSize: 22, color: 'rgba(255,255,255,0.7)', fontWeight: 600 }}>pragativeer.com</div>
<div style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>contact@pragativeer.com</div>
<div style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>+91 9079337961</div>
<div style={{ fontSize: 22, color: textTert, fontWeight: 600 }}>pragativeer.com</div>
<div style={{ fontSize: 22, color: textSec, fontWeight: 600 }}>contact@pragativeer.com</div>
<div style={{ fontSize: 22, color: textSec, fontWeight: 600 }}>+91 9079337961</div>
</div>
</div>
</div>