fix: dashboard layout styles (#86)

* fix: dashboard layout scroll

* feat: dashboard nav style animation

* chore: code input font

* style: format code

* pref: alert component extraction

* fix: global font var not found

* fix: code path beak line

* chore: remove framer-motion

* fix: status color

components/shared/alert-block.tsx

@@ -0,0 +1,51 @@
+interface Props extends React.ComponentPropsWithoutRef<"div"> {
+	icon?: React.ReactNode;
+	type?: "info" | "success" | "warning" | "error";
+}
+
+import { cn } from "@/lib/utils";
+import { AlertTriangle, AlertCircle, CheckCircle2, Info } from "lucide-react";
+
+const iconMap = {
+	info: {
+		className: "bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400",
+		icon: Info,
+	},
+	success: {
+		className:
+			"bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400",
+		icon: CheckCircle2,
+	},
+	warning: {
+		className:
+			"bg-orange-50 dark:bg-orange-950 text-orange-600 dark:text-orange-400",
+		icon: AlertCircle,
+	},
+	error: {
+		className: "bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400",
+		icon: AlertTriangle,
+	},
+};
+
+export function AlertBlock({
+	type = "info",
+	icon,
+	children,
+	className,
+	...props
+}: Props) {
+	const { className: iconClassName, icon: Icon } = iconMap[type];
+	return (
+		<div
+			{...props}
+			className={cn(
+				"flex items-center flex-row gap-4 rounded-lg p-2",
+				iconClassName,
+				className,
+			)}
+		>
+			{icon || <Icon className="text-current" />}
+			<span className="text-sm text-current">{children}</span>
+		</div>
+	);
+}

components/shared/status-tooltip.tsx

@@ -17,21 +17,21 @@ export const StatusTooltip = ({ status, className }: Props) => {
 			<Tooltip>
 				<TooltipTrigger>
 					{status === "idle" && (
-						<div className={cn(" size-3.5 rounded-full bg-card", className)} />
+						<div className={cn("size-3.5 rounded-full bg-muted-foreground dark:bg-card", className)} />
 					)}
 					{status === "error" && (
 						<div
-							className={cn(" size-3.5 rounded-full bg-destructive", className)}
+							className={cn("size-3.5 rounded-full bg-destructive", className)}
 						/>
 					)}
 					{status === "done" && (
 						<div
-							className={cn(" size-3.5 rounded-full bg-primary", className)}
+							className={cn("size-3.5 rounded-full bg-primary", className)}
 						/>
 					)}
 					{status === "running" && (
 						<div
-							className={cn(" size-3.5 rounded-full bg-yellow-500", className)}
+							className={cn("size-3.5 rounded-full bg-yellow-500", className)}
 						/>
 					)}
 				</TooltipTrigger>