Components
Loading preview...
Used for temporary, project-wide notifications that require resolution
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/project-bannerimport { ProjectBanner } from "@/components/ui/project-banner";
const Warning = () => (
<svg
height="16"
stroke-linejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.55846 2H7.44148L1.88975 13.5H14.1102L8.55846 2ZM9.90929 1.34788C9.65902 0.829456 9.13413 0.5 8.55846 0.5H7.44148C6.86581 0.5 6.34092 0.829454 6.09065 1.34787L0.192608 13.5653C-0.127943 14.2293 0.355835 15 1.09316 15H14.9068C15.6441 15 16.1279 14.2293 15.8073 13.5653L9.90929 1.34788ZM8.74997 4.75V5.5V8V8.75H7.24997V8V5.5V4.75H8.74997ZM7.99997 12C8.55226 12 8.99997 11.5523 8.99997 11C8.99997 10.4477 8.55226 10 7.99997 10C7.44769 10 6.99997 10.4477 6.99997 11C6.99997 11.5523 7.44769 12 7.99997 12Z"
/>
</svg>
);
export default function ErrorDemo() {
return <ProjectBanner
callToAction={{
label: "Add Credit Card",
href: `/$`
}}
icon={<Warning />}
label={
<>
Payment failed, update credit card information before your
account is shut down
</>
}
variant="error"
/>;
}