lots of fixes. cant remember them all
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
// /components/builder/OverlapChip.tsx
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function OverlapChip(props: {
|
||||
tone?: "warning" | "info";
|
||||
label: string;
|
||||
detail?: string;
|
||||
}) {
|
||||
const { tone = "info", label, detail } = props;
|
||||
|
||||
const [ready, setReady] = useState(false);
|
||||
useEffect(() => {
|
||||
const id = window.setTimeout(() => setReady(true), 10);
|
||||
return () => window.clearTimeout(id);
|
||||
}, []);
|
||||
|
||||
const base =
|
||||
"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[0.65rem] leading-4 transition-all duration-200";
|
||||
const pop = ready ? "opacity-100 scale-100" : "opacity-0 scale-95";
|
||||
|
||||
const toneCls =
|
||||
tone === "warning"
|
||||
? "border-amber-400/40 bg-amber-400/10 text-amber-200"
|
||||
: "border-zinc-700 bg-zinc-900/60 text-zinc-200";
|
||||
|
||||
return (
|
||||
<span className={`${base} ${toneCls} ${pop}`} title={detail ?? label}>
|
||||
<span className="font-medium">{label}</span>
|
||||
{detail ? <span className="text-zinc-400">· {detail}</span> : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user