mukimovd/tercul-frontend
1
0
Fork 0
mirror of https://github.com/SamyRai/tercul-frontend.git synced 2025-12-27 00:11:35 +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">
You don't have permission to access this area. Please contact an administrator if you believe this is an error.
</p>
<Link href="/">
<a className="text-primary hover:underline">Return to Home</a>
<Link href="/" className="text-primary hover:underline">
Return to Home
</Link>
</CardContent>
</Card>
@ -116,17 +116,17 @@ export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayo
{navItems.map((item) => {
const isActive = location === item.href;
return (
<Link key={item.href} href={item.href}>
<a
className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
isActive
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
}`}
>
{item.icon}
{item.label}
</a>
<Link
key={item.href}
href={item.href}
className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
isActive
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
}`}
>
{item.icon}
{item.label}
</Link>
);
})}

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

@ -29,7 +29,7 @@ export function Toast({
return () => clearTimeout(timer);
}, [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"
? "bg-red-500 text-white"
: "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";
interface ToastOptions {
export interface ToastOptions {
title?: string;
description?: string;
variant?: ToastVariant;
@ -12,10 +12,17 @@ interface ToastOptions {
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() {
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 id = Date.now();
const newToast = {
@ -34,6 +41,9 @@ export function useToast() {
return id;
};
// Set the exported toast function to use this implementation
addToast = toast;
const dismiss = (id?: number) => {
if (id) {
setToasts((prev) => prev.filter((toast) => toast.id !== id));