terminal

1import { cn } from "@/lib/utils";
2 
3type TerminalProps = React.ComponentProps<"span"> & {
4  prompt?: string;
5};
6 
7function Terminal({ className, prompt = ">", style, ...props }: TerminalProps) {
8  return (
9    <>
10      <style>{`
11        @keyframes loading-ui-terminal-blink {
12          0%,
13          100% {
14            opacity: 1;
15          }
16 
17          50% {
18            opacity: 0;
19          }
20        }
21      `}</style>
22      <span
23        role="status"
24        className={cn(
25          "inline-flex items-center gap-[0.25em] font-mono",
26          className,
27        )}
28        style={style}
29        {...props}
30      >
31        <span aria-hidden="true">{prompt}</span>
32        <span
33          aria-hidden="true"
34          className="inline-block w-[0.5em] bg-current"
35          style={{
36            height: "1em",
37            animation:
38              "loading-ui-terminal-blink var(--duration, 1s) step-end infinite",
39          }}
40        />
41        <span className="sr-only">Loading</span>
42      </span>
43    </>
44  );
45}
46 
47export { Terminal };