refactor(transactions): extract responsive data list

2026-09-28 14:27:32 +08:00
parent 2982d560ce
commit 1d780ba4d6
2 changed files with 177 additions and 39 deletions
@@ -0,0 +1,127 @@
+import * as React from "react"
+import { cn } from "cn"
+
+// Intended consumers: transactions, channels, and accounts.
+
+export type DataListRootProps = React.ComponentProps<"div"> & {
+  columns: string
+}
+
+function DataListRoot({
+  className,
+  columns,
+  style,
+  ...props
+}: DataListRootProps) {
+  return (
+    <div
+      data-slot="data-list"
+      className={cn(
+        "overflow-hidden rounded-lg border border-border/70 bg-card",
+        className
+      )}
+      style={{ ...style, "--data-list-cols": columns } as React.CSSProperties}
+      {...props}
+    />
+  )
+}
+
+function DataListHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="data-list-header"
+      className={cn(
+        "hidden grid-cols-[var(--data-list-cols)] items-center gap-3 border-b bg-muted/30 px-4 py-2 text-[11px] font-medium text-muted-foreground md:grid",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export type DataListHeadProps = React.ComponentProps<"span"> & {
+  align?: "left" | "center" | "right"
+}
+
+function DataListHead({
+  align = "left",
+  className,
+  ...props
+}: DataListHeadProps) {
+  return (
+    <span
+      data-slot="data-list-head"
+      className={cn(
+        align === "right" && "text-right",
+        align === "center" && "text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DataListBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="data-list-body"
+      className={cn("divide-y divide-border/60", className)}
+      {...props}
+    />
+  )
+}
+
+function DataListRow({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="data-list-row"
+      className={cn(
+        "flex flex-col gap-2 p-3 transition-colors hover:bg-muted/30 md:grid md:grid-cols-[var(--data-list-cols)] md:items-center md:gap-3 md:px-4 md:py-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export type DataListCellProps = React.ComponentProps<"div"> & {
+  label?: React.ReactNode
+  labelClassName?: string
+  align?: "left" | "center" | "right"
+}
+
+function DataListCell({
+  align = "left",
+  children,
+  className,
+  labelClassName,
+  label,
+  ...props
+}: DataListCellProps) {
+  return (
+    <div
+      data-slot="data-list-cell"
+      className={cn(
+        align === "right" && "md:text-right",
+        align === "center" && "md:text-center",
+        className
+      )}
+      {...props}
+    >
+      {label != null && (
+        <span className={cn("text-muted-foreground md:hidden", labelClassName)}>
+          {label}
+        </span>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export const DataList = Object.assign(DataListRoot, {
+  Header: DataListHeader,
+  Head: DataListHead,
+  Body: DataListBody,
+  Row: DataListRow,
+  Cell: DataListCell,
+})