178 lines
6.8 KiB
React
178 lines
6.8 KiB
React
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Code, Copy, CheckCircle, ExternalLink, HelpCircle } from 'lucide-react'
|
|
|
|
export default function CodeExample({ framework }) {
|
|
const examplesUrl = framework?.exemplos;
|
|
const color = framework?.cor || '#6B7280';
|
|
|
|
const [sample, setSample] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setSample('');
|
|
setError(null);
|
|
setLoading(false);
|
|
|
|
if (!framework) return;
|
|
|
|
const exemploPath = framework.exemplo;
|
|
if (!exemploPath) {
|
|
const msg = `// Exemplos completos: ${examplesUrl || 'Ver repositório'}\n// Abra o link acima para ver exemplos e código completo.\n`;
|
|
setSample(msg);
|
|
return;
|
|
}
|
|
|
|
const url = exemploPath.startsWith('/') ? exemploPath : `/${exemploPath}`;
|
|
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
|
|
fetch(url)
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
return res.text();
|
|
})
|
|
.then((text) => {
|
|
if (cancelled) return;
|
|
if (text && text.trim().length > 0) {
|
|
setSample(text);
|
|
} else {
|
|
setSample(`// Arquivo de exemplo está vazio. Consulte o repositório oficial.\n`);
|
|
setError('Arquivo vazio');
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
if (cancelled) return;
|
|
setSample(`// Não foi possível carregar o exemplo localmente.\n// Consulte o link do GitHub acima para exemplos funcionais.\n`);
|
|
setError(err.message || 'Falha ao carregar exemplo');
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [framework?.exemplo, framework?.exemplos]);
|
|
|
|
const lines = (sample || '').split('\n');
|
|
|
|
async function handleCopy() {
|
|
try {
|
|
await navigator.clipboard.writeText(sample);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch {}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-6 md:p-8 border border-slate-300 dark:border-slate-800/80 shadow-2xl mb-8 animate-fadeIn">
|
|
<div className="md:flex items-center justify-between gap-6 mb-6">
|
|
<div className="select-none">
|
|
<h3 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-1 flex items-center gap-2">
|
|
<Code className="w-5 h-5" style={{ color }} />
|
|
<span>Demonstração de Código</span>
|
|
</h3>
|
|
<p className="text-xs text-slate-500 dark:text-slate-400 font-semibold">Trecho de inicialização rápida. Copie e personalize em seu projeto.</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2.5 mt-4 md:mt-0 select-none">
|
|
<span
|
|
className="inline-flex items-center text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider"
|
|
style={{
|
|
backgroundColor: `${color}18`,
|
|
color,
|
|
border: `1px solid ${color}25`
|
|
}}
|
|
>
|
|
{framework?.linguagem || 'Código'}
|
|
</span>
|
|
|
|
<button
|
|
onClick={handleCopy}
|
|
className="inline-flex items-center gap-1.5 bg-slate-50 dark:bg-slate-850 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-250 px-3.5 py-2 rounded-xl font-bold text-xs shadow-xs border border-slate-300 dark:border-slate-800/80 cursor-pointer transition active:scale-95"
|
|
title="Copiar código para a área de transferência"
|
|
>
|
|
{copied ? (
|
|
<>
|
|
<CheckCircle className="w-3.5 h-3.5 text-emerald-500" />
|
|
<span className="text-emerald-600 dark:text-emerald-450">Copiado!</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Copy className="w-3.5 h-3.5" />
|
|
<span>Copiar</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
{examplesUrl && (
|
|
<a
|
|
href={examplesUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-bold text-white shadow-lg active:scale-95 transition hover:opacity-95"
|
|
style={{
|
|
background: `linear-gradient(90deg, ${color} 0%, rgba(147,51,234,1) 100%)`,
|
|
boxShadow: `0 8px 20px -8px ${color}`
|
|
}}
|
|
title="Abrir exemplos no GitHub"
|
|
>
|
|
<span>Mais Exemplos</span>
|
|
<ExternalLink className="w-3.5 h-3.5" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl overflow-hidden border border-slate-300 dark:border-slate-800/80 shadow-md">
|
|
<div className="select-none">
|
|
<div className="flex items-center justify-between bg-slate-100/80 dark:bg-slate-950/70 border-b border-slate-300 dark:border-slate-850/60 px-4 py-3.5">
|
|
<div className="text-xs font-bold text-slate-750 dark:text-slate-250 flex items-center gap-1.5">
|
|
<span className="w-2.5 h-2.5 rounded-full bg-red-500/80" />
|
|
<span className="w-2.5 h-2.5 rounded-full bg-yellow-500/80" />
|
|
<span className="w-2.5 h-2.5 rounded-full bg-green-500/80" />
|
|
<span className="ml-2 font-mono text-[10px] text-slate-500 dark:text-slate-400">{framework?.nome} example</span>
|
|
</div>
|
|
<div className="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">
|
|
{loading ? 'Buscando exemplo...' : (framework?.exemplo ? 'Local Source' : 'External GitHub')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex bg-slate-950">
|
|
<pre
|
|
className="text-slate-200 p-5 w-full overflow-auto text-xs leading-relaxed scrollbar-thin select-text"
|
|
style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace' }}
|
|
>
|
|
{lines.map((line, idx) => (
|
|
<div key={idx} className="flex">
|
|
<span className="text-slate-500 pr-4 text-right w-8 select-none border-r border-slate-900/60 mr-4 font-semibold">{idx + 1}</span>
|
|
<code className="whitespace-pre flex-1 text-left">{line === '' ? '\u00A0' : line}</code>
|
|
</div>
|
|
))}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-3.5 mt-3 select-none">
|
|
<p className="text-[10px] font-bold text-red-600 dark:text-red-400">
|
|
Nota: Não foi possível carregar o arquivo de exemplo local ({error}). Use o botão "Mais Exemplos" para ver os códigos oficiais.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-4 flex items-start gap-2 bg-slate-50/50 dark:bg-slate-950/20 border border-slate-150/40 dark:border-slate-850/40 p-4 rounded-2xl select-none">
|
|
<HelpCircle className="w-4.5 h-4.5 text-purple-500 shrink-0 mt-0.5" />
|
|
<p className="text-[10px] font-semibold text-slate-500 dark:text-slate-400 leading-relaxed">
|
|
<strong>Dica de Desenvolvimento:</strong> Personalize o trecho de inicialização com as pinagens e configurações corretas correspondentes à série do seu microcontrolador (ex: ESP32-S3, ESP32-C6). A documentação detalhada da API pode ser acessada na barra superior do framework.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |