Divider

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
7  label?: string;
8  orientation?: "horizontal" | "vertical";
9  variant?: "default" | "glow" | "dashed" | "circuit";
10}
11 
12export function Divider({
13  label,
14  variant = "default",
15  orientation = "horizontal",
16  className,
17  ...props
18}: DividerProps) {
19  const isHorizontal = orientation === "horizontal";
20 
21  if (!isHorizontal) {
22    return (
23      <div
24        data-slot="tron-divider"
25        className={cn(
26          "relative inline-flex self-stretch",
27          variant === "default" && "w-px bg-primary/20",
28          variant === "glow" &&
29            "w-px bg-primary/30 shadow-[0_0_4px_var(--primary)]",
30          variant === "dashed" &&
31            "w-px border-primary/30 border-l border-dashed",
32          variant === "circuit" && "w-px bg-primary/20",
33          className
34        )}
35        {...props}
36      >
37        {variant === "circuit" && (
38          <div
39            className="absolute top-0 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full bg-primary/60"
40            style={{ animation: "dividerDot 3s ease-in-out infinite" }}
41          />
42        )}
43      </div>
44    );
45  }
46 
47  return (
48    <div
49      data-slot="tron-divider"
50      className={cn("relative flex items-center", className)}
51      {...props}
52    >
53      {/* Left line */}
54      <div
55        className={cn(
56          "flex-1",
57          variant === "default" && "h-px bg-primary/20",
58          variant === "glow" &&
59            "h-px bg-primary/30 shadow-[0_0_4px_var(--primary)]",
60          variant === "dashed" && "border-primary/30 border-t border-dashed",
61          variant === "circuit" && "h-px bg-primary/20"
62        )}
63      >
64        {variant === "circuit" && (
65          <>
66            <div className="absolute top-1/2 left-0 h-1.5 w-1.5 -translate-y-1/2 rounded-full bg-primary/40" />
67            <div
68              className="absolute top-1/2 h-1 w-1 -translate-y-1/2 rounded-full bg-primary/80"
69              style={{ animation: "dividerDot 3s ease-in-out infinite" }}
70            />
71          </>
72        )}
73      </div>
74 
75      {/* Label */}
76      {label ? (
77        <span className="mx-3 shrink-0 font-mono text-[9px] text-foreground/30 uppercase tracking-widest">
78          {label}
79        </span>
80      ) : null}
81 
82      {/* Right line */}
83      <div
84        className={cn(
85          "flex-1",
86// … truncated