import React from 'react';
import { Menu, Trophy, HandHeart, ShoppingCart, Package, ChevronDown, Calendar, RefreshCcw } from 'lucide-react';
export default function Dashboard() {
return (
<div className="min-h-screen bg-[#0B1014] text-gray-100 font-sans max-w-md mx-auto flex flex-col">
{/* Header */}
<header className="flex justify-between items-center p-5 border-b border-[#1A2227]">
<div className="flex items-center gap-4">
<Menu className="text-[#3A6B74] w-6 h-6 cursor-pointer" />
<div className="flex flex-col">
<span className="text-sm font-medium">👋 Olá Usuário,</span>
<span className="text-sm text-gray-400">seja bem vindo!</span>
</div>
</div>
<div className="flex flex-col items-end gap-1">
<span className="text-xs text-gray-300">R$ 0K / R$ 100k</span>
<div className="w-24 h-1.5 bg-[#1A2227] rounded-full overflow-hidden">
<div className="w-0 h-full bg-[#18363E]"></div>
</div>
</div>
</header>
<main className="p-5 flex-1">
{/* Subheader */}
<div className="mb-6">
<p className="text-[15px] text-gray-300 mb-5 leading-snug">
Trackeamento eficiente para seus anúncios no Kwai.
</p>
<div className="flex justify-between items-center">
<a href="#" className="text-sm text-gray-400 underline decoration-gray-500 underline-offset-4 hover:text-gray-200 transition-colors">
Precisa de ajuda?
</a>
<button className="bg-[#122A30] text-[#48A5B2] px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-[#16353D] transition-colors">
Sua Opinião importa
</button>
</div>
</div>
{/* Cards */}
<div className="flex flex-col gap-3.5 mb-8">
<Card
title="Vendas aprovadas"
value="R$ 0,00"
icon={<Trophy size={20} strokeWidth={1.5} />}
valueColor="text-[#68A057]"
iconColor="text-[#68A057]"
/>
<Card
title="Pagos"
value="0"
icon={<HandHeart size={20} strokeWidth={1.5} />}
valueColor="text-[#68A057]"
iconColor="text-[#68A057]"
/>
<Card
title="Adicionado ao carrinho"
value="0"
icon={<ShoppingCart size={20} strokeWidth={1.5} />}
valueColor="text-[#48A5B2]"
iconColor="text-[#48A5B2]"
/>
<Card
title="Total de produtos"
value="0"
icon={<Package size={20} strokeWidth={1.5} />}
valueColor="text-[#48A5B2]"
iconColor="text-[#48A5B2]"
/>
</div>
{/* Chart Section */}
<div className="border border-[#1A2227] rounded-xl p-5 bg-[#0D1317]">
<h2 className="text-[17px] text-gray-200 mb-4">Pixels marcados</h2>
<div className="flex flex-col gap-3.5 mb-4">
<div className="relative">
<select className="w-full bg-[#0B1014] border border-[#1A2227] rounded-lg p-3.5 text-[15px] text-gray-300 appearance-none outline-none focus:border-[#48A5B2]">
<option>Todos os produtos</option>
</select>
<ChevronDown className="absolute right-4 top-4 w-4 h-4 text-gray-500 pointer-events-none" />
</div>
<div className="relative">
<select className="w-full bg-[#0B1014] border border-[#1A2227] rounded-lg p-3.5 text-[15px] text-gray-300 appearance-none outline-none focus:border-[#48A5B2]">
<option>GMT-03:00 (Brazil)</option>
</select>
<ChevronDown className="absolute right-4 top-4 w-4 h-4 text-gray-500 pointer-events-none" />
</div>
</div>
<div className="flex gap-3 mb-8">
<div className="flex-1 flex items-center bg-[#0B1014] border border-[#1A2227] rounded-lg p-3.5 text-[14px] text-gray-300">
<Calendar className="w-4 h-4 text-[#3A6B74] mr-3" />
01 mai - 31 mai 2026
</div>
<button className="bg-[#122A30] text-[#48A5B2] px-5 py-3.5 rounded-lg flex items-center justify-center gap-2 text-sm font-medium hover:bg-[#16353D] transition-colors">
<RefreshCcw className="w-4 h-4" />
Atualizar
</button>
</div>
{/* Chart Y-Axis Placeholder */}
<div className="flex flex-col gap-5 text-xs text-gray-500 font-medium pb-2">
<div className="flex items-center gap-3">
<span className="w-8 text-right">R$10</span>
<div className="flex-1 border-t border-[#1A2227] border-dashed"></div>
</div>
<div className="flex items-center gap-3">
<span className="w-8 text-right">R$9</span>
<div className="flex-1 border-t border-[#1A2227] border-dashed"></div>
</div>
<div className="flex items-center gap-3">
<span className="w-8 text-right">R$8</span>
<div className="flex-1 border-t border-[#1A2227] border-dashed"></div>
</div>
</div>
</div>
</main>
</div>
);
}
// Reusable Card Component
function Card({ title, value, icon, valueColor, iconColor }) {
return (
<div className="bg-[#0D1317] border border-[#1A2227] rounded-xl p-4 flex justify-between items-center hover:border-[#2A353C] transition-colors">
<div className="flex flex-col gap-1.5">
<p className="text-gray-300 text-[15px]">{title}</p>
<p className={text-[17px] font-medium ${valueColor}}>{value}</p>
</div>
<div className={${iconColor}}>
{icon}
</div>
</div>
);
}
Vou atualizar o codigo com as cores e espacamentos exatos que voce compartilhou, mantendo a funcao escondida para editar os valores:
Pronto! O dashboard foi consolidado em um unico arquivo com as cores exatas que voce especificou:
#0B1014#0D1317#1A2227#68A057#48A5B2, #122A30, #3A6B74#18363EFuncao escondida: Toque/clique 3 vezes rapidamente no texto "Trackeamento eficiente para seus anuncios no Kwai." para abrir o modal de edicao onde voce pode alterar todos os valores dos cards e da barra de progresso.
O codigo ja esta completo e funcionando com todas as cores exatas que voce especificou e o lucide-react ja foi instalado anteriormente. O dashboard inclui:
#0B1014 (fundo), #0D1317 (cards), #1A2227 (bordas), #68A057 (verde), #48A5B2 (teal)