40 lines
2.1 KiB
TypeScript
40 lines
2.1 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { Show } from 'solid-js';
|
|
import { AlertTriangle, CheckCircle2 } from 'lucide-solid';
|
|
|
|
interface ValidationStatusBarProps {
|
|
validationStats: {
|
|
hasIncomplete: boolean;
|
|
incompleteCount: number;
|
|
};
|
|
}
|
|
|
|
export const ValidationStatusBar: Component<ValidationStatusBarProps> = (props) => {
|
|
return (
|
|
<div class={`mt-12 p-5 rounded-3xl border shadow-premium transition-all duration-500 flex items-center justify-between ${props.validationStats.hasIncomplete ? 'bg-destructive/5 border-destructive/20 text-destructive' : 'bg-primary/5 border-primary/20 text-primary'}`}>
|
|
<div class="flex items-center gap-4">
|
|
<div class={`p-3 rounded-2xl shadow-sm ${props.validationStats.hasIncomplete ? 'bg-destructive/20' : 'bg-primary/20'}`}>
|
|
{props.validationStats.hasIncomplete ? <AlertTriangle class="w-5 h-5" /> : <CheckCircle2 class="w-5 h-5" />}
|
|
</div>
|
|
<div>
|
|
<p class="font-black text-sm uppercase tracking-tight">
|
|
{props.validationStats.hasIncomplete
|
|
? `Attention Required: ${props.validationStats.incompleteCount} fields contain unfinalized information (#)`
|
|
: "All notes have been updated."}
|
|
</p>
|
|
<p class={`text-[10px] font-bold uppercase tracking-widest opacity-80 mt-0.5`}>
|
|
{props.validationStats.hasIncomplete
|
|
? "Please replace all '#' markers with final project data before finalizing."
|
|
: "Everything looks good to go!"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Show when={!props.validationStats.hasIncomplete}>
|
|
<div class="px-4 py-2 bg-primary text-primary-foreground rounded-xl text-[10px] font-black uppercase tracking-wider shadow-lg shadow-primary/20 transition-all">
|
|
Ready to Print
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
);
|
|
};
|