mukimovd/tercul-frontend
1
0
Fork 0
mirror of https://github.com/SamyRai/tercul-frontend.git synced 2025-12-27 04:51:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve the appearance and functionality of alerts and dashboard navigation

Browse Source 
Refactors the toast component's styling, updates DashboardLayout link components and exports a standalone toast function in useToast hook.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/f896073f-d218-43ce-a7c7-a9c09756cf37.jpg
This commit is contained in:
mukimovd 2025-05-08 00:36:17 +00:00
parent 5fe41c1b1d
commit 9c0471a109
3 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/layout/DashboardLayout.tsx
View File

@ -43,8 +43,8 @@ export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayo
<p className="text-muted-foreground mb-4 text-center"> <p className="text-muted-foreground mb-4 text-center">
You don't have permission to access this area. Please contact an administrator if you believe this is an error. You don't have permission to access this area. Please contact an administrator if you believe this is an error.
</p> </p>
<Link href="/"> <Link href="/" className="text-primary hover:underline">
<a className="text-primary hover:underline">Return to Home</a> Return to Home
</Link> </Link>
</CardContent> </CardContent>
</Card> </Card>
@ -116,17 +116,17 @@ export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayo
{navItems.map((item) => { {navItems.map((item) => {
const isActive = location === item.href; const isActive = location === item.href;
return ( return (
<Link key={item.href} href={item.href}> <Link
<a key={item.href}
className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${ href={item.href}
isActive className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
? "bg-primary/10 text-primary" isActive
: "text-muted-foreground hover:bg-muted hover:text-foreground" ? "bg-primary/10 text-primary"
}`} : "text-muted-foreground hover:bg-muted hover:text-foreground"
> }`}
{item.icon} >
{item.label} {item.icon}
</a> {item.label}
</Link> </Link>
); );
})} })}

2
client/src/components/ui/toast.tsx
View File

@ -29,7 +29,7 @@ export function Toast({
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [id, onDismiss]); }, [id, onDismiss]);
const baseClasses = "fixed bottom-4 right-4 rounded-md shadow-lg p-4 transition-all duration-300 max-w-sm"; const baseClasses = "rounded-md shadow-lg p-4 transition-all duration-300 max-w-sm";
const variantClasses = variant === "destructive" const variantClasses = variant === "destructive"
? "bg-red-500 text-white" ? "bg-red-500 text-white"
: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"; : "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100";

14
client/src/hooks/use-toast.ts
View File

@ -3,7 +3,7 @@ import { useState } from "react";
type ToastVariant = "default" | "destructive"; type ToastVariant = "default" | "destructive";
interface ToastOptions { export interface ToastOptions {
title?: string; title?: string;
description?: string; description?: string;
variant?: ToastVariant; variant?: ToastVariant;
@ -12,10 +12,17 @@ interface ToastOptions {
className?: string; className?: string;
} }
// Export stand-alone toast function for convenience
let addToast: (options: ToastOptions) => number = () => 0;
export function toast(options: ToastOptions) {
return addToast(options);
}
export function useToast() { export function useToast() {
const [toasts, setToasts] = useState<ToastOptions[]>([]); const [toasts, setToasts] = useState<ToastOptions[]>([]);
// Create a function that matches the expected signature in BlogManagement // Create a function that matches the expected signature
const toast = (options: ToastOptions) => { const toast = (options: ToastOptions) => {
const id = Date.now(); const id = Date.now();
const newToast = { const newToast = {
@ -34,6 +41,9 @@ export function useToast() {
return id; return id;
}; };
// Set the exported toast function to use this implementation
addToast = toast;
const dismiss = (id?: number) => { const dismiss = (id?: number) => {
if (id) { if (id) {
setToasts((prev) => prev.filter((toast) => toast.id !== id)); setToasts((prev) => prev.filter((toast) => toast.id !== id));