Beam Marker

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6export interface BeamMarkerProps extends React.HTMLAttributes<HTMLDivElement> {
7  beamColor?: "red" | "cyan" | "amber" | "primary";
8  beamHeight?: number;
9  coordinates?: string;
10  label: string;
11  sublabel?: string;
12}
13 
14const colorStyles = {
15  amber: {
16    beam: "from-amber-500 to-transparent",
17    bg: "bg-amber-500/90",
18    line: "bg-amber-500",
19  },
20  cyan: {
21    beam: "from-cyan-500 to-transparent",
22    bg: "bg-cyan-500/90",
23    line: "bg-cyan-500",
24  },
25  primary: {
26    beam: "from-primary to-transparent",
27    bg: "bg-primary/90",
28    line: "bg-primary",
29  },
30  red: {
31    beam: "from-red-500 to-transparent",
32    bg: "bg-red-500/90",
33    line: "bg-red-500",
34  },
35};
36 
37export function BeamMarker({
38  label,
39  sublabel,
40  beamColor = "red",
41  coordinates,
42  beamHeight = 96,
43  className,
44  ...props
45}: BeamMarkerProps) {
46  const colors = colorStyles[beamColor];
47 
48  return (
49    <div
50      className={cn("relative flex flex-col items-center", className)}
51      {...props}
52    >
53      {/* Vertical beam */}
54      <div
55        className={cn("w-0.5 bg-gradient-to-t", colors.beam)}
56        style={{ filter: "blur(1px)", height: beamHeight }}
57      />
58 
59      {/* Label box */}
60      <div
61        data-slot="tron-beam-marker"
62        data-color={beamColor}
63        className={cn(
64          "relative px-4 py-1 font-bold font-mono text-sm text-white tracking-wider",
65          colors.bg
66        )}
67      >
68        {label}
69        {/* Corner brackets */}
70        <div className="absolute -top-1 -left-1 h-2 w-2 border-white/50 border-t border-l" />
71        <div className="absolute -top-1 -right-1 h-2 w-2 border-white/50 border-t border-r" />
72        <div className="absolute -bottom-1 -left-1 h-2 w-2 border-white/50 border-b border-l" />
73        <div className="absolute -right-1 -bottom-1 h-2 w-2 border-white/50 border-r border-b" />
74      </div>
75 
76      {/* Sublabel */}
77      {sublabel ? (
78        <div className="mt-1 font-mono text-[9px] text-foreground/80 tracking-widest">
79          {sublabel}
80        </div>
81      ) : null}
82 
83      {/* Pointer line */}
84      <div className={cn("h-4 w-0.5", colors.line)} />
85 
86      {/* Coordinates */}
87      {coordinates ? (
88        <div className="mt-1 font-mono text-[8px] text-foreground/80">
89          {coordinates}
90        </div>
91      ) : null}
92    </div>
93  );
94}