perf: change the DA to something more readable
This commit is contained in:
@@ -19,9 +19,9 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
|
||||
if (status !== "authenticated") return null;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<div className="flex min-h-screen bg-[#0d1117]">
|
||||
<Sidebar />
|
||||
<main className="ml-56 flex-1 p-8">
|
||||
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -69,7 +69,7 @@ export default function TikTokPage() {
|
||||
<Music2 size={18} className="text-pink-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/50 uppercase mb-0.5">Plateforme</div>
|
||||
<div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/70 uppercase mb-0.5">Plateforme</div>
|
||||
<h1 className="text-2xl font-black tracking-widest text-white uppercase">TikTok</h1>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,8 +99,8 @@ export default function TikTokPage() {
|
||||
|
||||
{/* Chargement */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center min-h-[200px] gap-3 text-[#3a5a3a] font-mono text-xs">
|
||||
<Loader2 size={16} className="animate-spin text-pink-400/40" />
|
||||
<div className="flex items-center justify-center min-h-[200px] gap-3 text-[#6a8a6a] font-mono text-xs">
|
||||
<Loader2 size={16} className="animate-spin text-pink-400/60" />
|
||||
Chargement...
|
||||
</div>
|
||||
)}
|
||||
@@ -109,12 +109,12 @@ export default function TikTokPage() {
|
||||
{!loading && stats && (
|
||||
<>
|
||||
{stats.displayName && (
|
||||
<div className="flex items-center gap-3 mb-6 px-4 py-3 bg-pink-500/5 border border-pink-500/20 rounded-sm">
|
||||
<div className="flex items-center gap-3 mb-6 px-4 py-3 bg-pink-500/8 border border-pink-500/25 rounded-sm">
|
||||
{stats.avatarUrl && (
|
||||
<img src={stats.avatarUrl} alt="avatar" className="w-8 h-8 rounded-full object-cover border border-pink-500/20" />
|
||||
<img src={stats.avatarUrl} alt="avatar" className="w-8 h-8 rounded-full object-cover border border-pink-500/30" />
|
||||
)}
|
||||
<span className="text-pink-400 font-mono text-sm font-bold">{stats.displayName}</span>
|
||||
<span className="text-[9px] font-mono tracking-widest text-pink-400/30 uppercase ml-auto">Connecté</span>
|
||||
<span className="text-pink-300 font-mono text-sm font-bold">{stats.displayName}</span>
|
||||
<span className="text-[9px] font-mono tracking-widest text-pink-400/50 uppercase ml-auto">Connecté</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -149,14 +149,14 @@ export default function TikTokPage() {
|
||||
|
||||
{/* Non connecté */}
|
||||
{!loading && !stats && !error && (
|
||||
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]">
|
||||
<Music2 size={36} className="text-pink-400/15" />
|
||||
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center uppercase">
|
||||
<div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]">
|
||||
<Music2 size={36} className="text-pink-400/30" />
|
||||
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center uppercase">
|
||||
Connectez votre compte TikTok<br />pour afficher vos statistiques
|
||||
</p>
|
||||
<a
|
||||
href="/api/tiktok/connect"
|
||||
className="flex items-center gap-2 px-5 py-2.5 text-[10px] font-mono tracking-widest uppercase bg-pink-500/10 border border-pink-500/30 text-pink-400 hover:bg-pink-500/20 hover:border-pink-500/50 rounded-sm transition-colors"
|
||||
className="flex items-center gap-2 px-5 py-2.5 text-[10px] font-mono tracking-widest uppercase bg-pink-500/10 border border-pink-500/40 text-pink-300 hover:bg-pink-500/20 hover:border-pink-500/60 rounded-sm transition-colors"
|
||||
>
|
||||
<Link2 size={13} />
|
||||
Connecter TikTok
|
||||
@@ -166,10 +166,10 @@ export default function TikTokPage() {
|
||||
|
||||
{/* Erreur API */}
|
||||
{!loading && error && (
|
||||
<div className="bg-[#0d1210] border border-red-500/20 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
|
||||
<AlertTriangle size={28} className="text-red-400/40" />
|
||||
<p className="text-red-400/60 font-mono text-xs tracking-widest text-center uppercase">{error}</p>
|
||||
<button onClick={loadStats} className="text-[10px] font-mono tracking-widest text-[#3a5a3a] hover:text-pink-400 uppercase transition-colors">
|
||||
<div className="bg-[#111a14] border border-red-500/25 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
|
||||
<AlertTriangle size={28} className="text-red-400/60" />
|
||||
<p className="text-red-400/80 font-mono text-xs tracking-widest text-center uppercase">{error}</p>
|
||||
<button onClick={loadStats} className="text-[10px] font-mono tracking-widest text-[#6a8a6a] hover:text-pink-400 uppercase transition-colors">
|
||||
Réessayer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user