style: update banner ui

This commit is contained in:
Prateek Shourya 2024-05-01 18:00:59 +05:30
parent eab53294bc
commit a72e4bb2c9

View File

@ -1,5 +1,5 @@
import { FC } from "react";
import { AlertCircle, CheckCircle } from "lucide-react";
import { AlertCircle, CheckCircle2 } from "lucide-react";
type TBanner = {
type: "success" | "error";
@ -10,19 +10,21 @@ export const Banner: FC<TBanner> = (props) => {
const { type, message } = props;
return (
<div className={`rounded-md p-4 w-full ${type === "error" ? "bg-red-50" : "bg-green-50"}`}>
<div
className={`rounded-md p-2 w-full border ${type === "error" ? "bg-red-500/5 border-red-400" : "bg-green-500/5 border-green-400"}`}
>
<div className="flex items-center justify-center">
<div className="flex-shrink-0">
{type === "error" ? (
<span className="flex items-center justify-center h-6 w-6 bg-red-500 rounded-full">
<AlertCircle className="h-5 w-5 text-white" aria-hidden="true" />
<span className="flex items-center justify-center h-6 w-6 rounded-full">
<AlertCircle className="h-5 w-5 text-red-600" aria-hidden="true" />
</span>
) : (
<CheckCircle className="h-5 w-5 text-green-400" aria-hidden="true" />
<CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
)}
</div>
<div className="ml-3">
<p className={`text-sm font-medium ${type === "error" ? "text-red-800" : "text-green-800"} `}>{message}</p>
<div className="ml-1">
<p className={`text-sm font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
</div>
</div>
</div>