modelsdev 0.11.4

A fast TUI and CLI for browsing AI models, benchmarks, and coding agents
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

---
import { cn } from "@/utils/cn";
import type { HTMLAttributes } from "astro/types";
import { X } from "@lucide/astro";

export interface Props extends HTMLAttributes<"div"> {
  variant?: "default" | "destructive";
}

const { variant = "default", class: className, ...props } = Astro.props;

const baseStyles =
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-none border p-6 pr-8 transition-all";

const variantStyles = {
  default: "bg-background text-foreground border",
  destructive:
    "destructive group border-destructive bg-destructive text-destructive-foreground",
};

const classes = cn(baseStyles, variantStyles[variant], className);
---

<div class={classes} role="alert" data-toast {...props}>
  <slot />
  <button
    type="button"
    class="text-foreground/50 hover:text-foreground absolute top-2 right-2 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 focus:ring-2 focus:outline-none"
    data-toast-close
  >
    <X size={16} />
  </button>
</div>

<script>
  document.querySelectorAll("[data-toast-close]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const toast = btn.closest("[data-toast]");
      if (toast) {
        toast.remove();
      }
    });
  });
</script>