Arrival Panel

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6export interface ArrivalPanelProps
7  extends React.HTMLAttributes<HTMLDivElement> {
8  subtitle?: string;
9  time: string;
10  title: string;
11  unit?: string;
12}
13 
14export function ArrivalPanel({
15  title,
16  subtitle,
17  time,
18  unit = "MINUTES",
19  className,
20  ...props
21}: ArrivalPanelProps) {
22  return (
23    <div
24      className={cn(
25        "relative overflow-hidden border border-border/50 bg-card/80 backdrop-blur-sm",
26        className
27      )}
28      {...props}
29    >
30      {/* Dot pattern decoration left */}
31      <div className="absolute top-1/2 left-2 grid -translate-y-1/2 grid-cols-2 gap-1">
32        {[...new Array(6)].map((_, i) => (
33          <div key={i} className="h-1 w-1 rounded-full bg-primary/30" />
34        ))}
35      </div>
36 
37      {/* Dot pattern decoration right */}
38      <div className="absolute top-1/2 right-2 grid -translate-y-1/2 grid-cols-2 gap-1">
39        {[...new Array(6)].map((_, i) => (
40          <div key={i} className="h-1 w-1 rounded-full bg-primary/30" />
41        ))}
42      </div>
43 
44      <div className="px-12 py-4 text-center">
45        {subtitle ? (
46          <div className="mb-1 font-mono text-[9px] text-foreground/80 tracking-widest">
47            {subtitle}
48          </div>
49        ) : null}
50        <div className="font-mono text-foreground text-sm tracking-wider">
51          {title}
52        </div>
53        <div className="mt-2 flex items-center justify-center gap-2">
54          <span
55            data-slot="tron-arrival-time"
56            className="bg-red-500/90 px-4 py-1 font-bold font-mono text-white text-xl tracking-wider"
57          >
58            {time}
59          </span>
60          <span className="font-mono text-foreground text-sm tracking-wider">
61            {unit}
62          </span>
63        </div>
64      </div>
65    </div>
66  );
67}