268 lines
9.1 KiB
TypeScript
268 lines
9.1 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import axios from 'axios';
|
|
import {
|
|
Treemap,
|
|
Tooltip as ReTooltip,
|
|
ResponsiveContainer
|
|
} from 'recharts';
|
|
|
|
export default function Home() {
|
|
const [url, setUrl] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [reports, setReports] = useState<any>(null);
|
|
const [error, setError] = useState('');
|
|
const [activeTab, setActiveTab] = useState<'mobile' | 'desktop'>('mobile');
|
|
|
|
// --- Helper to parse estimated savings like "1.2 s" or "1200 ms" ---
|
|
function parseSavings(value: string): number {
|
|
if (!value) return 0;
|
|
const val = parseFloat(value);
|
|
if (value.toLowerCase().includes('ms')) return val;
|
|
if (value.toLowerCase().includes('s')) return val * 1000;
|
|
return val;
|
|
}
|
|
|
|
const handleAudit = async () => {
|
|
if (!url) return setError('Enter a URL');
|
|
|
|
setLoading(true);
|
|
setError('');
|
|
setReports(null);
|
|
|
|
try {
|
|
const { data } = await axios.post('https://api.crawlerx.co/api/lighthouse/audit', { url });
|
|
|
|
// normalize the results
|
|
const normalizedResults: any = {};
|
|
['mobile', 'desktop'].forEach((tab) => {
|
|
const tabData = data.results?.[tab] || {};
|
|
normalizedResults[tab] = {
|
|
report: {
|
|
scores: tabData.scores || {},
|
|
metrics: tabData.metrics || {},
|
|
opportunities: Array.isArray(tabData.opportunities) ? tabData.opportunities : [],
|
|
diagnostics: tabData.diagnostics || {},
|
|
screenshot: tabData.screenshot || '',
|
|
},
|
|
};
|
|
});
|
|
|
|
setReports(normalizedResults);
|
|
setActiveTab('mobile');
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.message || err.message || 'Error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const renderScoreCircle = (score: number) => {
|
|
const color =
|
|
score >= 90 ? 'text-green-500 border-green-500' :
|
|
score >= 50 ? 'text-yellow-500 border-yellow-500' :
|
|
'text-red-500 border-red-500';
|
|
|
|
return (
|
|
<div className={`w-20 h-20 flex items-center justify-center rounded-full border-4 ${color}`}>
|
|
<span className="text-lg font-bold">{score}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderMetrics = (metrics: Record<string, any> = {}) => (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
|
|
{Object.entries(metrics).map(([key, value]) => (
|
|
<div key={key} className="bg-white p-4 rounded-lg shadow text-center">
|
|
<p className="text-sm font-medium text-gray-600">
|
|
{key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
|
|
</p>
|
|
<p className="mt-2 font-semibold text-gray-800">{value ?? '-'}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
|
|
const renderOpportunities = (opportunities: any[] = []) => (
|
|
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
|
<h3 className="text-lg font-semibold mb-4">Opportunities</h3>
|
|
{opportunities.length === 0 && <p className="text-gray-500">No suggestions available.</p>}
|
|
{opportunities.map((op, idx) => (
|
|
<div key={idx} className="mb-3 border-b last:border-b-0 pb-2">
|
|
<p className="font-medium">{op.title ?? '-'}</p>
|
|
<p className="text-gray-500 text-sm">{op.description ?? '-'}</p>
|
|
{op.estimatedSavings && (
|
|
<p className="text-xs text-blue-600">Estimated Savings: {op.estimatedSavings}</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
const renderTreeMap = (opportunities: any[] = []) => {
|
|
if (opportunities.length === 0) return null;
|
|
|
|
const data = opportunities.map(op => ({
|
|
name: op.title || 'Untitled',
|
|
size: parseSavings(op.estimatedSavings)
|
|
}));
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
|
<h3 className="text-lg font-semibold mb-4">Opportunities Tree Map</h3>
|
|
<div style={{ width: '100%', height: 400 }}>
|
|
<ResponsiveContainer>
|
|
<Treemap
|
|
data={data}
|
|
dataKey="size"
|
|
nameKey="name"
|
|
stroke="#fff"
|
|
fill="#3182ce"
|
|
>
|
|
<ReTooltip
|
|
content={({ payload }) => {
|
|
if (!payload || payload.length === 0) return null;
|
|
const item = payload[0].payload;
|
|
return (
|
|
<div className="bg-white text-gray-800 p-2 rounded shadow">
|
|
<p className="font-semibold">{item.name}</p>
|
|
<p>{item.size} ms estimated savings</p>
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
</Treemap>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderDiagnostics = (diagnostics: any = {}) => {
|
|
const keys = Object.keys(diagnostics);
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
|
<h3 className="text-lg font-semibold mb-4">Diagnostics</h3>
|
|
{keys.length === 0 && <p className="text-gray-500">No diagnostics available.</p>}
|
|
<div className="divide-y divide-gray-200">
|
|
{keys.map((key) => (
|
|
<div key={key} className="py-3 flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">
|
|
{key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
|
|
</p>
|
|
{key === 'http2' && (
|
|
<p className="text-xs text-gray-500">
|
|
All resources should be served via HTTP/2 for better performance.
|
|
</p>
|
|
)}
|
|
</div>
|
|
<span
|
|
className={`px-2 py-1 text-xs font-bold rounded ${diagnostics[key] ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'
|
|
}`}
|
|
>
|
|
{diagnostics[key] ? 'Pass' : 'Fail'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const currentReport = reports?.[activeTab]?.report || {
|
|
scores: {},
|
|
metrics: {},
|
|
opportunities: [],
|
|
diagnostics: {},
|
|
screenshot: '',
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex flex-col items-center p-4 sm:p-8">
|
|
<h1 className="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 text-center">
|
|
Lighthouse PageSpeed Audit
|
|
</h1>
|
|
|
|
{/* Input */}
|
|
<div className="flex flex-col sm:flex-row gap-4 w-full max-w-xl mb-4">
|
|
<input
|
|
type="text"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
placeholder="Enter URL"
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<button
|
|
onClick={handleAudit}
|
|
disabled={loading}
|
|
className={`px-4 py-2 rounded-lg font-semibold text-white shadow-md transition ${loading ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'
|
|
}`}
|
|
>
|
|
{loading ? 'Auditing...' : 'Run Audit'}
|
|
</button>
|
|
</div>
|
|
|
|
{error && <p className="text-red-500 mt-2 text-center">{error}</p>}
|
|
|
|
{reports && (
|
|
<div className="w-full max-w-6xl mt-8">
|
|
{/* Tabs */}
|
|
<div className="flex gap-4 mb-4">
|
|
<button
|
|
className={`px-4 py-2 rounded-t-lg font-semibold ${activeTab === 'mobile' ? 'bg-blue-600 text-white' : 'bg-gray-200'}`}
|
|
onClick={() => setActiveTab('mobile')}
|
|
>
|
|
Mobile
|
|
</button>
|
|
<button
|
|
className={`px-4 py-2 rounded-t-lg font-semibold ${activeTab === 'desktop' ? 'bg-green-600 text-white' : 'bg-gray-200'}`}
|
|
onClick={() => setActiveTab('desktop')}
|
|
>
|
|
Desktop
|
|
</button>
|
|
</div>
|
|
|
|
{/* Top Scores */}
|
|
<div className="flex flex-wrap gap-6 justify-center mb-6">
|
|
{['performance', 'accessibility', 'bestPractices', 'seo', 'pwa'].map((key) => {
|
|
const score = currentReport.scores?.[key];
|
|
if (score === undefined || score === null) return null;
|
|
return (
|
|
<div key={key} className="text-center">
|
|
<p className="text-sm font-medium">{key.charAt(0).toUpperCase() + key.slice(1)}</p>
|
|
{renderScoreCircle(score)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Metrics */}
|
|
{renderMetrics(currentReport.metrics)}
|
|
|
|
{/* Opportunities */}
|
|
{renderOpportunities(currentReport.opportunities)}
|
|
|
|
{/* Tree Map */}
|
|
{renderTreeMap(currentReport.opportunities)}
|
|
|
|
{/* Diagnostics */}
|
|
{renderDiagnostics(currentReport.diagnostics)}
|
|
|
|
{/* Screenshot */}
|
|
{currentReport.screenshot && (
|
|
<div className="flex justify-center mb-6">
|
|
<img
|
|
src={currentReport.screenshot}
|
|
alt={`${activeTab} screenshot`}
|
|
className="border shadow rounded max-w-full h-auto"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|