feat(charts): add persistent workspace chart management
This commit is contained in:
litoral05
@@ -0,0 +1,245 @@
|
||||
import {
|
||||
Bell,
|
||||
Lock,
|
||||
Palette,
|
||||
Save,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
|
||||
type SettingsPageProps = {
|
||||
theme: "dark" | "light";
|
||||
};
|
||||
|
||||
const RADIUS = "rounded-[6px]";
|
||||
|
||||
export function SettingsPage({ theme }: SettingsPageProps) {
|
||||
const isDark = theme === "dark";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "flex h-full flex-col bg-[#07101B] text-white"
|
||||
: "flex h-full flex-col bg-[#F3F6FA] text-[#0F172A]"
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-between px-10 pb-6 pt-8">
|
||||
<div>
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "text-xs font-black uppercase tracking-[0.24em] text-[#7F8CA3]"
|
||||
: "text-xs font-black uppercase tracking-[0.24em] text-slate-500"
|
||||
}
|
||||
>
|
||||
Configuração
|
||||
</p>
|
||||
|
||||
<h1
|
||||
className={
|
||||
isDark
|
||||
? "mt-3 text-[34px] font-black tracking-[-0.04em] text-white"
|
||||
: "mt-3 text-[34px] font-black tracking-[-0.04em] text-[#0F172A]"
|
||||
}
|
||||
>
|
||||
Definições
|
||||
</h1>
|
||||
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "mt-3 max-w-[680px] text-sm leading-7 text-[#A8B3C7]"
|
||||
: "mt-3 max-w-[680px] text-sm leading-7 text-slate-600"
|
||||
}
|
||||
>
|
||||
Configure preferências da plataforma, segurança, notificações
|
||||
e parâmetros gerais do sistema.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} border border-[#263247] bg-[#0E1726] px-5 py-3 text-sm font-bold text-[#4FD1C5]`
|
||||
: `${RADIUS} border border-[#D7DEE8] bg-white px-5 py-3 text-sm font-bold text-[#0F766E]`
|
||||
}
|
||||
>
|
||||
Temporário
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid flex-1 grid-cols-[380px_minmax(0,1fr)] gap-6 px-10 pb-10">
|
||||
<aside
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} border border-[#263247] bg-[#0E1726] p-6`
|
||||
: `${RADIUS} border border-[#D7DEE8] bg-white p-6`
|
||||
}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<SettingsCard theme={theme} icon={<User />} title="Perfil" value="Administrador" />
|
||||
<SettingsCard theme={theme} icon={<Lock />} title="Segurança" value="Ativa" />
|
||||
<SettingsCard theme={theme} icon={<Bell />} title="Notificações" value="Por configurar" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "mt-8 border-t border-[#263247] pt-6"
|
||||
: "mt-8 border-t border-[#D7DEE8] pt-6"
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
className={
|
||||
isDark
|
||||
? `flex h-[54px] w-full items-center justify-center gap-3 ${RADIUS} border border-[#2A3950] bg-[#111A2B] text-sm font-extrabold text-[#7F8CA3]`
|
||||
: `flex h-[54px] w-full items-center justify-center gap-3 ${RADIUS} border border-[#CBD5E1] bg-[#F8FAFC] text-sm font-extrabold text-slate-500`
|
||||
}
|
||||
>
|
||||
<Save className="h-5 w-5" />
|
||||
Guardar Alterações
|
||||
</button>
|
||||
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "mt-4 text-center text-xs leading-6 text-[#7F8CA3]"
|
||||
: "mt-4 text-center text-xs leading-6 text-slate-500"
|
||||
}
|
||||
>
|
||||
As definições serão integradas futuramente com persistência
|
||||
e validação completa.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} relative overflow-hidden border border-[#263247] bg-[#0B1220] p-8`
|
||||
: `${RADIUS} relative overflow-hidden border border-[#D7DEE8] bg-white p-8`
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(79,209,197,0.10),transparent_60%)]"
|
||||
: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(15,118,110,0.08),transparent_60%)]"
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="relative max-w-[760px] space-y-6">
|
||||
<SettingsSection
|
||||
theme={theme}
|
||||
icon={<Palette />}
|
||||
title="Aparência"
|
||||
description="Preferências visuais da plataforma."
|
||||
/>
|
||||
|
||||
<SettingsSection
|
||||
theme={theme}
|
||||
icon={<Bell />}
|
||||
title="Alertas"
|
||||
description="Configuração temporária para notificações operacionais."
|
||||
/>
|
||||
|
||||
<SettingsSection
|
||||
theme={theme}
|
||||
icon={<Lock />}
|
||||
title="Acesso"
|
||||
description="Gestão futura de permissões e autenticação."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsCard({
|
||||
theme,
|
||||
icon,
|
||||
title,
|
||||
value,
|
||||
}: {
|
||||
theme: "dark" | "light";
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
value: string;
|
||||
}) {
|
||||
const isDark = theme === "dark";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} border border-[#263247] bg-[#111A2B] p-4`
|
||||
: `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] p-4`
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? `grid h-12 w-12 place-items-center ${RADIUS} bg-[#13202F] text-[#4FD1C5]`
|
||||
: `grid h-12 w-12 place-items-center ${RADIUS} bg-[#ECFDF5] text-[#0F766E]`
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className={isDark ? "text-xs font-bold uppercase tracking-[0.18em] text-[#7F8CA3]" : "text-xs font-bold uppercase tracking-[0.18em] text-slate-500"}>
|
||||
{title}
|
||||
</p>
|
||||
<h3 className={isDark ? "mt-1 text-sm font-black text-white" : "mt-1 text-sm font-black text-[#0F172A]"}>
|
||||
{value}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsSection({
|
||||
theme,
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
theme: "dark" | "light";
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
const isDark = theme === "dark";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} border border-[#263247] bg-[#111A2B] p-5`
|
||||
: `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] p-5`
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={isDark ? "text-[#4FD1C5]" : "text-[#0F766E]"}>
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className={isDark ? "text-base font-black text-white" : "text-base font-black text-[#0F172A]"}>
|
||||
{title}
|
||||
</h2>
|
||||
<p className={isDark ? "mt-1 text-sm text-[#A8B3C7]" : "mt-1 text-sm text-slate-600"}>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsPage;
|
||||
Reference in New Issue
Block a user