Theis Gaedigk
b99f52f09a
- Add package.json with dependencies and scripts for development and build - Include Vite logo and React logo SVGs in public/assets - Set up Tailwind CSS in App.css and index.css - Create main App component with routing for Home and Login pages - Implement LoginPage with authentication logic and error handling - Add HomePage component as a landing page - Create MyAlert component for displaying alerts using Chakra UI - Implement color mode toggle functionality with Chakra UI - Set up global state management using Jotai for authentication - Create ProtectedRoutes component to guard routes based on authentication - Add utility components for Toaster and Tooltip using Chakra UI - Configure Tailwind CSS and TypeScript settings for the project - Implement AddLoan component for selecting loan periods and fetching available items
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Toaster as ChakraToaster,
|
|
Portal,
|
|
Spinner,
|
|
Stack,
|
|
Toast,
|
|
createToaster,
|
|
} from "@chakra-ui/react"
|
|
|
|
export const toaster = createToaster({
|
|
placement: "bottom-end",
|
|
pauseOnPageIdle: true,
|
|
})
|
|
|
|
export const Toaster = () => {
|
|
return (
|
|
<Portal>
|
|
<ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
|
|
{(toast) => (
|
|
<Toast.Root width={{ md: "sm" }}>
|
|
{toast.type === "loading" ? (
|
|
<Spinner size="sm" color="blue.solid" />
|
|
) : (
|
|
<Toast.Indicator />
|
|
)}
|
|
<Stack gap="1" flex="1" maxWidth="100%">
|
|
{toast.title && <Toast.Title>{toast.title}</Toast.Title>}
|
|
{toast.description && (
|
|
<Toast.Description>{toast.description}</Toast.Description>
|
|
)}
|
|
</Stack>
|
|
{toast.action && (
|
|
<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
|
|
)}
|
|
{toast.closable && <Toast.CloseTrigger />}
|
|
</Toast.Root>
|
|
)}
|
|
</ChakraToaster>
|
|
</Portal>
|
|
)
|
|
}
|