Paleta Aureform
Aurora
Optimismo eléctrico. Un comienzo brillante.
Impulso del proyecto
128ideas en marcha
| Impulso del proyecto Aurora | Avance |
|---|---|
| Lun | 28 |
| Mar | 42 |
| Mié | 36 |
| Jue | 64 |
| Vie | 82 |
Oscuro · Elevado
Ver ejemplo completo
"use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Chart } from "@/components/ui/chart";
import { GradientBackground } from "@/components/effects";
function AuroraExample() {
const [project, setProject] = useState("");
const [ready, setReady] = useState(false);
const data = [
{ label: "Lun", value: 28 },
{ label: "Mar", value: 42 },
{ label: "Mié", value: 36 },
{ label: "Jue", value: 64 },
{ label: "Vie", value: 82 },
];
return (
<main className="mx-auto grid max-w-lg gap-4 bg-background p-6 text-foreground">
<GradientBackground kind="mesh" colors={["#8B5CF6","#22D3EE","#34D399"]} angle={125} intensity={0.65} className="rounded-2xl border border-border p-6 [&>.afx-background-field]:[background-image:var(--af-gradient-color)]!">
<Badge variant="outline" className="border-white/25 bg-white/5 text-white">{"Aurora"}</Badge>
<h1 className="mt-8 text-3xl font-semibold tracking-tight">{"Da tu próximo paso."}</h1>
<p className="mt-3 text-sm leading-6 text-white/75">{"Optimismo eléctrico. Un comienzo brillante."}</p>
</GradientBackground>
<Card appearance="elevated">
<CardHeader><CardTitle>{"Resumen del lanzamiento"}</CardTitle></CardHeader>
<CardContent>
<Chart kind="bar" data={data} height={140} label="Impulso del proyecto" valueLabel="Avance" />
<form onSubmit={(event) => { event.preventDefault(); setReady(true); }} className="mt-4 grid gap-3">
<label className="grid gap-2 text-xs font-medium">
{"Nombre del proyecto"}
<Input required value={project} onChange={(event) => { setProject(event.target.value); setReady(false); }} placeholder="Tu próxima gran idea" />
</label>
<div className="flex flex-wrap gap-2">
<Button type="submit">{"Crear proyecto"}</Button>
<Button type="button" variant="outline" onClick={() => { setProject(""); setReady(false); }}>{"Empezar de nuevo"}</Button>
</div>
{ready && <p role="status" className="text-xs text-primary">{"Tu vista previa está lista."}</p>}
</form>
</CardContent>
</Card>
</main>
);
}
const appearance: AppearanceConfig = {
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "elevated",
"radius": 16,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "glow",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "mesh",
"angle": 125,
"intensity": 0.65,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "aurora",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
};
export default function ConfiguredAuroraExample() {
return (
<AppearanceScope appearance={appearance}>
<AuroraExample />
</AppearanceScope>
);
}