128 lines
2.7 KiB
TypeScript
128 lines
2.7 KiB
TypeScript
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,
|
|
})
|