TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 10:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

createpasskeyregistrationlink

Browse Source
This commit is contained in:
Max Peintner
2023-06-12 10:38:28 +02:00
parent 717c46bc46
commit 084051889b
6 changed files with 93 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/login/ui/Alert.tsx
View File

@@ -1,12 +1,34 @@
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import clsx from "clsx";
type Props = {
children: React.ReactNode;
type?: AlertType;
};
export default function Alert({ children }: Props) {
export enum AlertType {
ALERT,
INFO,
}
const yellow =
"border-yellow-600/40 dark:border-yellow-500/20 bg-yellow-200/30 text-yellow-600 dark:bg-yellow-700/20 dark:text-yellow-200";
const red =
"border-red-600/40 dark:border-red-500/20 bg-red-200/30 text-red-600 dark:bg-red-700/20 dark:text-red-200";
const neutral =
"border-divider-light dark:border-divider-dark bg-black/5 text-gray-600 dark:bg-white/10 dark:text-gray-200";
export default function Alert({ children, type = AlertType.ALERT }: Props) {
return (
<div className="flex flex-row items-center justify-center border border-yellow-600/40 dark:border-yellow-500/20 bg-yellow-200/30 text-yellow-600 dark:bg-yellow-700/20 dark:text-yellow-200 rounded-md py-2 scroll-px-40">
<div
className={clsx(
"flex flex-row items-center justify-center border rounded-md py-2 pr-2 scroll-px-40",
{
[yellow]: type === AlertType.ALERT,
[neutral]: type === AlertType.INFO,
}
)}
>
<ExclamationTriangleIcon className="flex-shrink-0 h-5 w-5 mr-2 ml-2" />
<span className="text-center text-sm">{children}</span>
</div>