Data Card

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface DataFieldProps {
7  highlight?: boolean;
8  label: string;
9  value: string;
10}
11 
12function DataField({ label, value, highlight = false }: DataFieldProps) {
13  return (
14    <div className="space-y-1">
15      <div className="text-[10px] text-foreground/80 uppercase tracking-widest">
16        {label}
17      </div>
18      <div className="flex items-center gap-2">
19        <span className="text-primary">|</span>
20        <span
21          className={cn(
22            "font-mono text-sm uppercase tracking-wide",
23            highlight && "bg-primary/20 px-2 py-0.5"
24          )}
25        >
26          {value}
27        </span>
28      </div>
29    </div>
30  );
31}
32 
33interface DataCardProps extends React.HTMLAttributes<HTMLDivElement> {
34  fields: { label: string; value: string; highlight?: boolean }[];
35  status?: "active" | "inactive" | "alert";
36  subtitle?: string;
37  title?: string;
38}
39 
40export function DataCard({
41  title,
42  subtitle,
43  fields,
44  status = "active",
45  className,
46  ...props
47}: DataCardProps) {
48  const statusColors = {
49    active: "border-primary/50",
50    alert: "border-destructive/50",
51    inactive: "border-muted",
52  };
53 
54  return (
55    <div
56      data-slot="tron-data-card"
57      data-status={status}
58      className={cn(
59        "relative overflow-hidden rounded border bg-card/80 backdrop-blur-sm",
60        statusColors[status],
61        className
62      )}
63      {...props}
64    >
65      {/* Scanline overlay */}
66      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
67 
68      {/* Header */}
69      {title || subtitle ? (
70        <div className="border-border/50 border-b px-4 py-2">
71          {subtitle ? (
72            <div className="text-[10px] text-foreground/80 uppercase tracking-widest">
73              {subtitle}
74            </div>
75          ) : null}
76          {title ? (
77            <div className="flex items-center gap-2">
78              <span className="text-primary">|</span>
79              <h3 className="font-bold text-lg uppercase tracking-wider">
80                {title}
81              </h3>
82            </div>
83          ) : null}
84        </div>
85      ) : null}
86 
87      {/* Fields */}
88      <div className="space-y-3 p-4">
89        {fields.map((field, index) => (
90          <DataField
91            key={index}
92            label={field.label}
93            value={field.value}
94// … truncated