- 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
23 lines
515 B
TypeScript
23 lines
515 B
TypeScript
import React from "react";
|
|
import { Alert } from "@chakra-ui/react";
|
|
|
|
type MyAlertProps = {
|
|
status: "error" | "success";
|
|
title: string;
|
|
description: string;
|
|
};
|
|
|
|
const MyAlert: React.FC<MyAlertProps> = ({ title, description, status }) => {
|
|
return (
|
|
<Alert.Root status={status}>
|
|
<Alert.Indicator />
|
|
<Alert.Content>
|
|
<Alert.Title>{title}</Alert.Title>
|
|
<Alert.Description>{description}</Alert.Description>
|
|
</Alert.Content>
|
|
</Alert.Root>
|
|
);
|
|
};
|
|
|
|
export default MyAlert;
|