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";
import { Tooltip } from "@/components/ui/tooltip-1";
const RotateCounterClockwise = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.5 8C13.5 4.96643 11.0257 2.5 7.96452 2.5C5.42843 2.5 3.29365 4.19393 2.63724 6.5H5.25H6V8H5.25H0.75C0.335787 8 0 7.66421 0 7.25V2.75V2H1.5V2.75V5.23347C2.57851 2.74164 5.06835 1 7.96452 1C11.8461 1 15 4.13001 15 8C15 11.87 11.8461 15 7.96452 15C5.62368 15 3.54872 13.8617 2.27046 12.1122L1.828 11.5066L3.03915 10.6217L3.48161 11.2273C4.48831 12.6051 6.12055 13.5 7.96452 13.5C11.0257 13.5 13.5 11.0336 13.5 8Z"
/>
</svg>
);
export default function WarningDemo() {
return <ProjectBanner
callToAction={{
label: "Undo Rollback",
onClick: () => {
alert("Button clicked");
}
}}
icon={<RotateCounterClockwise />}
label={
<div className="flex gap-1">
This project was rolled back by
<Tooltip
className="underline decoration-dashed underline-offset-[5px]"
text="Yesterday for project marketing-website"
>
@johnphamous
</Tooltip>
</div>
}
variant="warning"
/>;
}