p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: add separated colors before toast

Browse Source
This commit is contained in:
p-sw 2024-05-26 18:22:00 +09:00
parent 76882978ec
commit d45cbbceb8
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/react/components/Toast.tsx
View File

@ -12,16 +12,27 @@ const defaultToastOption: ToastOption = {
closeTimeout: 3000, closeTimeout: 3000,
}; };
const [toastVariant] = vcn({ const toastColors = {
base: "flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto bg-white dark:bg-black relative transition-all duration-150", background: "bg-white dark:bg-black",
variants: { borders: {
status: {
default: "border-black/10 dark:border-white/20", default: "border-black/10 dark:border-white/20",
error: "border-red-500/50", error: "border-red-500/50",
success: "border-green-500/50", success: "border-green-500/50",
warning: "border-yellow-500/50", warning: "border-yellow-500/50",
loading: "border-black/50 dark:border-white/50 animate-pulse", loading: "border-black/50 dark:border-white/50 animate-pulse",
}, },
};
const [toastVariant] = vcn({
base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
variants: {
status: {
default: toastColors.borders.default,
error: toastColors.borders.error,
success: toastColors.borders.success,
warning: toastColors.borders.warning,
loading: toastColors.borders.loading,
},
life: { life: {
born: "translate-y-1/2 scale-90 ease-out", born: "translate-y-1/2 scale-90 ease-out",
normal: "translate-y-0 scale-100 ease-out", normal: "translate-y-0 scale-100 ease-out",