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', timeZone: 'Asia/Kolkata',
}).format(new Date()); }).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 // 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 = ''; let logoUrl = '';
try { try {
const logoData = readFileSync(logoPath); const logoData = readFileSync(logoPath);
@@ -45,8 +64,8 @@ export async function GET(req: NextRequest) {
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
background: 'linear-gradient(145deg, #050505 0%, #111111 50%, #0a0a0a 100%)', background: bgColor,
color: '#ffffff', color: textColor,
fontFamily: '"Inter", sans-serif', fontFamily: '"Inter", sans-serif',
padding: '70px 0', padding: '70px 0',
}} }}
@@ -59,7 +78,7 @@ export async function GET(req: NextRequest) {
left: 0, left: 0,
right: 0, right: 0,
bottom: 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', backgroundSize: '40px 40px',
zIndex: 0, zIndex: 0,
}} }}
@@ -81,23 +100,23 @@ export async function GET(req: NextRequest) {
{/* Main Content - 2x2 Grid */} {/* Main Content - 2x2 Grid */}
<div style={{ display: 'flex', flexWrap: 'wrap', width: '880px', justifyContent: 'space-between', gap: '32px', marginTop: 20 }}> <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)' }}> <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: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span> <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> <span style={{ fontSize: 64, fontWeight: 900, color: '#facc15', letterSpacing: '-0.02em' }}>{score}</span>
</div> </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)' }}> <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: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span> <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> <span style={{ fontSize: 64, fontWeight: 900, color: '#34d399', letterSpacing: '-0.02em' }}>{accuracy}</span>
</div> </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)' }}> <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: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span> <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> <span style={{ fontSize: 64, fontWeight: 900, color: '#38bdf8', letterSpacing: '-0.02em' }}>{qs}</span>
</div> </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)' }}> <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: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span> <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> <span style={{ fontSize: 64, fontWeight: 900, color: '#a78bfa', letterSpacing: '-0.02em' }}>{rank}</span>
</div> </div>
@@ -106,7 +125,7 @@ export async function GET(req: NextRequest) {
{/* Footer */} {/* Footer */}
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', marginTop: 20 }}> <div style={{ display: 'flex', flexDirection: 'column', width: '100%', marginTop: 20 }}>
{/* Divider */} {/* 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', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -116,20 +135,20 @@ export async function GET(req: NextRequest) {
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column' }}> <div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ fontSize: 44, fontWeight: 900, color: '#ffffff', letterSpacing: '-0.02em' }}>{name}</div> <div style={{ fontSize: 44, fontWeight: 900, color: textColor, letterSpacing: '-0.02em' }}>{name}</div>
<div style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>Generated: {exportDate}</div> <div style={{ fontSize: 20, color: textSec, marginTop: 4 }}>Generated: {exportDate}</div>
<div style={{ display: 'flex', marginTop: 8 }}> <div style={{ display: 'flex', marginTop: 8 }}>
<div style={{ fontSize: 22, color: '#06b6d4', fontWeight: 700, marginRight: 16 }}>{`${target} Aspirant`}</div> <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: textSec, 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: textTert, fontWeight: 600, marginLeft: 16 }}>{`${plan} Plan`}</div>
</div> </div>
</div> </div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '4px' }}> <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: textTert, 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: textSec, 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: textSec, fontWeight: 600 }}>+91 9079337961</div>
</div> </div>
</div> </div>
</div> </div>

11
src/app/dashboard/page.tsx
View File

@@ -4,7 +4,7 @@ import { useRef, useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { BrainCircuit, Play, ChevronRight, Activity, Target, CheckCircle2, AlertTriangle, TrendingUp, Calendar, Zap, LayoutDashboard, Share2, Trophy, Lock, ArrowRight, Clock, Facebook, Download, MessageCircle } from "lucide-react" import { BrainCircuit, Play, ChevronRight, Activity, Target, CheckCircle2, AlertTriangle, TrendingUp, Calendar, Zap, LayoutDashboard, Share2, Trophy, Lock, ArrowRight, Clock, Download } from "lucide-react"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap" import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
import { AdaptiveStudyPlan } from "@/components/AI/AdaptiveStudyPlan" import { AdaptiveStudyPlan } from "@/components/AI/AdaptiveStudyPlan"
import { useActiveUser } from "@/hooks/useActiveUser" import { useActiveUser } from "@/hooks/useActiveUser"
@@ -55,7 +55,10 @@ export default function DashboardPage() {
timeZone: 'Asia/Kolkata', timeZone: 'Asia/Kolkata',
}).format(new Date()); }).format(new Date());
return `/api/og/dashboard?score=${encodeURIComponent(score)}&accuracy=${encodeURIComponent(accuracy)}&qs=${encodeURIComponent(qs)}&rank=${encodeURIComponent(rank)}&name=${encodeURIComponent(name)}&target=${target}&plan=${encodeURIComponent(plan)}&date=${encodeURIComponent(date)}` const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
const themeParam = isDark ? 'dark' : 'light';
return `/api/og/dashboard?score=${encodeURIComponent(score)}&accuracy=${encodeURIComponent(accuracy)}&qs=${encodeURIComponent(qs)}&rank=${encodeURIComponent(rank)}&name=${encodeURIComponent(name)}&target=${target}&plan=${encodeURIComponent(plan)}&date=${encodeURIComponent(date)}&theme=${themeParam}`
} }
const handleDownload = async () => { const handleDownload = async () => {
@@ -131,11 +134,11 @@ export default function DashboardPage() {
{shareMenuOpen && ( {shareMenuOpen && (
<div className="absolute right-0 top-full mt-2 w-48 bg-card border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200"> <div className="absolute right-0 top-full mt-2 w-48 bg-card border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200">
<button onClick={handleShareFacebook} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors"> <button onClick={handleShareFacebook} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
<Facebook size={16} className="mr-3 text-blue-600" /> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-blue-600"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
Share on Facebook Share on Facebook
</button> </button>
<button onClick={handleShareWhatsApp} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors"> <button onClick={handleShareWhatsApp} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors">
<MessageCircle size={16} className="mr-3 text-green-500" /> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3 text-green-500"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
Share on WhatsApp Share on WhatsApp
</button> </button>
<button onClick={handleDownload} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors border-t border-border"> <button onClick={handleDownload} className="flex items-center w-full px-4 py-3 text-sm hover:bg-secondary text-left transition-colors border-t border-border">