feat: improve app ui and project metadata

apps/web/components/ui/StatusNote.tsx

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { AlertCircle, CheckCircle2, Info, TriangleAlert } from "lucide-react";
+
+import {
+  cn,
+  statusNoteClass,
+  type StatusNoteVariant,
+} from "@/lib/ui/variants";
+
+interface StatusNoteProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  title?: string;
+  variant?: StatusNoteVariant;
+}
+
+export function StatusNote({
+  children,
+  title,
+  variant = "info",
+  className,
+  ...props
+}: StatusNoteProps) {
+  const Icon = iconForVariant(variant);
+  return (
+    <div className={statusNoteClass({ variant, className })} {...props}>
+      <div className="flex gap-2">
+        <Icon className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+        <div className="min-w-0">
+          {title ? (
+            <p className="font-medium leading-5 text-ink">{title}</p>
+          ) : null}
+          <div className={cn(title ? "mt-1" : "", "text-current")}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function iconForVariant(variant: StatusNoteVariant) {
+  if (variant === "success") return CheckCircle2;
+  if (variant === "warning") return TriangleAlert;
+  if (variant === "danger") return AlertCircle;
+  return Info;
+}